I have a bachelors degree in Software Engineering, which is quite different from computer science, which most people assume was my degree. The main differences between Software Engineering, and computer science is that CS focused on theory, and software engineering focused on, well, engineering design, software design, and software architecture. I actually took lots of CS classes when I was in school as well, but in general I noticed that CS students tended to make spaghetti, preferred c to c++/java (procedural to object oriented). Our software engineering class (of 3 people), was in fact the first class in the country to graduate under an accredited software engineering program. We took pride in our software design skills, and we had a great professor Dr. Doug MacIntosh (no relation to the Mac OS).
As I think about my process of dealing with CSS stylesheets on projects, I would be embarrassed to show to Dougie Mac. The reason is, I have no process, and I am realizing as I modify CSS stylesheets that I should have one!
Typically my CSS stylesheet is generated as I code the presentation layer, I add things as I need them, and often name things very stupidly. When I want to reuse a style I find that the name I chose for the class does not make sense. I also want to keep an efficient CSS file that is small and easy to manage. I also find that sometimes there are certain pages that require a lot more CSS than others, on such pages it might make sense to put the CSS into another file.
What got me thinking on this topic was the Aura CSS template, which is:
Aura provides a well structured format for web documents and is easily adapted into content management and web publishing systems.
I think in most cases CSS can be abstracted to a common subset of entities, if you stick to these entities you can increase the reusability of your CSS style sheets.
So here is my plan for crafting engineered CSS stylesheets:
- Define CSS classes during design phase
- Identify views that will require more CSS than other views, and create separate CSS files for those pages during the design phase.
- Try to create abstract CSS classes that can be reused on the current site, and others.
For my goal of creating abstract CSS classes, I have found Mozilla's Markup Reference quite handy for defining a base set of css classes. Here's a quote from the markup reference document:
The purpose of this document is to define a rich vocabulary of semantic classes whose presentation can be specified in site-wide style sheetsenough to be able to write a long, involved, well-styled document without once writing a CSS rule. These classes take the place of the old presentation templates; the presentation is now defined in the site style sheets, allowing the markup to remain semantic. This simplifies the HTML coder's job, allows a greater flexibility in styling pages, and ensures consistent formatting conventions throughout the site.
What is your CSS design process?