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

WordCamp Sydney: CSS Naming Conventions

Peter Wilson
September 27, 2014

WordCamp Sydney: CSS Naming Conventions

This talks 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, assist the design process and how they apply to WordPress themes and plugins.

Peter Wilson

September 27, 2014
Tweet

More Decks by Peter Wilson

Other Decks in Technology

Transcript

  1. In this talk • BEM • SUIT CSS naming conventions

    • Advantages • Naming conventions for WordPress
  2. The media object .media-object {
 overflow: hidden; //clearfix
 } .media-object__image

    {
 float: left; 
 } .media-object__body {
 overflow: hidden;
 }
  3. The media object .media-object {
 overflow: hidden; //clearfix
 } .media-object__image

    {
 float: left; 
 } .media-object__body {
 overflow: hidden;
 } .media-object {
 overflow: hidden; //clearfix
 } .media-object__image {
 float: left; 
 } .media-object__body {
 overflow: hidden;
 }
  4. 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>
  5. The media variant .media-object––rev > .media-object__image {
 float: right; 


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


    } // OR .media-object__image––rev {
 float: right; 
 }
  7. Sub-components .ComponentName–subComponent { // indicated with hyphen // all one

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

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

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

    (not pascal) // state classes are always overloaded ! }
  11. Prefixes .pwcc-ComponentName{ // prefixed if needs be // all classes

    prefixed // .pwcc-u-cf // .pwcc-is-closed }
  12. The media object .MediaObject {
 overflow: hidden; //clearfix
 } .MediaObject-image

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

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


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

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

    your design • plan for compromise
  17. Before .genericon:before, .menu-toggle:after, .featured-post:before, .date a:before, .entry- meta .author a:before,

    .format-audio .entry-content:before, .comments-link a:before, .tags-links a:first-child:before, .categories-links a:first- child:before, .edit-link a:before, .attachment .entry-title:before, .attachment- meta:before, .attachment-meta a:before, .comment-awaiting- moderation:before, .comment-reply-link:before, .comment-reply-login:before, .comment- reply-title small a:before, .bypostauthor > .comment- body .fn:before, .error404 .page-title:before { -webkit-font-smoothing: antialiased; display: inline-block; font: normal 16px/1 Genericons; vertical-align: text-bottom; }
  18. Winner: SUIT CSS .ComponentName { … } .ComponentName––variant { …

    } .ComponentName–subComponent { … } .u-displayBlock { … } .is-closed { … }
  19. Winner: SUIT CSS .ComponentName { … } .ComponentName–Variant { …

    } .ComponentName_SubComponent { … } .u-DisplayBlock { … } .is-Closed { … }
  20. SUIT CSS with WordPress • Component names matter • Sub-modules

    do not • Variants do not • use camel case
  21. WordPress theme developers • Only one theme can run at

    any time • No need to prefix classes • Use something like SUIT CSS to avoid clashes 
 /* Themes */ .Article {}
  22. WordPress plugin developers • Multiple plugins run at a time

    • Use SUIT CSS to avoid clashes • prefix class names with the full plugin slug. 
 /* Plugins */ .rapid-adn-widget-StatusUpdate {}
  23. WordPress plugin developers • Multiple plugins run at a time

    • Use SUIT CSS to avoid clashes • prefix class names with the full plugin slug. 
 /* Plugins */ .rapid-adn-widget-StatusUpdate {}
  24. <html class=“no-js"> <head> <script>// pwcc.cc/avoiding-fouc </script> <?php wp_head() ?> </head>

    <body <?php body_class(); ?>> <html class=“no-js"> <head> <script>// pwcc.cc/avoiding-fouc </script> <?php wp_head() ?> </head> <body <?php body_class(); ?>> WordPress body tag
  25. <html class=“single single-post postid-95 single-format-standard single-author”> ... <ul id=“site-nav”> <li

    class=“menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-38”> <li class=“menu-item menu-item-type-custom menu-item-object-custom menu-item-92”> </ul> ... <article class=“post-95 post type-post status-publish format-standard hentry category-code tag-html tag-conditional-comments tag-internet-explorer tag-ie8"> One Category, Four Tags
  26. function pwcc_filter_post_class( $classes ) { // make changes here return

    $classes; } ! add_filter( ‘post_class’, ‘pwcc_filter_post_class’ ); Filtering post_class
  27. function pwcc_filter_post_class( $classes ) { // make changes here return

    $classes; } ! add_filter( ‘post_class’, ‘pwcc_filter_post_class’ ); Filtering post_class
  28. function pwcc_filter_post_class( $classes ) { // make changes here return

    $classes; } ! add_filter( ‘post_class’, ‘pwcc_filter_post_class’ ); Filtering post_class
  29. function pwcc_filter_post_class( $classes ) { // make changes here return

    $classes; } ! add_filter( ‘post_class’, ‘pwcc_filter_post_class’ ); Filtering post_class
  30. function pwcc_filter_post_class( $classes ) { // make changes here return

    $classes; // must return modifications } ! add_filter( ‘post_class’, ‘pwcc_filter_post_class’ ); Filtering post_class
  31. function pwcc_filter_post_class( $classes ) { // $classes is an array

    return $classes; } function pwcc_filter_post_class( $classes ) { // $classes is an array Adding to post_class
  32. function pwcc_filter_post_class( $classes ) { // $classes is an array

    return $classes; } function pwcc_filter_post_class( $classes ) { // $classes is an array $classes[] = ‘Article’; // add component Adding to post_class
  33. function pwcc_filter_post_class( $classes ) { // $classes is an array

    return $classes; } function pwcc_filter_post_class( $classes ) { // $classes is an array $classes[] = ‘Article’; // add component $classes[] = ‘Article-LinkFormat’; // variant Adding to post_class
  34. function pwcc_filter_post_class( $classes ) { $classes = array(); // $classes

    is an array $classes[] = ‘Article’; // add component $classes[] = ‘Article-LinkFormat’; // variant return $classes; } Overriding post_class
  35. add_filter( ‘body_class’, ‘pwcc_filter_body_class’ ); add_filter( ‘post_class’, ‘pwcc_filter_post_class’ ); add_filter( ‘nav_menu_css_class’,

    ‘pwcc_filter_menu_class’ ); add_filter( ‘comment_class’, ‘pwcc_filter_comment_class’ ); ! Rinse, repeat
  36. <html class=“Template-Singular Template-Singular-Post”> ... <ul class=“Nav”> <li class=“Nav_Item”> <li class=“Nav_Item

    Nav_Item-Active”> </ul> ... <article class=“hentry Article Article-Post”> One Category, Four Tags
  37. <html class=“Template-Singular Template-Singular-Post”> ... <ul class=“Nav”> <li class=“Nav_Item”> <li class=“Nav_Item

    Nav_Item-Active”> </ul> ... <article class=“hentry Article Article-Post”> One Category, Four Tags
  38. <html class=“Template-Singular Template-Singular-Post”> ... <ul class=“Nav”> <li class=“Nav_Item”> <li class=“Nav_Item

    Nav_Item-Active”> </ul> ... <article class=“hentry Article Article-Post”> <html class=“t-Singular t-Singular-Post”> ... <ul class=“Nav”> <li class=“Nav_Item”> <li class=“Nav_Item Nav_Item-Active”> </ul> ... <article class=“hentry Article Article-Post”> One Category, Four Tags
  39. CSS Partials • separated by type • base: Sass basics

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

    { … } .Comment_Name { … } .Comment_Time { … } .Comment_Body { … }
  41. Comment.scss $pwcc-Comment-FontSize: 0.8 * $pwcc-Base-FontSize; ! .Comment { @include font-size(

    $pwcc-Comment-FontSize ); line-height: (24/$pwcc-Comment-FontSize); }