If you don’t plan, you plan to fail.
Developers all know the importance of Data Normalisation and its a key planning activity to ensure data integrity, optimal data warehousing by reducing data redundancy, ease of extending database structure, etc. I really feel web designers need to understand the spirit behind normalisation when planning their designs as well.
A website have many elements, from headers to footers, navigation to utility bars, from page wrappers to content containers. And from within the content container itself there are loads of normal HTML elements such as headings, paragraphs, tabular content, lists, forms, quotes, indents and the list goes on.
So just understanding and using CSS is not enough as a large site needs alot more planning. I feel that having a planning session to determine what ID and CLASS to assign to elements is extremely important. Also keeping in mind that using Content Management Systems mean webmasters (your clients) are most likely going to use something like CKEditor or TinyMCE as their WYSIWYG editor which by default uses the basic HTML tags.
So planing for CSS Styles is actually a CSS Normalisation process in my view. Data Normalisation is about “data relationships” and for CSS its about “cascading styles“. Styles are related by inheritance and these inheritance are the relationship.
Data Normalisation Objectives according to databasedev.co.uk:
- Arranging data into logical groups such that each group describes a small part of the whole
- Minimizing the amount of duplicated data stored in a database
- Building a database in which you can access and manipulate the data quickly and efficiently without compromising the integrity of the data storage
- Organising the data such that, when you modify it, you make the changes in only one place
So let me try to translate these objectives into CSS Normalisation objectives.
CSS Normalisation Objectives
- Arranging CSS Styles into logical groups such that each group describes a small part of the whole
- Minimizing the amount of duplicated CSS Styles stored in the CSS file(s)
- Building the CSS file(s) in which you can access and edit the CSS Styles quickly and efficiently without compromising the integrity of the whole website
- Organising the CSS Styles such that, when you modify it, you make the changes in only one place
Agree? Disagree? Do share your views.
ps: If only someone can do up a simple diagram like Natalie Josy’s Standards in a nutshell to visually explain this CSS Normalisation concept, i’ll definitely stick it to this post.
Hey nick! OpenID another web standard you can look at if you haven’t. see: http://it.euphoriatwentythree.com/web-development/openid/get-your-own-free-domain-name/
You should look at the work the Erskine boys have done their ‘ultimate package’.
http://erskinelabs.com/post/the-process-toolbox-part-seven-convention/
I’ve got something similar I use (and I also piggybacked their basic CSS structure).
I’ve also been using HTML5-esque classes and ids to structure the templates I’ve been building, I find that any standardisation I can do makes things quicker…
I personally am annoyed with the misuse of CLASS and ID (when to use which)
To sum up: use ID for single instance, and use CLASS for multiple instances – that’s it.
No complicated theories, no complex logic, to start with.
And to add onto what you mentioned, not only you need PLANNING before starting a project, you also need THINKING throughout the development phase.