CSS is a language that is used by nearly every developer at some point. While it’s a language that we sometimes take for granted, it is powerful and has many nuances that can help (or hurt) our designs. Here are thirty of the best CSS practices that will keep you writing solid CSS and avoiding some costly mistakes.
By now, I think it’s safe to say that most designers on the web are using CSS in some capacity. Even those (misguided) individuals who are still using table-based layouts have a tendency to use CSS for some basic styling, such as establishing fonts and link colours. With that in mind, I thought it might be worthwhile cover some of what I have found to be best practices.
Before getting started, it’s important to note that these are practices and habits that I have developed based on my own experience, which includes developing different sites, my own experiments and reading from a variety of sources. While I have my own reasons for the way I do things, I am in no way presenting the following as CSS gospel that absolutely needs to be followed.
In this article, I’ll try to cover some of the important things to remember when dealing with these issues.

know charts that you support


When can I use... support charts

here are a few other options to consider:
as you know above css fetures are listed as supported that doesn’t mean it’s without bug so test well.

Create Your HTML First

Many designers create their CSS at the same time they create the HTML. It seems logical to create both at the same time, but actually you’ll save even more time if you create the entire HTML mockup first. The reasoning behind this method is that you know all the elements of your site layout, but you don’t know what CSS you’ll need with your design. Creating the HTML layout first allows you to visualize the entire page as a whole, and allows you to think of your CSS in a more holistic, top-down manner.

Use Multiple Classes

Sometimes it’s beneficial to add multiple classes to an element. Let’s say that you have a <div> “box” that you want to float right, and you’ve already got a class .right in your CSS that floats everything to the right. You can simply add an extra class in the declaration, like so:
  1. <div class=”box right”></div>
You can add as many classes as you’d like (space separated) to any declaration.
<editors-note> Be very careful when using ids and class-names like “left” and “right.” I will use them, but only for things such as blog posts. How come? Let’s imagine that, down the road, you decide that you’d rather see the box floated to the LEFT. In this case, you’d have to return to your HTML and change the class-name – all in order to adjust the presentation of the page. This is unsemantic. Remember – HTML is for markup and content. CSS is for presentation.

 Use the Right Doctype

The doctype declaration matters a whole lot on whether or not your markup and CSS will validate. In fact, the entire look and feel of your site can change greatly depending on the DOCTYPE that you declare.
Learn more about which DOCTYPE to use at A List Apart.
doctype

Alphabetize your Properties nd be consistent in code

While this is more of a frivolous tip, it can come in handy for quick scanning
Along the lines of keeping your code readable is making sure that the CSS is consistent. You should start to develop your own “sub-language” of CSS that allows you to quickly name things. There are certain classes that I create in nearly every theme, and I use the same name each time. For example, I use “.caption-right” to float images which contain a caption to the right.
Think about things like whether or not you’ll use underscores or dashes in your ID’s and class names, and in what cases you’ll use them. When you start creating your own standards for CSS, you’ll become much more proficient.
.element {
 -moz-transition:  background-color linear .8s;
 -ms-transition:  background-color linear .8s;
 -o-transition:   background-color linear .8s;
 -webkit-transition:  background-color linear .8s;
 transition:  background-color linear .8s;
}
I wrote about standard property topic more in-depth  on my blog, so check that out if you want a more comprehensive discussion of this issue.

 Using CSS Preprocessors

Preprocessors compile the CSS code we write in a processed language to the pure CSS syntax we’re all used to. If you’ve recently considered using a CSS preprocessor, there’s no better time to dive in with all the options and helpful tools available.
Until recently, there was a lot of resistance from developers who argued that preprocessors steered too far from pure CSS, added more layers of complexity and that “If its not broken, don’t fix it”. But lately, many have realized just how powerful preprocessors can make our CSS.
LESS
Written in JavaScript, LESS extends CSS with dynamic behaviors like variables, mixins, operations and functions. The LESS documentation seems more designer friendly and the syntax looks closer to pure CSS, so it’s a smoother transition into a preprocessor. Frameworks like Bootstrap are using LESS to take advantage of its dynamic features. LESS also allows the classes we write to be reusable as mixins anywhere in the stylesheet.

Sass

Written in Ruby, Sass also extends CSS by adding nested rules, variables, mixins, functions and much more. Many popular frameworks like Foundation 3 are built with Sass. One of the best parts of using Sass is that we can use it with Compass, a framework of functions and add-ons built on top of Sass that streamlines our process, creates image sprites dynamically, writes cleaner code, and has great output for CSS3 features – together they are a powerful combination. We also have the ability to create responsive CSS-based grid systems with Susy.
Sass has two syntaxes: SCSS, which stands for “Sassy CSS”, and the older indented syntax known simply as “Sass”.
The Sass syntax uses indentation instead of curly brackets to delimit blocks of style. It also uses line breaks instead of semicolons to separate statements. This syntax is more concise and easier to read.

Stylus

Also written in JavaScript (node.js), Stylus comes equipped with many of the features provided by Sass and LESS; it supports both an indented syntax and regular CSS style. Stylus can be used with Nib, an extensions library similar to Compass that provides cross-browser CSS3 mixins. The syntax is very minimal and flexible. For example, curly brackets, colons, semicolons, and parentheses are not required.

Conclusion

Well, there you have it. That actually ended up being a lot more than I thought it would when I set out to write this post. Hopefully, you either found some new and useful ideas, or you were reminded of practices that you believe in, but may not have fully following or implementing in your own work. Even in just writing out my thoughts in these areas, I’ve found that I can certainly improve my code in a number of these areas!
Lastly, I want to stress that I don’t use any sort of CSS processing tools, such as SASS or Compass. As such, I’ve approached all of these practices from the perspective of writing flat stylesheets. I can, however, see how some of the organizational techniques may not fully relevant when using some of these other tools.