Use shorthand notation

  • Shorten hexadecimal colour notation. “In CSS, when you use hexadecimal colour notation and a colour is made up of three pairs of hexadecimal digits, you can write it in a more efficient way by omitting every second digit: #000 is the same as #000000, #369 is the same as #336699 [Roger Johansson]
  • Define pseudo classes for links in the LoVe/HAte-order: Link, Visited, Hover, Active. “To ensure that you see your various link styles, you’re best off putting your styles in the order “link-visited-hover-active”, or “LVHA” for short. If you’re concerned about focus styles, they may go at the end– but wait until you’ve read this explanation before you decide.” [Eric Meyer]
    a:link { color: blue; }
    a:visited { color: purple; }
    a:hover { color: purple; }
    a:active { color: red; }
  • Define element’s margin, padding or border in TRouBLed-order: Top, Right, Bottom, Left. “When using shorthand to specify an element’s margin, padding or border, do it clockwise from the top: Top, Right, Bottom, Left.” [Roger Johansson]
  • You can use shorthand properties. “Using shorthand for marginpadding andborder properties can save a lot of space.
    CSS:
    margin: top right bottom left;
    margin: 1em 0 2em 0.5em;
    (margin-top: 1em; margin-right: 0; margin-bottom: 2em; margin-left: 0.5em;)
    CSS:
    border: width style color;
    border: 1px solid #000;
    CSS:
    background: color image repeat attachment position;
    background: #f00 url(background.gif) no-repeat fixed 0 0;
    CSS:
    font: font-style (italic/normal) font-variant (small-caps) font-weight 
    font-size/line-height font-family;
    font: italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

You may also like...