Bookout

K's choice for FE development

CSS & other makeups 

CSS methodologies

krakover.ariel

This is a short memo about “What CSS methodology do you use and why”. Best answered here as: “Hope and prayers”. And as written by Adam Morse in a recommended post:

Two css properties walk into a bar.

A barstool in a completely different bar falls over.

But in the battle between SMACSS / BEM / Atomic / OOCSS, plenty of developers had been left bleeding without knowing about CSS methodologies.

Atomic CSS

...
...
.relative {   position: relative; } 
.mt10 {   margin-top: 10px; } 
.pb10 {   padding-bottom: 10px; }
...
...
<div class="mt10 br5 relative bgred..."

It felt bad the first time I read about it and still do.

BEM

BEM – Block, Element and Modifier

.button {
  &__icon { width: 12px; }
  &__text { text-transform: uppercase; }
  &--is-disabled {
    background: grey;
  }
 }     

<button class="button__text--is-disabled" />
  • Easy to read the markup and CSS
  • No staff dependency
  • Reduces the possibility of class-name collisions and side effects
  • CSS is independent of markup
  • CSS is highly reusable

It sounds very complicated and requires a lot of discipline. Probably also a lot of renaming over time. But currently seems as most popular.

SMACSS

SMACSS Scalable and Modular Architecture for CSS.

  • Base — html, body, h1, ul, etc
  • Layout — The major sections. l- prefixes
  • Module — Reusable modular components
  • State — hidden or expanded, active/inactive. is- prefix
  • Theme — color scheme or typographic treatment across a site
//Base
a {
     color: #039; }

//layout
l-article {
     border: solid #CCC;
     border-width: 1px 0 0; }

//module
.module span {
     padding: 5px; }

//state
.is-active {
     background-color: purple;
}

//theme
.mod {
     border-color: blue; }

<div class="module l-article is-active">

As a middle solution between the atomic approach and the semantic. Still, I prefer my HTML clean. I wonder how it involves overtime and with staff coming and going.

Some more reads: