John Ferris
In school, I took a number of drawing courses as prerequisite to the Visual Communications program in which I eventually enrolled. At the beginning of each class, we would warm up the hand and mind with a series of gesture drawings—short 30-90 second sketches of a still life or occasional model whom, more often than not, I wished was a little less comfortable with their nudity.
My first attempts at gesture drawing often resulted in a composition of disproportionate detail in which I spent 25 seconds shading individual flower petals followed by a frantic 5 seconds of scribbling the lopsided outline of a vase before time expired. On a few occasions my professor, unsatisfied with my efforts, would sit me on the sidelines while he took a turn with my charcoal and pad. I would watch as he quickly layered large, sweeping strokes across the newsprint, getting progressively darker as the shapes began to emerge and realistic proportions were defined. He would quickly turn the charcoal on its side and block out shadows, which defined the subject's mass—giving his composition a depth mine sorely lacked. With the final seconds, he would turn the charcoal back on end, adding deliberate strokes, picking out details he deemed important to the viewer. Upon the ding of the timer, he would turn to me and, with a silent nod, place the charcoal back in my hand before moving on to the next student.
I was impressed with my professor's ability to capture the essence of the subject in such a hasty drawing. Upon close inspection, there was very little detail explicitly drawn on the page. However, the proportions were correct and lighting accurate to a point where the viewer will mentally fill in the details. The process was simple: build up a strong foundation of correct proportions; layer on areas of shadow; add sparing lines of detail. Always viewing the project as a whole.
This ended up being a valuable lesson for me. One I now apply to CSS on a daily basis. Taking a holistic approach to CSS leads to more reusable styles and deliberate specificity, which ultimately lead to more maintainable code.
When I first started developing stylesheets, I focused on details too early in the process. I would start at the top left of the page and work my way to the bottom right. The problem with this approach is it focuses on individual elements rather than how those elements fit into the overall front-end architecture. This leads to over-specifying selectors early which, in turn, leads to bloated, hard-to-maintain CSS. Just like Drawing 101, it's much better to start with a light foundation of styles, layering them on until the desired effect is reached.
From a CSS standpoint, start by defining general typographic rules and colors based on the site's branding for basic unclassed HTML tags—h1, p, table etc.. These are what are referred to as Base styles if you subscribe to the SMACSS method of developing stylesheets. With a solid foundation of base styles, new features added to the site, written with good semantic markup, will fit the overall look and feel. They will most likely need refinement, but shouldn't look out of place.
Once the base is in a pretty good place, start defining styles for a broader set of classes that you know will be reused throughout the site. In my case, these are usually elements like .article-title, .article-list, .field-label, .button, etc. Often these are classes automatically output by our content management system. At this point we're increasing the chances that new content and features added to the site will need no additional styling.
The process continues, adding classes for new components. You might have a component called .feature with sub-components, .feature-title and .feature-description. Continue building up layers of style by adding modified versions of components, such as .button--secondary and .article-list--condensed. All the while adding specificity through naming conventions and source order rather than selector specificity when possible. You are now well on your way to having a strong foundation of reusable styles with nice concise selectors.
From a maintainability standpoint, say the site goes into production or active development stops for a while. You or another developer, less familiar with the project, are tasked with styling a new feature. You have three good options, apply classes from the existing set of components, create a modified version of an existing component or create a whole new component. Never edit an existing CSS component that has been approved for production unless you plan on regression testing.
Always keep the entire site in mind as you develop CSS. Try not to get caught up in the details too early by building up a strong foundation of styles. You'll find that a little CSS can go a long way.
Photo used under Creative Commons license from GlennCam