When writing CSS, there are a few simple rules that will make your life easier.
1. Using ‘* {box-sizing:border-box;}’.
Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... It is also fast and well supported across browsers.
2. Center div using {margin: 0 auto};
From the CSS specification, “If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.”
This rule is easy to understand and remember. As long as the width of the parent container of the div you want to center is larger than its child element, using margin: 0 auto will center a div.
This one is fairly intuitive, as long as you know what ‘!important’ does. But in case you don’t. ‘!important’ breaks all the rules that CSS sets up for us. For instance, there is an order of operations (of sorts) to CSS that allows you to keep track of what selectors have priority. #id is more important that .class, but both are less important than inline CSS in html.
Using ‘!important’ breaks all these rules and tells your compiler to use the rule specified no matter what the order of operations tell us. This can be extremely difficult to keep track of as your site grows.
This code is hard to read and is (slightly) slower than simply targeting the element you want with an id. I’ll let the guys over at CSS-Tricks explain it in further detail for you. http://css-tricks.com/efficiently-rendering-css/. But in the meantime, just add an id to what you want to select.
6. Understand rem vs em.
‘em’ is the size of text proportional to its parent containers' font-size. ‘rem’, which stands for 'root em' is the size of text relative to the html (root) size.
For example: If you have font-sizes that scale relative to the html root, you’ll use ‘rem’. If you have font-sizes that will inherit sizes from their parents, you’ll use ‘em’.
7. Be aware of the IE rule limit.
IE 6 – 9 have a rule limit of:
Comments (1)
Commented: