CSS Methodologies, Standards & Conventions

Modern CSS architectures, naming conventions, and organizational patterns for scalable stylesheets

Overview

Category:UI FUNDAMENTALS

Difficulty:INTERMEDIATE

Last Updated:2025-09-21

Tags:

cssbemsmacssoocssatomic-csscss-modulesarchitecture

Modern CSS architectures, naming conventions, and organizational patterns for scalable stylesheets

Reference Content

Popular Methodologies

Structure

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

Example Component


  Title

  Content

Naming Conventions

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

File Organization

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

Best Practices

/ 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"] {}

Modern Standards

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