<

[Webinar] Streamline your web hosting managementRegister Today

x

A few CSS rules to keep in mind

Published on
4,787 Points
1,187 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
Comment
Author:p_king
1 Comment
 

Expert Comment

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

Featured Post

Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

Join & Write a Comment

In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Other articles by this author
Suggested Courses
Course of the Month11 days, 5 hours left to enroll

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month