Ascendro Blog

Displaying 1-1 of 1 result.

Best practices in design integration [part 2]

We’ll continue now the previous article: Best practices in design integration [part 1] with a part 2, adding 5 new useful suggestions and providing basic understanding for the subject of desing integration related with CSS.

6. Minify CSS and use image sprites.

The main advantage will be a faster load time for pages. Some tools for CSS compressing:

Compressing images and using CSS sprites will lower the number of http requests making a webpage render faster. Read more about “CSS compressing” here.

7. Try to use maximum 3 selectors.

Sometimes your CSS declarations can be made simpler and selectors can be shorten down to just 2 or 3. This makes the code much more readable.

Instead of:

#main .menu li a{color: #000;}


.menu a{color: #000;}

Make a habit in using maximum 3 selectors!

8. Avoid !important.

The World Wide Web Consortium (W3C) says that:

an "!important" declaration (the delimiter token "!" and keyword "important" follow the declaration) takes precedence over a normal declaration.

The styles that have the “!important” property will override the styles written before or after the normal declaration. This can become useful in some situations when styles are added inline and you want to override them, but in most of the cases the “!important” property creates a code less maintainable and less accessible. For this reasons we recommend not using it.

Read more about “!important”: Everything you need to know about important css declaration.

9. Naming classes

Use abstract names not names that are describing the content, which can change.

Better a structural or abstract naming than a semantical one.

For example: writing a class like “main” is better than a class like “carEngineContent”, not only because it is a short name, but because it doesn’t represent the content which in many situations can change.

10. CSS Debugging Tools

Using Firebug, Inspect Element on Chrome or other tools listed below, you can get an instant preview of the layout while modifying your CSS code and this helps you understand and debug CSS styles better.

Here are some free CSS debugging tools you can install on your browser: Firebug, FireFox Web Developer, DOM Inspector, and Internet Explorer Developer Toolbar.

Also an extensive article about “CSS Debugging Tools” can be found here: HTML and CSS debugging tools.

We hope you'll find all the hints clear and useful!


No results found.