I don't personally spend a lot of time designing with CSS, but I am forced to make modifications to many existing sites and have over time become quite adept at it. The W3C have set the standards, but beyond this, writing CSS is down to an individual's preferences. Here are 5 little tips and ideas I've adopted in the last 6 months that you can use to make your CSS more streamlined, maintainable and easy to read.
Disclaimer: The CSS example files are exactly that. They are not meant to be fully functional CSS documents. Class names in the CSS files are identified merely so that you may visualize the document in your head (because there is no accompanying html), not because I condone the naming convention in them.
1) Make a table of contents.
At the top of your CSS document, write out a table of contents. For example, you could outline the different areas that your CSS document is styling (header, main, footer, etc.). Then use a large, obvious section break to separate the areas. Not only does this make your CSS look neater, but when it comes to making quick adjustments to certain areas of your website at a later date, finding the corresponding area in your CSS will be much easier.
2) Separate the positioning properties from the typographic properties.
Why? Mostly for the obsessive-compulsive neatness of it all, but also because you are likely to reuse lots of typographic properties. If you mix typographic/positioning properties in your CSS document, you might find you're needlessly repeating yourself.
3) Isolate single properties that you are likely to reuse a lot.
If you find yourself using a single property a lot, isolate it to avoid repeating it over and over again and to easily change the display of all parts of the site that use it.
4) Try out an online CSS compressor.
But not for the reason you think. I don't really trust CSS compressors, and often the cost (a loss in human legibility) of cutting a few Kb off your CSS file is greater than the benefit (slightly faster download). However, they can be a good source for learning new tricks. Some of the methods that CSS shrinkers employ to squeeze your CSS file size down can be employed in a less extreme way to make your CSS more streamlined.
5) Learn to exploit the cascading nature of CSS
This one is an obvious one, but it's sometimes overlooked. Say you have two similar boxes on your website with only minor differences. You could write out CSS to style each box, or you could write CSS to style both at the same time, and then add extra properties below to make one look different.
Design Tools: Powerful CSS Editors
CSS (Cascading Style Sheets) has made a positive impact on Web design. No longer forced to used inline style attributes, designers are able to separate content from the visual design and make modifications to a website quickly without ever having to touch the actual code that runs a site. For those new to CSS however, there's a learning curve to mastering CSS. Instead of memorizing style properties, codes and pretty much a new coding language entirely, there are tools available that offer designers the ability to check their CSS to make sure it will 1) work correctly, and 2) look good at the same time.
Listed below you will find several amazing and powerful CSS editors that are the perfect tools for designers of any skill level.
Astyle CSS Editor: Astyle is a visual CSS editor for Windows (shareware) that helps designers build CSS 2 compliant style sheets. Features include a graphic tree-type view of attachment files and the CSS structure, grouped view of properties and selectors, drag and drop operations, and the ability to actively preview current selectors and documents with IE and Mozilla support.
CSSED: As an open-source developer editor and validator which makes editing CSS very simple. The editor features syntax highlighting and validation, quick insertion of CSS properties and values, auto-completion and dialog-based insertion of complex CSS values. Not limited to CSS alone, CSSED also has some support for HTML (with embedded Javascript), XML, Javascript, Java, PHP, JSP, C, C++, Apache configuration files, .htaccess, Python, Perl, SQL, SH and other languages so it can serve quite well as multi-purpose editor.
Layout Master: Layout Master is an interesting program, that helps you to layout your Web pages using absolute positioning. It has been replaced by Style Master CSS editor, but if all you want to do is absolute positioning this program might help. For Windows.
Style Studio CSS Editor: Style Studio CSS Editor includes a CSS validator to make sure your CSS is correct. It also helps you convert existing HTML documents into HTML+CSS documents. It is for Windows and has a 30-day trial.
TopStyle Pro CSS Editor: TopStyle is a CSS stylesheet editor that also doubles as an XHTML editor. While it leaves some things to be desired as an XHTML editor, it is a nice CSS editor. It integrates well into other XHTML editors and is easy to use. As a CSS editor I love how it shows you your class usage and helps you update your site from old HTML to CSS.
There are also many powerful online CSS editors which are perfect for those designers and developers which simply want to create sites quickly and not have to know too much about coding.
CSS Creator: This handy little layout generator is an excellent tool to create fluid or fixed width floating column layouts. Values can be specified in either pixels, ems or percentages, can include structure elements such as headers, footers, and sidebars and users can specify a doctype and background colors. CSS Creator is an excellent way to develop rough CSS mockups quickly.
