CSS Structural Concepts

Paradigms for Organizing your CSS in 2021

Modular CSS. Credit: topta

SMACSS

Image result for smacss
Root
├── Layouts
│ └── grid.css
├── Modules
│ ├── header.css
│ ├── footer.css
│ └── card.css
├── Themes
│ ├── dark.css
│ └── light.css
└── Base
└── variables.css

OOCSS

Structure vs. Skin

Container vs. Content

Presentational vs. Semantic Class Names

BEM

The BEM Batman (underscore included) credit: smashingmagazine.com
.byline {}
.byline__name {}
.byline__title {}
.byline__picture {}
.byline--expanded {}
.byline--expanded__bio {}

Using these concepts in tandem

Product Manager + Software Developer. Interested in Travel, Culture, and the Internet.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store