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

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
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