How to understand other people's CSS architectures?

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?


I'd say that generally speaking, there is no "architecture" to the way most devs write CSS (at least in my experience). Most people build CSS incrementally as rules are needed -- it's usually not planned out in advance like code architecture is. Often people group related rules with comment blocks, or maybe in separate stylesheets, but really there are not many established patterns to follow.

Your best bet is to use a good CSS editor that allows you to visually browse the hierarchy of rules defined in your sheets.


I think a lot of times people just hack the css together without a concept of the overall picture. A lot of times they just add things on as they are laying things out with little regard to any "conventions" they established that aren't directly fresh in their mind leading to all kinds of naming redundancies and discrepancies.

I don't think that its so much that CSS is new as it is that CSS is often the realm of the designers and often times they dont think architecturally when designing something - everything is somewhat adhoc.

I know when I'm a lead i establish a formal set of conventions for class naming and organization as one of the first things i do and then hammer it in to the front end underlings :-)


First of all, it's harder to read code that it is to write code.

Secondly I would say since CSS allows for loose structure, then people will set it up in a complicated manner, so I would say that it is the nature of the beast.

链接地址: http://www.djcxy.com/p/45904.html

上一篇: Git子模块或叉子

下一篇: 如何理解其他人的CSS架构?