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. 8.
  2. 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
  3. 12.
  4. 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
  5. 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 {
  6. 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
  7. 17.
  8. 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
  9. 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 {
  10. 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; }
  11. 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
  12. 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
  13. 24.
  14. 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>
  15. 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>