Write a Clean CSS
Category: CSS, CSS Tips, CSS3 Tutorial | 643 views | 3 Comments |
Grouping Your Styles
Group your styles into categories (ex. layout, typography, forms, so on) and visually seperate them in your css file. A title and table of contents doesn’t hurt either:
/*
csshook.com Screen Styles
Table of Contents:
layout
typography
forms
*/
/* layout
----------------------------------------------- */
/* typography
----------------------------------------------- */
/* forms
----------------------------------------------- */Choosing Your Categories
Even though I do have some common practices, I don’t have a ‘template’ for how to breakdown styles into categories.
For starters, I almost always have layout and typography categories. Withtypography defining the sitewide look and feel. Depending on the complexity, I may break out the table and form styles into their own categories.
Next, I address the physical sections of the page with their own categories:header, sidebar, content, and footer for example. Lastly, I collect the page and content section specific styles and place them in their own category (and sometimes subcategories).
Importing Stylesheets
Another method is to categorize the styles and place them in seperate CSS files which are all imported by one main CSS file. I find this method good in theory but it can lead to overlapping styles, specification issues, and general confusion if you’re not very careful:
@import url("layout.css");
@import url("typography.css");
@import url("forms.css");Linebreaks and Indenting Read more…
