CSS Methodologies, Standards & Conventions

# CSS Methodologies, Standards & Conventions

Popular Methodologies

BEM (Block Element Modifier)

#### Structure

/ Block /
.card {}
/ Element /
.card__title {}
.card__content {}
.card__footer {}
/ Modifier /
.card--featured {}
.card__title--large {}

#### Example Component

  
Title

  
Content

  

OOCSS (Object-Oriented CSS)

#### Separation of Structure and Skin

/ Structure /
.btn {
  padding: 10px 20px;
  border-radius: 4px;
  display: inline-block;
}
/ Skin /
.btn-primary {
  background: blue;
  color: white;
}
.btn-secondary {
  background: gray;
  color: white;
}

#### Separation of Container and Content

/ Bad - Content depends on container /
.sidebar h3 {
  font-size: 14px;
}
/ Good - Content is independent /
.widget-title {
  font-size: 14px;
}

SMACSS (Scalable and Modular Architecture)

#### Categories

/ 1. Base - Element defaults /
html, body { margin: 0; }
h1 { font-size: 2rem; }
/ 2. Layout - Major sections /
.l-header {}
.l-sidebar {}
.l-main {}
/ 3. Module - Reusable components /
.card {}
.navigation {}
/ 4. State - Stateful styles /
.is-active {}
.is-hidden {}
.is-loading {}
/ 5. Theme - Color schemes /
.theme-dark {}
.theme-light {}

Atomic CSS (Utility-First)

#### Single-Purpose Classes

/ Spacing /
.m-0 { margin: 0; }
.p-4 { padding: 1rem; }
.mt-2 { margin-top: 0.5rem; }
/ Typography /
.text-center { text-align: center; }
.font-bold { font-weight: 700; }
.text-lg { font-size: 1.125rem; }
/ Layout /
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }

#### Usage Example

  
Title

  Action

CSS Modules

#### Component Isolation

/ Button.module.css /
.button {
  padding: 10px 20px;
  border-radius: 4px;
}
.primary {
  background: blue;
  color: white;
}
.large {
  padding: 15px 30px;
  font-size: 1.2rem;
}

#### JavaScript Import

import styles from './Button.module.css';
${styles.button} ${styles.primary}}>
  Click Me

Naming Conventions

Common Patterns

/ kebab-case (recommended) /
.my-component-name {}
/ camelCase /
.myComponentName {}
/ PascalCase /
.MyComponentName {}
/ snake_case /
.my_component_name {}

Prefix Conventions

/ JavaScript hooks /
.js-modal-trigger {}
/ State classes /
.is-active {}
.has-error {}
.can-edit {}
/ Utility classes /
.u-text-center {}
.u-hidden {}
/ Layout classes /
.l-container {}
.l-grid {}

File Organization

7-1 Pattern

styles/
├── abstracts/
│   ├── _variables.scss
│   ├── _mixins.scss
│   └── _functions.scss
├── base/
│   ├── _reset.scss
│   └── _typography.scss
├── components/
│   ├── _buttons.scss
│   └── _cards.scss
├── layout/
│   ├── _header.scss
│   └── _footer.scss
├── pages/
│   ├── _home.scss
│   └── _about.scss
├── themes/
│   └── _dark.scss
├── vendors/
│   └── _bootstrap.scss
└── main.scss

ITCSS (Inverted Triangle CSS)

styles/
├── settings/   # Variables
├── tools/      # Mixins, functions
├── generic/    # Reset, normalize
├── elements/   # HTML elements
├── objects/    # OOCSS patterns
├── components/ # UI components
├── utilities/  # Helper classes

Best Practices

Specificity Management

/ Low specificity (good) /
.button {}
.button-primary {}
/ High specificity (avoid) /
div.container > ul.list > li.item > a.link {}
/ Use data attributes for state /
[data-state="active"] {}
[aria-expanded="true"] {}

Progressive Enhancement

/ Base styles /
.card {
  padding: 1rem;
  background: white;
}
/ Feature queries /
@supports (display: grid) {
  .card-grid {
    display: grid;
    gap: 1rem;
  }
}
/ Container queries /
@container (min-width: 400px) {
  .card {
    padding: 2rem;
  }
}

Performance Considerations

/ Avoid expensive selectors /
/ Bad /
[class*="btn"] {}
:nth-child(3n+1) {}
/ Good /
.btn {}
.third-item {}
/ Use CSS containment /
.widget {
  contain: layout style;
}

Modern Standards

Custom Properties Pattern

.component {
  --component-padding: 1rem;
  --component-color: blue;
padding: var(--component-padding);
  color: var(--component-color);
}
.component--large {
  --component-padding: 2rem;
}

Logical Properties

/ Old way /
.element {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
/ Modern way /
.element {
  margin-inline: auto;
  padding-inline: 1rem;
}

Cascade Layers

@layer reset, base, components, utilities;
@layer reset {
  * { margin: 0; }
}
@layer components {
  .button { padding: 1rem; }
}
@layer utilities {
  .mt-4 { margin-top: 1rem; }
}