My main bread and butter is commercial software designed to be installed on customer sites (with the host of environmental variations that may occur). One aspect is build websites that may be easily branded by the customers with the use of CSS.
One of the first steps is moving CSS to resource files so pages may be style in a culturally aware manner. Sentence length can be doubled or halved in different languages so layouts may need to change.
Once that step is done – then there’s the issue of how to factor the page for branding. Often folks go for a cheap solution – allow only a few things to be branded; I prefer to support comprehensive branding.
Often the page delivered by a developer may look like this:
The label content is filled from a resource file in the code behind.
Of course, the above is not really customizable by CSS – not a single class attribute to be seen!
So where do you go? You start normalizing the html using classes – but not a class for every item. You normalize the classes by exploiting items through naming a section, for example:
What you should go for as the end-HTML is:
- No Style attributes in the page
- No obsolete or UI modifying tags (<b>,<i>,<font> etc) in the page
- As few classes as possible.
Then for verification of the refactor, you need to enumerate out how you can specify each piece of text in a css file. For the above example we have:
- .username H3
- .username .row .rowlabel
- .username .row .rowinput
- .username .row .rowinput LABEL
- .username .row .rowinput INPUT
So, via CSS the customer can customize the look of each element. You do not have to supply all of these items, you may just define a few items in your shipping package like
- .username H3
The red items are universal. What is the result – well, the code in the page is actually much simpler (and easier to review) and yet your customer can customizes to a very fine level. The process of refactoring the pages is very much like database normalization. The outcome is a much nicer product code base.