Table of Contents

1. CSS box models
2. Floats
3. Normalize.css vs resets
4. Em and rem units
5. When to use the button element
6. Using non-standard fonts
7. Image replacement techniques
8. Writing efficient CSS

CSS box models

There are 2 different box models:

1. In the W3C box model, the width of an element gives the width of the content of the box, excluding padding and border.

2. In the traditional box model, the width of an element gives the width between the borders of the box, including padding and border.

By default, all browsers use the W3C box model, with the exception of IE in "Quirks Mode" (IE5.5 Mode), which uses the traditional one.

The box-sizing property allows you to switch box models:

box-sizing: border-box
box-sizing: content-box

The first declaration will cause the box sizes to be applied to the border and everything inside it (traditional model), the second one will cause the box sizes to be applied to the content only (W3C model).

Use the universal selector to apply a natural box layout model to all elements, but allowing components to change

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Compatibility : IE8+ http://caniuse.com/#search=box-sizing

Source:

http://quirksmode.org/css/user-interface/boxsizing.html

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Floats

Source: http://css-tricks.com/all-about-floats/

Normalize.css vs Resets

Source: http://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css

Em and rem units

Source: https://j.eremy.net/confused-about-rem-and-em/

When to use the button element

Source: http://css-tricks.com/use-button-element/

Using non-standard fonts

Webfonts (font services like: Google Webfonts, Typekit etc.)

Image replacement techniques

Source: http://css-tricks.com/css-image-replacement/

Writing Efficient CSS

Source: http://csswizardry.com/2012/05/keep-your-css-selectors-short/