Skip to content

Instantly share code, notes, and snippets.

@damienklinnert
Last active December 15, 2015 12:39
Show Gist options
  • Save damienklinnert/5261657 to your computer and use it in GitHub Desktop.
Save damienklinnert/5261657 to your computer and use it in GitHub Desktop.
guidelines for clean 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 … */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment