CSS methodologies
CSS methodologies are built to make the process of building code more predictable and more organized. The most well-known methodologies are as follows:
Scalable and Modular Architecture for CSS (SMACSS)
Object Oriented CSS (OOCSS)
Block Element Modifier (BEM)
Each of these methodologies has different features. Let's check what these popular methodologies can offer.
SMACSS
SMACSS was created by Jonathan Snook. It's more of a framework than a methodology:
For the official website of the project, visit https://smacss.com/.
SMACSS is based on the following rules:
Base rules
Layout rules
Module rules
State rules
Theme rules
Base rules
Base rules are related elements:
header (
h1
-h6
)links (
a
,a:hover
,a:active
)forms (
form
,input
)
All of these rules are related to HTML elements and should not require the !important
statement.
Layout rules
Layout rules are related to the main blocks in the structure, such as these:
header
footer
content
side
menu
article
These elements are described with IDs as follows...