consistency :

 

Everyone writes CSS differently. This different approach would be fine if we all worked alone, but a team environment needs consistency and predictability.

 

BEM

Block Element Modifier

 

Featured image

 

Illustration of BEM on an alert block

 

 

Redefinition level

 

 

CSS nightmares

1. No Error Report

No Variables

/*======= color scheme ==========*/

primary              #000

secondary            #ccc

text                 #333

hover              #aaa

 

 

 

3. Browser Compatibility Nightmare

CanIUse

 

4. CSS Specificity

p {

  color: #000;

}

p {

  color: #333;

}

later overwrites its predecessor. 

 

 

 CSS vs. Your Client

 

CSS defines the website layout, colors and sizes and is closely related to the look of a website

 

Can you make the red more blue? Revamp my logo but make it still the same? Make it a little bolder and darker, lighter and thinner?

you are doomed

 

Wrap Up

CSS maybe simple and relatively easy to learn. But, we need to be disciplined and consistent so that it can become more manageable.