How to understand other people's CSS architectures?
- by John
I am reasonably good with CSS. However, when working with someone else's CSS, it's difficult for me to see the "bigger picture" in their architecture (but i have no problem when working with a CSS sheet I wrote myself). For example, I have no problems using Firebug to isolate and fix cross browser compatibility issues, or fixing a floating issue, or changing the height on a particular element. But if I'm asked to do something drastic such as, "I want the right sidebars of pages A, B, C and D to have a red border. I want the right side bars of pages E, F and G to have a blue border if and only if the user mouses over", then it takes me time a long time to map out all the CSS inheritance rules to see the "bigger picture".
For some reason, I don't encounter the same difficulty with backend code. After a quick debriefing of how a feature works, and a quick inspection of the controller and model code, I will feel comfortable with the architecture. I will think, "it's reasonable to assume that there will be an Employee class that inherits from the Person Class that's used by a Department controller". If I discover inconvenient details that aren't consistent with overall architectural style, I am confident that I can hammer things back in place.
With someone else's CSS work, it's much harder for me to see the "relationships" between different classes, and when and how the classes are used. When there are many inheritance rules, I feel overwhelmed.
I'm having trouble articulating my question and issues... All I want to know is, why is it so much harder for me to see the bigger picture in someone else's CSS architecture than compared to someone else's business logic layer?
**Does it have any thing to do with CSS being a relatively new technology, and there aren't many popular design patterns?
