ProblemYou want to know how effectively to organize contents within a style sheet for easier management. SolutionManaging CSS can be accomplished by grouping common visual elements of a web page together. The following list shows a suggestion of the order of items grouped in a style sheet:
Here are the comments from three style sheets with each organizing the CSS differently: /* Typography & Colors ------------------------------------ */ [css code ] /* Structure ------------------------------------ */ [css code ] /* Headers ------------------------------------ */ [css code ] /* Images ------------------------------------ */ [css code ] /* Lists ------------------------------------ */ [css code ] /* Form Elements ------------------------------------ */ [css code ] /* Comments ------------------------------------ */ [css code ] /* Sidebar ------------------------------------ */ [css code ] /* Common Elements ------------------------------------ */ [css code ] DiscussionWhat works for one person may not work for another. This setup from the solution is a recommendation based on a combination of experience and best practices that should work best for small- to medium-size web sites. For different projects and your own personal preference, you may find a way that works better for you. Visit your favorite web sites and review their style sheets to study how they're organized. See AlsoDoug Bowman's "CSS Organization Tip 1: Flags," a method for finding rules in your CSS files, at http://www.stopdesign.com/log/2005/05/03/css-tip-flags.html; Recipe 1.11 on how to organize style sheet files; and Recipe 11.7 on how to set up an intelligent hacking system. |