css-best-practices

CSS Best Practices

There’s more to writing good CSS than simply knowing all the latest and greatest features and techniques in CSS. My best practices for making our CSS more efficient, maintainable, and scalable are below;

In today’s web sites and web apps are alot bigger and they have lots on hinges on CSS. So, a CSS that was very poorly thought out can be a very strain on the development in the long run.

This is an Unfinished article, I will update soon. – Ajinkya

CSS Should be :

  1. Predictable
  2. Re-usable
  3. Maintainable
  4. Scalable

1. Predictable: CSS rules should behave as we expect them to. Updates and adding new CSS rules should not affect other parts of our website.

2. Reusable: When adding new HTML elements, we shouldn’t need to recode patterns or problems we have already solved.

3. Maintainable: The most important is out CSS should be maintainable. Since, our most time goes into maintaining the code(Updating current code). New features, html elements, or updates should not require refactoring our CSS.

4. Scalable: We need to write our CSS, so in future any of the developers or who is looking at our code first time can easily manage our files.

Keeping our CSS ‘DRY’ (Dont Repeat Yourself).

- Avoid using the same chunk of code (A MUST).

- Each property should be defined only once.

- Group repeated CSS properties and then add selectors to those groups.

- Cleaner HTML

BAD CSS E.g.:


.button {

display: inline-block;
padding: 5px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;

}

.field {

display: inline-block;
padding: 5px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;

}

.column {

float: left;
padding: 5px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;

}

Good CSS :


.button,
.field,
.column {
padding: 5px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

.field, .button {
display: inline-block;
}
.column {
display: block;
float: left;
}

Well, above code is now grouped, using DRY, much more maintainable. But its very small example.

But what if we have very large code of 1000 of lines.

Then we use Object Oriented CSS ;

1. Separation of structure from appearance.

2. Separation of Containers and Content.

For E.g, if this is your existing code, we need to skin it.


.container {
width: 960px;
padding: 10px;
border: 1px solid #2980b9;

border-radius: 8px;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.box {

overflow: hidden;
min-height: 150px;
width: 95%;

padding: 10px;
border: 1px solid #2980b9;
border-radius: 8px;
box-shadow: 0 0 5px rgba(0,0,0,0.5);

}

.button {
display: inline-block;
padding: 10px;
border: 1px solid #2980b9;
border-radius: 8px;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

Into this: (Objected Oriented CSS)


.container {
width: 960px;
}

.box {
overflow: hidden;
min-height: 150px;
width: 95%;
}

.button {
display: inline-block;
}

.skin {
padding: 10px;
border: 1px solid #2980b9;
border-radius: 8px;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

2. Separation of Containers and Content :

- Avoid location depent styles
– Modules should be able to adapt to different containers and can be easily themed
– All elements with the given class will look the same, no matter what.

CSS Architecture

CSS Resets

Formatting CSS

Vendor Prefixes

Helpful Tools

Loading Facebook Comments ...

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>