1. CSS Reset & Normalize

Browsers apply default styles differently. To maintain consistency:

• CSS Reset: removes all browser defaults (Eric Meyer’s Reset).
• Normalize.css: makes styles consistent across browsers but keeps useful defaults.

/* CSS Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Normalize example (simplified) */
html {
  line-height: 1.15; /* Better readability */
}
body {
  margin: 0;
}

2. BEM (Block Element Modifier)

BEM is a naming convention for structured CSS:

• Block: independent component (.card)
• Element: child part (.card__title)
• Modifier: variation (.card--highlighted)

.card {
  border: 1px solid #ccc;
  padding: 1rem;
}
.card__title {
  font-size: 1.5rem;
}
.card--highlighted {
  background: lightyellow;
}

3. OOCSS & SMACSS

OOCSS (Object-Oriented CSS): Separate structure (layout) from skin (visuals). Reusable components.

SMACSS (Scalable & Modular Architecture for CSS): Categorizes rules into Base, Layout, Module, State, Theme.

/* OOCSS Example */
.media {
  display: flex;
  align-items: center;
}
.media__img {
  margin-right: 10px;
}
.media__body {
  flex: 1;
}

/* SMACSS Example: State class */
.btn {
  padding: 10px 15px;
  background: gray;
  color: white;
}
.btn.is-active {
  background: green;
}

4. Utility-first CSS (Tailwind, etc.)

Utility-first CSS uses small, reusable classes to build designs directly in markup. Tailwind CSS is a popular framework for this approach.

/* Tailwind-like utilities */
.text-center { text-align: center; }
.text-red { color: red; }
.bg-blue { background: blue; }
.p-4 { padding: 1rem; }