Pete FreitagEngineering CSS
By Pete Freitag
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?
Engineering CSS was first published on March 25, 2005.
If you like reading about css, design, or software engineering then you might also like:
Discuss / Follow me on Twitter ↯
Tweet Follow @pfreitagComments
Then I define a CSS-P style sheet for the named divs to position them where I want, then I second style sheet to modify the look'n'feel, using cascades to make regular semantic markup look different in each of the CSS-P areas.
I deliberately try to keep it very simple so that it stands a better chance of working across multiple browsers.
*{margin:0; padding:0}
This prevents you to from repeating it 50 times in your page.
Then I style my tags like a, p, h1-h6, ul.
Then I style the css-P
Then my navigations
At this point you have your template.
Insert your content and it's almost complete. All you need to do is style the particulars of the content.
And if this gets too long I split it into:
main.css
layout.css
nav.css
By the way, I am a computer computer beginner !! I design but recently started to migrate my career through web application instead of visual-fx.
The purpose of this comment is to thanks for the generous description you have done of your design process. (Pete and Brandy)
I have make an entry to the research Database containing this thread and its comment. I will study a little more during the next project when CSS will show is head !
What you suggest about the CHAOS that happen with bad CSS naming convention is true... uhh that could be messy...:C
I was hypothetically elaborating here that CSS stylesheet must be created during the design process, not when it is almost at the end...
You make me think I was right Pete, thanks a lot for the Aura xhtml reference, that is also a good plus to what I found here.
regards,
thanks,
jgw
While I am comping out the design, I normally have layers in fireworks. A layer for the background (global nav items and background graphics) and then i have folders that contain "sections" or "page views" that I can turn on and off. I make sure that I am consistant in the color and size of similar elements.
So then I go into TopStyle and create my style sheet before I actually code the template.
I start by using common elements like H1, H2, P, UL etc and formating those to the look from the design comp.
Then once all the "styles" are in place that will fit any peice of content that is not unique, I go into my template .html file and I insert the dummy content using the correct tags. I also normally have a main div that will contain the content and I name it "container" or "content" and I give that any formating to center the page and give it padding.
Then I quickly insert any padding into me H2, P etc elements.
It's quick and easy and creates a system so I don't have to have a terrible amount of styles, and so that I don't have a mess of DIV's. I also like to use inheritence. So in the body class i set the font to verdana (I can overide it later if need be) and then I set the size and weight of the font in the H2, P, UL, etc..
Whats important to me is I have a system that is very easy to follow and allows for little frustration when entering real content into new pages.