Atomic CSS (ACSS)
Block Element Modifier (BEM)
Object Oriented CSS (OOCSS)
Scalable Modular Architecture CSS (SMACSS)
Inside in this sample:
less/
|- _base/
| |- _default.less
| |- _config.less
| |- _mixin.less
| |- ... add more ...
|
|- _layout/
| |- _l-default.less
| |- _l-float.less
| |- _l-margin.less
| |- _l-grid.less
| |- ... add more ...
|
|- _module/
| |- _m-default.less
| |- _m-button.less
| |- ... add more ...
|
|- _state/
| |- _s-default.less
| |- ... add more ...
|
|- _theme/
| |- _t-default.less
| |- ... add more ...
|
|- application/
| |- style.less
css/
|- style.css_mixin.less (less-mixins)
_l-grid.less (css-grids)
In general you should include the folder less/ in build into your
project folder structur and create your own ACSS BEM SMACSS OOCSS work as suggested in the docs for each ACSS BEM SMACSS OOCSS template.
Atomic CSS
.mt-20 {
margin-top: 20px;
}
/* Or */
.fl {
float: left;
}<article class="mt-20">
<img src="" alt="" title="" class="fl">
</article>Block - Element - Modifier
/* This is the Block */
.block1 {}
.block2 {}
/* This is an element, that helps to form the block as a whole */
.block1__element1 {}
.block2__element2 {}
/* This modifies the element or a block*/
.block1--modifier1 {}
.block2--modifier2 {}
/* Block Element Modifier */
.block2__element1--modifier1 {}
.block2__element2--modifier2 {}<header class="block1">
<h1 class="block1__element1">
<a class="block1--modifier1" href="https://www.tnado.com/">tnado SEO CMS</a>
</h1>
</header>
<article class="block2 block2--modifier2">
<h1 class="block2__element2">tnado SEO CMS</h1>
</article>
<article class="block2">
<h1 class="block2__element2 block2__element2--modifier2">tnado SEO CMS</h1>
</article>Object Oriented CSS
Separation of Structure From Skin. Here as example an ID was used and to which the skin was still defined.
This is not good readable and not good scaleable (PURE CSS):
/* No id but we have more buttons on the site */
#button {
width: 200px;
height: 50px;
padding: 10px;
border: solid 1px #ccc;
background: linear-gradient(#ccc, #222);
box-shadow: rgba(#000000,.5) 2px 2px 5px;
}Good, you do this with preprocessors e.g. LESS or SASS:
/* LESS or SASS - OOCSS, BEM */
/* Give the button defaults */
.button {
/* You can give here the padding but you need it not once */
&__element {
width: 200px;
height: 50px;
padding: 5px 10px; /* small applications use here otherwise use a helper file */
}
/* Give the button the modifier */
&--skin {
border: solid 1px #ccc;
background: linear-gradient(#ccc, #222);
box-shadow: rgba(#000000,.5) 2px 2px 5px;
}
}<button class="button__element button--skin">Send</button>/* LESS or SASS - OOCSS, BEM and ACSS */
/* Give the button defaults */
.l-button {
/* You can give here the padding but you need it not once */
&__element {
width: 200px;
height: 50px;
}
/* Give the button the modifier */
&--skin {
border: solid 1px #ccc;
background: linear-gradient(#ccc, #222);
box-shadow: rgba(#000000,.5) 2px 2px 5px;
}
}
/* Give a helper padding with a prefix (ACSS) from helper file but in BEM style with two --, without BEM single - */
.p {
&--10 {
padding: 10px;
}
&--20 {
padding: 20px;
}
&--30 {
padding: 30px;
}
}<div class="l-button">
<button class="l-button__element l-button--skin p--10">Send</button>
</div>Scalable and Modular Architecture CSS.
Not good to use the elements directly nav > li
Augmented CSS:
nav li {
display: inline-block;
}
/* or */
nav.nav-primary li {
display: inline-block;
}
/* or */
nav.nav-secondary li,
nav.nav-primary li li {
display: block;
}Name all Elements to scale and create a modular Architecture.
SMACSS-style CSS (LESS):
/* LESS or SASS - SMACSS and BEM */
.l-inline {
&__item {
display: inline-block;
}
}
.l-stacked {
/* nav.nav-primary li */
&__item {
display: block;
}
/* nav.nav-primary li li */
&__subitem {
display: inline-block;
}
}<nav>
<ul class="l-inline">
<li class="l-inline__item"><a href="https://www.tnado.com/">Home</a></li>
</ul>
</nav>
<nav>
<ul class="l-stacked">
<li class="l-stacked__item">
<a href="https://www.tnado.com/">Home</a>
<ul class="l-stacked">
<li class="l-stacked__subitem"><a href="https://www.tnado.com/">Home</a></li>
</ul>
</li>
</ul>
</nav>OCSS - ACSS - BEM - SMACSS
Better, you do on big applications this:
/* Prefix "m-" for module */
.m-button {
height: 50px;
/* Elements */
&__big {
width: 200px;
}
&__small {
width: 100px;
}
/* Modifiers */
&--default {
border: solid 1px #ccc;
background: linear-gradient(#ccc, #222);
box-shadow: rgba(#000000,.5) 2px 2px 5px;
}
&--primary {
border: solid 1px #ddd;
background: linear-gradient(#ddd, #333);
box-shadow: rgba(#ffffff,.5) 2px 2px 5px;
}
}
/**
* ACSS with prefix
* Prefix "l-" layout prefixer
* l-"p--" padding modifier
* l-p--"10" 10px padding
*/
.l-p {
&--10 {
padding: 10px;
}
&--20 {
padding: 20px;
}
}<button class="m-button m-button__small m-button--default l-p--10">Send</button>