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

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

Peter Wilson

July 10, 2013
Tweet

More Decks by Peter Wilson

Other Decks in Technology

Transcript

  1. Specificity, SMACSS
    and WordPress
    Peter Wilson
    @pwcc

    View full-size slide

  2. Specificity is your
    FRIEND

    View full-size slide

  3. Specificity is your
    FIEND

    View full-size slide

  4. Selector
    TYPES

    View full-size slide

  5. ID - #header

       
           
               Site
           
       

    View full-size slide

  6. Class - .logo

       
           
               Site
           
       

    View full-size slide

  7. Element - div

       
           
               Site
           
       

    View full-size slide

  8. Attribute - [title="site"]

       
           
               Site
           
       

    View full-size slide

  9. Pseudo Class - :hover

       
           
               Site
           
       

    View full-size slide

  10. Pseudo Element - :before
     
         
           
               Site
           
         
     

    View full-size slide

  11. Important Property
    .logo  {
       color:  black  !important;
    }

       Site

    View full-size slide

  12. Inline CSS
     
         

       Site

         
     

    View full-size slide

  13. INLINE CSS
    is best
    IGNORED

    View full-size slide

  14. INLINE CSS
    makes
    BABIES CRY

    View full-size slide

  15. Calculating
    SPECIFICITY

    View full-size slide

  16. Calculating Specificity

    View full-size slide

  17. Calculating Specificity

    View full-size slide

  18. Calculating Specificity

    View full-size slide

  19. Calculating Specificity

    View full-size slide

  20. Infinitely more powerful

    View full-size slide

  21. If you must know...

    View full-size slide

  22. OOCSS or
    SMACSS

    View full-size slide

  23. The same
    PATTERNS
    are used on
    ALL SITES

    View full-size slide

  24. The nav object

    View full-size slide

  25. The nav object
    .nav  {
       list-­‐style:  none;
       padding-­‐left:  0;
    }  
    .nav  >  li,  .nav  >  li  >  a  {
       display:  inline-­‐block;
    }

    View full-size slide

  26. The nav object
     
    wp_nav_menu(  array(
       'menu_class'  =>  'nav  main-­‐nav',
       'container'    =>  false,
       'depth'            =>  2
    )  );

    View full-size slide

  27. The media object

    View full-size slide

  28. The media object
    m
    m
    m

    View full-size slide

  29. Facebook’s CSS
    HUNDREDS
    OF LINES
    smaller

    View full-size slide

  30. The media object
    .media,  .media__body  {
       overflow:  hidden;
    }
    .media__image  {
       float:  left;
       margin-­‐right:  10px
    }

    View full-size slide

  31. You’ve been
    USING
    SMACCS
    FOR YEARS

    View full-size slide

  32. • grids
    • clear fixes
    • WordPress widgets

    View full-size slide

  33. Adding SMACSS to
    EXISTING
    THEME

    View full-size slide

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

    View full-size slide

  35. MMXIII
    .ico:before  {
       display:  inline-­‐block;
       font:  normal  16px/1  Genericons;
       vertical-­‐align:  text-­‐bottom;
    }

    View full-size slide

  36. STRONGER
    FASTER BETTER
    CSS

    View full-size slide

  37. SMALLER
    FASTER BETTER
    specificity

    View full-size slide

  38. SMACSS
    with
    WORDPRESS

    View full-size slide

  39. Caption shortcode

       
           
       
     
           A  boat
       

    View full-size slide

  40. Gallery shortcode

       
       
               
           
     
     
        A  boat
     

    View full-size slide

  41. Caption redone
             style="width:60px">
     
       
     
      A  boat

    View full-size slide


  42.                  style="width:60px">
         
             
         
         A  boat
       

    Gallery redone

    View full-size slide

  43. I am very insistent on
    TWITTER
    my username is
    @PWCC

    View full-size slide