guidelines for clean css

clean_css.css

/* the art of clean css code */
/* from http://www.adobe.com/devnet/html5/articles/css-everything-is-global-and-how-to-deal-with-it.html */
/* and http://nicolasgallagher.com/about-html-semantics-front-end-architecture */

/*
  problem in css: all styles are global, so they can easily pollute the global namespace
  and make all your styles look bad, this is especially true for reusable components and
  frameworks. Here are some guidelines for clean css that won't interfere.
*/


/* 
  1. don't use id selectors
  
  id selectors have a css priority of 1000, thus its hard to overwrite them.
  in addition they can't be reused.
  use classes instead.
  classes are reusable, identifier and direct stylings are not
*/

#bad-selector { }
.good-selector { }



/*
  2. don't reset all styles
  resetting all your styles with a global reset is bad.
  use preprocessors to set a flag for that!
*/

*, *:before, *:after, .all-bad { margin: 0 }
if (.#enableReset) {
  *, *:before, *:after, .way-better { margin: 0 }  
}



/*
  3. prefix your classes (and add a preprocessor setting for the prefix)
  so everybody can fix your namespace if it interferes (see jQuers ui)
*/

.ui-goodclass
.badclass



/*
  4. group classes together
  like in twitter bootstrap, otherwise other people who create the class ".is"
  will interfere with your styles!
*/

.this {}
.this .is .bad {}

.this {}
.this-is {}
.this-good {}



/*
  5. semantic classes 
  authors are encouraged to use [class attribute] values that describe the nature of the content, rather than values that describe the desired presentation of the content.
  (from http://dev.w3.org/html5/spec/global-attributes.html#classes)
*/



/*
  6. use JavaScript-specific classes
  Using some form of JavaScript-specific classes can help to reduce the risk that thematic or structural changes to components will break any JavaScript that is also applied. An approach that I’ve found helpful is to use certain classes only for JavaScript hooks – js-* – and not to hang any presentation off them.

  <a href="/login" class="btn btn-primary js-login"></a>
*/



/*
  7. use The “multi-class” pattern
  because when there are 3 different sizes and 3 different colors for a button, you
  have way less classes!
*/

/* good */
.btn { /* button template styles */ }
.btn-primary { /* styles specific to primary button */ }

<button class="btn">Default</button>
<button class="btn btn-primary">Login</button>

/* bad */
.btn, .btn-primary { /* button template styles */ }
.btn-primary { /* styles specific to save button */ }

<button class="btn">Default</button>
<button class="btn-primary">Login</button>


/*
  file naming and reusability, preprocessors, library of common fixes and polyfills
*/
/* read comments on blog posts and pocket */
/* when published: add to comments of blogposts, newssites, etc … */