By creating very non specific classes and giving standard styling to elements, it was relatively simple to move specificity from the declarations to the stylesheet layout. Now, I realise that many people don't work in an environment where, to some extent, they can ride roughshod over the designs. The changes I made to the designs had (to my eye) a negligible effect on the overall look, but I would be interested to see what happens in a company where designs are signed off and set in stone.
I separated the style sheet into 3 sections, the first being the most basic styles, the ones destined to be over written. The rounded corner classes are an example, because the border colour would be over written. I decided not to put any padding or margins in these declarations, just incase I wanted to use them vanilla, over writing padding to reset it to zero seemed like a poor move.
The second section of the css was for extensions such as colour schemes and list styling. I also put those sections of the site which require specific styling in here. Stubbornella warns against styling id's, which I think is excellent general advice and aligns with the general zeitgeist of non specific declarations. However, I did use id's in areas that I knew were one of a kind styling issues as it removes the possibility of unwanted clashing of styles and is faster at render time.
The final section was kept for very simple helper classes that were meant to over write all other styles. These classes were generally single declarations used as extensions. For example, I had a styled list which created a toolbar of image icons. These were usually floated to the top right of their parent element, but in a particular case it was more appropriate to have them floated to the left. The single declaration float left class was added to the list and voila.
No comments:
Post a Comment