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. ID - #header <div  id="header">    <h1  class="logo">    

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

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

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

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

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

       <a  href="/"  title="Site">            Site        </a>        
  7. The nav object .nav  {    list-­‐style:  none;    padding-­‐left:

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

     'nav  main-­‐nav',    'container'    =>  false,    'depth'            =>  2 )  );
  9. The media object .media,  .media__body  {    overflow:  hidden; }

    .media__image  {    float:  left;    margin-­‐right:  10px }
  10. 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
  11. MMXIII .ico:before  {    display:  inline-­‐block;    font:  normal  16px/1

     Genericons;    vertical-­‐align:  text-­‐bottom; }
  12. 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>
  13. 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>
  14. 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>
  15. <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