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

Write Better CSS

Adam Kaplan
April 12, 2013

Write Better CSS

Learn how to write better CSS in 3 easy steps: reset, order and dry up.

Adam Kaplan

April 12, 2013
Tweet

Transcript

  1. { }
    CSS
    WRITE
    BETTER
    by Adam Kaplan

    View Slide

  2. IMPORTANT?
    WHY IS GOOD CSS

    View Slide

  3. EASIER TO
    READ

    View Slide

  4. KEEPS YOUR FILES
    LIGHTWEIGHT

    View Slide

  5. MAKES YOUR CSS
    REUSABLE

    View Slide

  6. HOW DO YOU
    WRITE BETTER CSS?

    View Slide

  7. RESET
    ORDER
    DRY UP
    3 EASY {
    STEPS

    View Slide

  8. RESET

    View Slide

  9. All browsers have presentation
    defaults, but no browsers have the
    same defaults.
    Eric Meyer

    View Slide

  10. 2 OPTIONS
    normalize.css
    necolas.github.io/normalize.css
    reset.css
    meyerweb.com/eric/tools/css/reset

    View Slide

  11. reset.css /*  http://meyerweb.com/eric/tools/css/reset/  
         v2.0  |  20110126
         License:  none  (public  domain)
    */
    html,  body,  div,  span,  applet,  object,  iframe,
    h1,  h2,  h3,  h4,  h5,  h6,  p,  blockquote,  pre,
    a,  abbr,  acronym,  address,  big,  cite,  code,
    del,  dfn,  em,  img,  ins,  kbd,  q,  s,  samp,
    small,  strike,  strong,  sub,  sup,  tt,  var,
    b,  u,  i,  center,
    dl,  dt,  dd,  ol,  ul,  li,
    fieldset,  form,  label,  legend,
    table,  caption,  tbody,  tfoot,  thead,  tr,  th,  td,
    article,  aside,  canvas,  details,  embed,  
    figure,  figcaption,  footer,  header,  hgroup,  
    menu,  nav,  output,  ruby,  section,  summary,
    time,  mark,  audio,  video  {
      margin:  0;
      padding:  0;
      border:  0;
      font-­‐size:  100%;
      font:  inherit;
      vertical-­‐align:  baseline;
    }
    {
    flattens ALL

    View Slide

  12. reset.css

    View Slide

  13. normalize.css /*  ===============================================
         Base
         ===============================================  */
    /**
     *  1.  Prevent  system  color  scheme's  background  color  being  
    used  in  Firefox,  IE,
     *        and  Opera.
     *  2.  Prevent  system  color  scheme's  text  color  being  used  
    in  Firefox,  IE,  and
     *        Opera.
     *  3.  Set  default  font  family  to  sans-­‐serif.
     *  4.  Prevent  iOS  text  size  adjust  after  orientation  
    change,  without  disabling
     *        user  zoom.
     */
    html  {
           background:  #fff;  /*  1  */
           color:  #000;  /*  2  */
           font-­‐family:  sans-­‐serif;  /*  3  */
           -­‐ms-­‐text-­‐size-­‐adjust:  100%;  /*  4  */
           -­‐webkit-­‐text-­‐size-­‐adjust:  100%;  /*  4  */
    }
    /**
     *  Remove  default  margin.
     */
    body  {
           margin:  0;
    }
    {
    explains CODE

    View Slide

  14. normalize.css /*  ===============================================
         Forms
         ===============================================  */
    /**
     *  Define  consistent  border,  margin,  and  padding.
     */
    fieldset  {
           border:  1px  solid  #c0c0c0;
           margin:  0  2px;
           padding:  0.35em  0.625em  0.75em;
    }
    /**
     *  1.  Correct  font  family  not  being  inherited  in  all  
    browsers.
     *  2.  Correct  font  size  not  being  inherited  in  all  
    browsers.
     *  3.  Address  margins  set  differently  in  Firefox  4+,  
    Safari  5,  and  Chrome.
     */
    input,
    select,
    textarea  {
           font-­‐family:  inherit;  /*  1  */
           font-­‐size:  100%;  /*  2  */
           margin:  0;  /*  3  */
    }
    corrects BUGS
    {

    View Slide

  15. normalize.css
    95% of that CSS is to keep various
    versions of IE behaving, imagine
    how small the file would be without IE!
    normalize Website

    View Slide

  16. INCLUDE AS SEPARATE FILES
    normalize.css
    base.css
    reset.css
    base.css

    View Slide

  17. ORDER

    View Slide

  18. application.css
    base.css
    normalize.css
    consumers.css
    home.css
    questions.css
    users.css
    application.css
    normalize.css

    View Slide

  19. /*  ...
    *=  require_self
    *=  require_tree  .
    */
    /*  ...
    *=  require_self
    *=  require  normalize
    *=  require  base
    */
    application.css application.css
    RAILS ASSET PIPELINE



    ORIGINAL FLA
    VOR
    layout.html

    View Slide

  20. /*  Layout
    -­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐  */
    body  {
       color:  #333;
       font-­‐family:  "proxima-­‐nova",  sans-­‐serif;
       font-­‐size:  100%;
       font-­‐weight:  400;
       line-­‐height:  1.5em;
    }
    .container  {
       margin:  0  auto;
       max-­‐width:  32em;
       padding:  1.5em  0;
       width:  90%;
    }
    /*  Header
    -­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐  */
    header  {
       border-­‐bottom:  1px  solid  #ddd;
       margin-­‐bottom:  1.5em;
    }
    REFLECT
    THE FLOW OF YOUR
    WEBSITE
    group {

    View Slide

  21. ALPHABETIZE
    box  {
       z-­‐index:  1;
       padding:  0.5em;
       border:  1px  solid  #aaa;
       -­‐moz-­‐box-­‐sizing:  border-­‐box;
       -­‐webkit-­‐box-­‐sizing:  border-­‐box;
       box-­‐sizing:  border-­‐box;
       width:  100%;
       margin-­‐bottom:  1em;
    }
    box  {
       border:  1px  solid  #aaa;
       -­‐moz-­‐box-­‐sizing:  border-­‐box;
       -­‐webkit-­‐box-­‐sizing:  border-­‐box;
       box-­‐sizing:  border-­‐box;
       margin-­‐bottom:  1em;
       padding:  0.5em;
       width:  100%;
       z-­‐index:  1;
    }

    View Slide

  22. GROUP
    box  {
       border:  1px  solid  #aaa;
       -­‐moz-­‐box-­‐sizing:  border-­‐box;
       -­‐webkit-­‐box-­‐sizing:  border-­‐box;
       box-­‐sizing:  border-­‐box;
       margin-­‐bottom:  1em;
       padding:  0.5em;
       width:  100%;
       z-­‐index:  1;
    }
    {
    group vendor prefixes

    View Slide

  23. Here’s the simple truth up-front:
    alphabetical CSS ordering makes
    your CSS most easily accessible
    to the widest group of people ...
    Jen Meyers

    View Slide

  24. DRY UP

    View Slide

  25. Don’t
    REPEAT
    YOURSELF
    .tag-­‐green  {
       background:  #66FF66;
       border:  1px  solid  #DDD;
       -­‐moz-­‐box-­‐sizing:  border-­‐box;
       -­‐webkit-­‐box-­‐sizing;  border-­‐box;
       box-­‐sizing:  border-­‐box;
       display:  inline-­‐block;
       padding:  0.5em;
       width:  50%;
    }
    .tag-­‐red  {
       background:  #FF3333;
       border:  1px  solid  #DDD;
       -­‐moz-­‐box-­‐sizing:  border-­‐box;
       -­‐webkit-­‐box-­‐sizing;  border-­‐box;
       box-­‐sizing:  border-­‐box;
       display:  inline-­‐block;
       padding:  0.5em;
       width:  50%;
    }
    Tag  Green
    Tag  Red

    View Slide

  26. Don’t
    REPEAT
    YOURSELF
    .tag  {
       border:  1px  solid  #DDD;
       -­‐moz-­‐box-­‐sizing:  border-­‐box;
       -­‐webkit-­‐box-­‐sizing;  border-­‐box;
       box-­‐sizing:  border-­‐box;
       display:  inline-­‐block;
       padding:  0.5em;
       width:  50%;
    }
    .green  {
       background:  #66FF66;
    }
    .red  {
       background:  #FF3333;
    }
    Tag  Green
    Tag  Red

    View Slide

  27. TIPS
    PLAN
    SKETCH
    ITERATE
    PAIR

    View Slide

  28. QUESTIONS?

    View Slide

  29. Thank you!

    View Slide