Ascendro Blog

Displaying 1-1 of 1 result.

Best practices in design integration [part 1]

Today, we will show some of the best practices used in design integration. In this article we are referring only to CSS, even if the topic is large and contains multiple elements like structure, layout, interactivity, functionality or other stuff that are also important and can be covered in other articles.

Knowing the right way to integrate a design will determine a more structured code and also will help your team and the future developers that will work on the same code to understand the project faster and be more efficient. And probably they will thank you. :)

So, let's begin and see what are the 5 CSS best practices used in design integration.

1. Add comments to your stylesheets!

You can begin by adding a table of contents that can be defined and will cover all the main areas of your website (header, content, sidebar or footer) in order to keep an overview of the structure of your code.

[Table of contents]  -------------
1. Body 
2. Header / #header 
3. Navigation / #nav 
4. Content / #content 
5. Sidebar / #sidebar 
6. Search / #search 
7. Footer / #footer 

In the stylesheets you can add comments to make your code become more accessible and easier to maintain.

/* Start Header */  
/***** Add CSS code here *****/  
/* End Header */

2. Use reusable classes.

A simple example. You have a design. You analyze it. You notice that multiple sections have a blue background color, same font (size, color), same border. What should you do? The normal approach should be to add the styles to each section like this:

.firstSection  {background-color: blue; font-size: 12px; color: black; border: 1px solid black;} 
.secondSection {background-color: blue; font-size: 12px; color: black; border: 1px solid black;} 
.thirdSection  {background-color: blue; font-size: 12px; color: black; border: 1px solid black;}    

But this is the wrong approach!

In most of the cases it is better to have a class like:

.box{background-color: blue; font-size: 12px; color: black; border: 1px solid black;}

and add this class to every section which requires these styles. In this way you’re not writing CSS for every section but reuse the code.

3. Don’t use inline styles, use external stylesheets!

Yes, the inline styles will have precedence over internal and external stylesheets, they are easy to add, but using them abundantly could cause design discrepancies, must be applied multiple times for similar elements and you are unable to use pseudo elements like :hover, :focus, :before, :after. Also, inline styles make your pages bigger and less accessible. Instead of:

First Title Name

Second Title Name

you could remove the inline styles:

First Title Name

Second Title Name

and then add to the external stylesheet:

h1{font-size: 20px;}

So, instead of using inline CSS use external stylesheets!

4. Provide fallback for older browsers and add new features for the latest browsers.

Maintain usability for those whose browsers do not support CSS3 properties, while providing CSS3 enhancements for those whose browsers do. Here is a simple example:

background-color: #e1e1e1; 
background-color: rgba(0,0,0,0.1);

If you only use the second property (which adds a transparent background color) than browser like IE6 up to IE9 will not recognize this and will take into account only the first property. You can write specific CSS for IE using conditional comments.

5. Add general purpose classes.

One of the most used class is “clearfix” which is used to clear floated elements without using structural markup. (*)

.clearfix:after { 	
    visibility: hidden; 	
    display: block; 	
    font-size: 0; 	
    content: " "; 	
    clear: both; 	
    height: 0; 	
* html .clearfix { zoom: 1; } /* IE6 */ 
*:first-child+html .clearfix { zoom: 1; } /* IE7 */  

Also you can use a background image replacement class, float elements to left or right, or other classes depending on your design.

(*) - Clearfix CSS Hack

These are only a part of what we call “best practices in CSS” but in a future will continue adding more to this article. Please feel free to tell us your opinion!


No results found.