Always on the lookout for articles on Cascading Style Sheets – CSS for short – I ran across this one this morning, 7 tips to organize your CSS. Do you already have a method for organizing your CSS? If not, try following these simple tips.
- Group your CSS files into a folder – Perhaps in additional to your main style sheet, you have one for print styles and one for your menu. Create a folder for all of your style sheets. Name it css or styles and make sure you save each of the style sheets within that folder. It may help you improved your website structure.
- Use efficient selectors – Understand how browsers read your css selectors, from right to left. Note that the use of efficient CSS selectors is a nowadays requirement.
- Comment and separate your CSS rules - Do you remember what each of the style rules you created within your css are meant to be used for? Most style sheets contain some reset styles, styles for the header, navigation, content and footer. You can easily separate these and add comments to make them easier for you to work with. If you are using Expression Web and see a lot of style1, style2, style3, etc, etc, this is especially true.
- Create a simple color scheme to use for your styles – Your css file may use a lot common styles and colors. A css comment as simple as
/* Colors: Light Gray #eaeaea, Dark Gray #828282, Red #c60000 */
can be helpful to you. - Use a meaningful naming convention for your selectors - An example might include #header for the container for your masthead. #header for the imageg that appears within the masthead OR #header .title and #header .tagline.
- Create your own small CSS framework – By doing this you will be able to use these common CSS classes at any time for any elements from your markup.
- Simple is better
Read 7 tips to organize your CSS complete with more examples. And while you are there, explore some of his other articles and tutorials.
