<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

A few CSS rules to keep in mind

Published on
4,973 Points
1,373 Views
6 Endorsements
Last Modified:
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... widthbox.png 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. 

3. Group CSS on one line.
For readability concerns, do this: 
border: 1px black solid

Open in new window


instead of this: 
border: black;
border: 1px;
border: solid;

Open in new window




4. RARELY use !important;

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.


5. Keep selectors simple/intuitive.

Don’t do this.
.class div div h1 > a#someid{}

Open in new window

 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:

  • A sheet may contain up to 4095 rules
  • A sheet may @import up to 31 sheets
  • @import nesting supports up to 4 levels deep


 
6
Author:p_king
1 Comment

Expert Comment

by:zachvaldez
Can you provide practical example on # 2? Excellent
0

Featured Post

Amazon Web Services

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Other articles by this author
Next Article:

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month