Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Be Responsive: CSS Naming Conventions

Be Responsive: CSS Naming Conventions

This talk compares several naming conventions and the pros and cons of each. From here, we’ll look how these benefits can be applied from the beginning of a project and assist the design process.

Peter Wilson

August 12, 2014
Tweet

More Decks by Peter Wilson

Other Decks in Technology

Transcript

  1. The media object .media-object {
 overflow: hidden; //clearfix
 } .media-object__image

    {
 float: left; 
 } .media-object__body {
 overflow: hidden;
 }
  2. The media object <div class=“media-object”> <div class=“media-object__image”>
 <img />
 </div>

    <div class=“media-object__body”>
 <p>Lorem Ipsum</p>
 </div> </div>
  3. The media variant .media-object––rev > .media-object__image {
 float: right; 


    } // OR .media-object__image––rev {
 float: right; 
 }
  4. The media variant .media-object––rev > .media-object__image {
 float: right; 


    } // OR .media-object__image––rev {
 float: right; 
 }
  5. Variants .componentName–variantName { // indicated with hyphen // all one

    word // camel case // includes component’s name }
  6. Layout & state .layout-grid, .l-grid { // layout prefixed, dev’s

    preference } .componentName-is-open { // state prefixed with is }
  7. The media object .mediaObject {
 overflow: hidden; //clearfix
 } .mediaObject-image

    {
 float: left; 
 } .mediaObject-body {
 overflow: hidden;
 }
  8. The media object <div class=“mediaObject”> <div class=“mediaObject-image”>
 <img />
 </div>

    <div class=“mediaObject-body”>
 <p>Lorem Ipsum</p>
 </div> </div>
  9. The media variant .mediaObject-rev > .mediaObject-image {
 float: right; 


    } // OR .mediaObject-image-rev {
 float: right; 
 }
  10. Sub-components .ComponentName–subComponent { // indicated with hyphen // all one

    word // camel case (not pascal) // preceded with component’s name }
  11. Variant .ComponentName––someVariant { // indicated with double hyphen // camel

    case (not pascal) // preceded with component’s name ! }
  12. Utilities .u–cf { // indicated with .u- prefix // camel

    case // verbose* // can use common abbreviations }
  13. State .ComponentName.is-someState { // prefixed with .is- // camel case

    (not pascal) // state classes are always overloaded ! }
  14. The media object .MediaObject {
 overflow: hidden; //clearfix
 } .MediaObject-image

    {
 float: left; 
 } .MediaObject-body {
 overflow: hidden;
 }
  15. The media object <div class=“MediaObject”> <div class=“MediaObject-image”>
 <img />
 </div>

    <div class=“MediaObject-body”>
 <p>Lorem Ipsum</p>
 </div> </div>
  16. The media variant .MediaObject––rev > .MediaObject-image {
 float: right; 


    } // OR .MediaObject–image––rev {
 float: right; 
 }
  17. Avoiding naming clashes // without a naming convention .permalink {

    … } ! // using a naming convention .Article-permalink { … } .Comment-permalink { … }
  18. Plan for the browser • look for patterns • normalise

    your design • plan for compromise
  19. CSS Partials • separated by type • base: Sass basics

    • generic: HTML elements • utilities • components
  20. Comment.scss .Comment { … } .Comment–AuthorComment { … } .Comment_Meta

    { … } .Comment_Name { … } .Comment_Time { … } .Comment_Body { … }