Home / CSS3 / HOW DO I ORGANISE MY CSS?

HOW DO I ORGANISE MY CSS?

You know mediaqueries are the cornerstone of responsive design, however just where and how you enable each media query depends on your implementation.

With responsive design still in its infancy there are many techniques that are being used to deliver the right CSS to the right breakpoint.

You could

  • Use Javascript to serve relevant CSS files
  • Use media=”” tag within the header
  • Use @media within the  file
  • Use a mixture of all the above.
  • An example of option 2

 




Have a look at these three slideshare presentations to start:

Beautiful Maintainable
Maintainable
Efficient, maintainable, modular
Firstly, and most importantly, document . Whatever method you use to organize , be consistent and document it. Describe at the top of each file what is in that file, perhaps providing a table of contents, perhaps referencing easy to search for unique tags so you jump to those sections easily in your editor.

If you want to split up into multiple files, by all means do so. Oli already mentioned that the extra HTTP requests can be expensive, but you can have the best of both worlds. Use a build script of some sort to publish your well-documented, modular  to a compressed, single file. The YUI Compressor can help with the compression.

In contrast with what others have said so far, I prefer to write each property on a separate line, and use indentation to group related rules. E.g. following Oli’s example:

#content {
/* CODE */
}
#content div {
/* CODE */
}
#content span {
/* CODE */
}
#content etc {
/* CODE */
}

#header {
/* CODE */
}
#header etc {
/* CODE */
}
That makes it easy to follow the file structure, especially with enough white space and clearly marked comments between groups, (though not as easy to skim through quickly) and easy to edit (since you don’t have to wade through single long lines  for each rule).

Understand and use the cascade and specificity (so sorting your selectors alphabetically is right out).

Whether I split up  into multiple files, and in what files depends on the size and complexity of the site . I always at least have a reset.css. That tends to be accompanied by layout.css for general page layout, nav.css if the site navigation menus get a little complicated and forms.css if I’ve got plenty  to style my forms. Other than that I’m still figuring it out myself too. I might have colors.css and type.css/fonts.css to split off the colors/graphics and typography, base.css to provide a complete base style for all HTML tags…

About Sushil_kumar

Check Also

Werkstatt v2.0.0 – Creative Portfolio Theme

WerkStatt v2.0.0 is your chance to amaze your clients with the best looking theme out there. It’s not the same old portfolio theme that has the same old features. WerkStatt is a powerful theme that brings a unique touch. Demo: https://themeforest.net/item/werkstatt-creative-portfolio-theme/17870799 Last Update 17 May 17 Created 1 November 16 High Resolution Yes Widget Ready […] The post Werkstatt v2.0.0 – Creative Portfolio Theme appeared first on UnlockPress.com. http://www.sushilkumar.ind.in...

Leave a Reply

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

Engineer Sushil Kumar is Stephen Fry proof thanks to caching by WP Super Cache