Coding Efficient Style Sheets

If you spend a lot of time working with different style sheets, it’s easy to get them mixed up or lose familiarity if there’s one you haven’t cracked open in a long time. One of the most useful habits I picked up was that of labeling (or commenting) my CSS. This gets me reacquainted with my code more quickly, and improves productivity in general. If you’ve never given much thought to code commenting, maybe it’s time!

CSS Branding

Wordpress themers already know that labeling the top of a style sheet and providing a screen shot is the only way to know which theme is which when viewing them from the Presentation tab. But you don’t need to be running Wordpress to know it helps immensely with keeping things organized (especially if you use multiple sheets for one website). Giving each sheet a name, description, URL (and a version number in some cases) is a good practice to get into.

Grouping colors

I can never remember the hexadecimal codes for the associated colors I use on a design (or vice versa), so making a change to one is a pain unless I document my color scheme. Rather than copy/paste the hex number into a color picker to see for sure what color it is (or if it’s the right one), why not take the guess-work out and group all your colors together? I usually add something like this at the bottom of my style sheets. Then with a simple shortcut (cmd+end), I can go to the end of the page and grab the color I want immediately.

Don’t forget the small stuff

I tend to keep elements chunked together based on their location within the layout as users see it. So all header styles are together under the label HEADER, and all sidebar styles are under the SIDEBAR label, etc. But it’s important to add comments for little things too, like what a certain style “does”. This helps a lot when working with a string of selectors, as sometimes seen in the Comments styling of a typical Wordpress blog.

Scanning with Find & Replace

Ok so this doesn’t actually apply to coding, but it’s where commenting really pays off. Whether you use a full-blown development tool like Dreamweaver, or something lighter and simpler like CSS Edit or Style Master, the ‘Find & Replace’ feature in these apps is probably the single most important time-saver (particularly if your CSS is complicated).

Need to change one color throughout the page (or the site)? Using the color grouping tip, copy the hex you need to switch out and enter it into the ‘Find’ input box. Enter the new hex code into the ‘Replace’ input. Select the search criteria and click ‘Replace All’.

Or let’s say you want to skip to a section quickly to make some edits. Search using just ‘Find’ and it’ll take you to the first result in the list (your comment). Using the tip above as an example, you could refine this even more to search for a keyword or string, such as “author comments”.

If your CSS is separated, indented and/or commented intelligibly, it’s easy to scan through a document to find what you need even without Find & Replace, but I can’t go a day without it. ;) What about you? Got any (regular or quirky) CSS habits that increase your productivity? Is there a feature of your favorite editor you find yourself using over and over?

Tags: code | css