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
   

   View Slide

2. Specificity is your
   FRIEND
   

   View Slide

3. Specificity is your
   FIEND
   

   View Slide

4. Selector
   TYPES
   

   View Slide

5. ID - #header
   
      
          
              Site
          
      
   
   

   View Slide

6. Class - .logo
   
      
          
              Site
          
      
   
   

   View Slide

7. Element - div
   
      
          
              Site
          
      
   
   

   View Slide

8. Attribute - [title="site"]
   
      
          
              Site
          
      
   
   

   View Slide

9. Pseudo Class - :hover
   
      
          
              Site
          
      
   
   

   View Slide

10. Pseudo Element - :before
     
         
           
               Site
           
         
     
    

    View Slide

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

    View Slide

12. Inline CSS
     
         
    
       Site
    
         
     
    

    View Slide

13. INLINE CSS
    is best
    IGNORED
    

    View Slide

14. INLINE CSS
    makes
    BABIES CRY
    

    View Slide

15. Calculating
    SPECIFICITY
    

    View Slide

16. Calculating Specificity
    

    View Slide

17. Calculating Specificity
    

    View Slide

18. Calculating Specificity
    

    View Slide

19. Calculating Specificity
    

    View Slide

20. Infinitely more powerful
    

    View Slide

21. Example
    

    View Slide

22. Example
    

    View Slide

23. Example
    

    View Slide

24. Example
    

    View Slide

25. If you must know...
    

    View Slide

26. OOCSS or
    SMACSS
    

    View Slide

27. Seems
    STUPID
    

    View Slide

28. The same
    PATTERNS
    are used on
    ALL SITES
    

    View Slide

29. View Slide

30. View Slide

31. View Slide

32. View Slide

33. View Slide

34. View Slide

35. The nav object
    

    View Slide

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

    View Slide

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

    View Slide

38. The media object
    

    View Slide

39. The media object
    m
    m
    m
    

    View Slide

40. Facebook’s CSS
    HUNDREDS
    OF LINES
    smaller
    

    View Slide

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

    View Slide

42. You’ve been
    USING
    SMACCS
    FOR YEARS
    

    View Slide

43. • grids
    • clear fixes
    • WordPress widgets
    

    View Slide

44. Adding SMACSS to
    EXISTING
    THEME
    

    View Slide

45. MMXIII
    

    View Slide

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
    

    View Slide

47. MMXIII
    

    View Slide

48. MMXIII
    

    View Slide

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

    View Slide

50. STRONGER
    FASTER BETTER
    CSS
    

    View Slide

51. SMALLER
    FASTER BETTER
    specificity
    

    View Slide

52. SMACSS
    with
    WORDPRESS
    

    View Slide

53. Caption shortcode
    
       
           
       
     
           A  boat
       
    
    

    View Slide

54. Gallery shortcode
    
       
       
               
           
     
     
        A  boat
     
    
    

    View Slide

55. ADD_FILTER
    

    View Slide

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

    View Slide

57. 
                     style="width:60px">
         
             
         
         A  boat
       
    
    Gallery redone
    

    View Slide

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

    View Slide

59. QUESTIONS
    

    View Slide