Specificity, SMACSS and WordPress

Specificity, SMACSS and WordPress

A walk through CSS specificity, what it is, how it's calculated and when it can get you in trouble. The OOCSS/Smacss concepts of managing CSS and how to use these when theming WordPress will be introduced.

For shortcode filters, refer: https://gist.github.com/peterwilsoncc/5971161

1dd9fded718f9b344d48f37f9bfcb159?s=128

Peter Wilson

July 10, 2013
Tweet

Transcript

  1. Specificity, SMACSS and WordPress Peter Wilson @pwcc

  2. Specificity is your FRIEND

  3. Specificity is your FIEND

  4. Selector TYPES

  5. ID - #header <div  id="header">    <h1  class="logo">    

       <a  href="/"  title="Site">            Site        </a>    </h1> </div>
  6. Class - .logo <div  id="header">    <h1  class="logo">    

       <a  href="/"  title="Site">            Site        </a>    </h1> </div>
  7. Element - div <div  id="header">    <h1  class="logo">    

       <a  href="/"  title="Site">            Site        </a>    </h1> </div>
  8. Attribute - [title="site"] <div  id="header">    <h1  class="logo">    

       <a  href="/"  title="Site">            Site        </a>    </h1> </div>
  9. Pseudo Class - :hover <div  id="header">    <h1  class="logo">  

         <a  href="/"  title="Site">            Site        </a>    </h1> </div>
  10. Pseudo Element - :before            

       <a  href="/"  title="Site">            Site        </a>        
  11. Important Property .logo  {    color:  black  !important; } <h1

     class="logo">    Site </h1>
  12. Inline CSS         <h1  style="font-­‐weight:  bold;">  

     Site </h1>        
  13. INLINE CSS is best IGNORED

  14. INLINE CSS makes BABIES CRY

  15. Calculating SPECIFICITY

  16. Calculating Specificity

  17. Calculating Specificity

  18. Calculating Specificity

  19. Calculating Specificity

  20. Infinitely more powerful

  21. Example

  22. Example

  23. Example

  24. Example

  25. If you must know...

  26. OOCSS or SMACSS

  27. Seems STUPID

  28. The same PATTERNS are used on ALL SITES

  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. The nav object

  36. The nav object .nav  {    list-­‐style:  none;    padding-­‐left:

     0; }   .nav  >  li,  .nav  >  li  >  a  {    display:  inline-­‐block; }
  37. The nav object <?php   wp_nav_menu(  array(    'menu_class'  =>

     'nav  main-­‐nav',    'container'    =>  false,    'depth'            =>  2 )  );
  38. The media object

  39. The media object m m m

  40. Facebook’s CSS HUNDREDS OF LINES smaller

  41. The media object .media,  .media__body  {    overflow:  hidden; }

    .media__image  {    float:  left;    margin-­‐right:  10px }
  42. You’ve been USING SMACCS FOR YEARS

  43. • grids • clear fixes • WordPress widgets

  44. Adding SMACSS to EXISTING THEME

  45. MMXIII

  46. MMXIII   {   display:  inline-­‐block;   font:  normal  16px/1

     Genericons;   vertical-­‐align:  text-­‐bottom; } .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, #reply-­‐title  small  a:before, .bypostauthor  >  .comment-­‐body   .fn:before, .error404  .page-­‐title:before
  47. MMXIII

  48. MMXIII

  49. MMXIII .ico:before  {    display:  inline-­‐block;    font:  normal  16px/1

     Genericons;    vertical-­‐align:  text-­‐bottom; }
  50. STRONGER FASTER BETTER CSS

  51. SMALLER FASTER BETTER specificity

  52. SMACSS with WORDPRESS

  53. Caption shortcode <div  class="wp-­‐caption"  style="width:60px">    <a  href="ship.jpg">    

       <img  src="boat.jpg"  />    </a>   <p  class="wp-­‐caption-­‐text">        A  boat    </p> </div>
  54. Gallery shortcode <dl  class="gallery-­‐item">    <dt  class="gallery-­‐icon">     <a

     href="ship.jpg">            <img  src="boat.jpg"  />        </a>   </dt>   <dd  class="wp-­‐caption-­‐text  gallery-­‐caption">     A  boat   </dd> </dl>
  55. ADD_FILTER

  56. Caption redone <div  class="caption  caption-­‐-­‐inline"          

     style="width:60px">   <a  href="ship.jpg">     <img  src="boat.jpg"  />   </a>   <p  class="caption__text">A  boat</p> </div>
  57. <div  class="gallery__item">    <div  class="caption  caption-­‐-­‐gallery"        

           style="width:60px">      <a  href="ship.jpg">          <img  src="boat.jpg"  />      </a>      <p  class="caption__text">A  boat</p>    </div> </div> Gallery redone
  58. I am very insistent on TWITTER my username is @PWCC

  59. QUESTIONS