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

Write Better CSS

A312a7a8d6c81355da7092f69f3e7f55?s=47 Adam Kaplan
April 12, 2013

Write Better CSS

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

A312a7a8d6c81355da7092f69f3e7f55?s=128

Adam Kaplan

April 12, 2013
Tweet

Transcript

  1. { } CSS WRITE BETTER by Adam Kaplan

  2. IMPORTANT? WHY IS GOOD CSS

  3. EASIER TO READ

  4. KEEPS YOUR FILES LIGHTWEIGHT

  5. MAKES YOUR CSS REUSABLE

  6. HOW DO YOU WRITE BETTER CSS?

  7. RESET ORDER DRY UP 3 EASY { STEPS

  8. RESET

  9. All browsers have presentation defaults, but no browsers have the

    same defaults. Eric Meyer
  10. 2 OPTIONS normalize.css necolas.github.io/normalize.css reset.css meyerweb.com/eric/tools/css/reset

  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
  12. reset.css

  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
  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 {
  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
  16. INCLUDE AS SEPARATE FILES normalize.css base.css reset.css base.css

  17. ORDER

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

  19. /*  ... *=  require_self *=  require_tree  . */ /*  ...

    *=  require_self *=  require  normalize *=  require  base */ application.css application.css RAILS ASSET PIPELINE <!-­‐-­‐  CSS  -­‐-­‐> <link  rel="stylesheet"  href="/css/normalize.css"  type="text/css"  /> <link  rel="stylesheet"  href="/css/base.css"  type="text/css"  /> ORIGINAL FLA VOR layout.html
  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 {
  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; }
  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
  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
  24. DRY UP

  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%; } <div  class="tag-­‐green">Tag  Green</div> <div  class="tag-­‐red">Tag  Red</div>
  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; } <div  class="tag  green">Tag  Green</div> <div  class="tag  red">Tag  Red</div>
  27. TIPS PLAN SKETCH ITERATE PAIR

  28. QUESTIONS?

  29. Thank you!