CSS gone wild - how to stop a style from going too far

Is there any way in CSS to put a limit on how far something will cascade?

I'm running into a situation where my CSS is just going out of control because of how many classes I have to make, because of inheritence. For instance..

.menu a:hover {
   background : #XXXXXX;
}

<div class="menu">
   <a href="#">Hyperlink</a>
   <ul>
      <li><a href="#">Another Hyperlink</a></li>
   </ul>
</div>

Now, Another Hyperlink inherits the same style. Now I have two options... I can change my .menu implementation to this..

.menu > a:hover {
   // ...
}

Which makes only the top-level anchor elements effected. But this isn't always what I want. Usually, In a lot of cases, I end up having to write more specialized styles for deeper down in various hierarchies.

In this开发者_运维技巧 one instance, I know the solution, but what about more complicated scenarios? I've got a really bad case of "CSS Gone Wild". I have over 20 .css files now, and while they are well organized and planned out, it's just so much to handle. Is that normal? Do most huge websites have that many css styles to deal with?

Have you looked into Sass or Less? These are basically supersets of CSS syntax (so your existing css still works) that allow you to better organize your css code through mixins, variables, nesting, etc. They output plain css, but can often do a better job than you might by hand of having minimal amounts of duplication etc. It also results in much smaller source files.

As other have said, for highest efficiency, there are more factors than just amount of css. Number of http requests is one - there should be as few files as possible actually getting fetched, even if you just concat them as part of the build process. Also remember that not all CSS rules are created equal. Different selectors have different costs, and the more selectors you combine the less efficient it is. Efficiency-wise its better to have more rules that have more efficient selectors. Here are some good tips explaining efficiency of css selectors.

You seem to have a good handle on your css and html. You know the proper rules, are aware of being overly verbose and are making an effort to avoid using individual styles for everything.

At this point I would recommend just getting on with the site with no regard for how long your code is, just the quality. I'm sure in the end you will realize that it is not that much relative to the size of the site.

If you are switching between 20 different files it may be contributing to the feeling of being "out of control". You can always combine them into one file now (separated by obvious comment blocks) so that it is less overwhelming.

Is that normal? Do most huge websites have that many css styles to deal with?

If you look at most huge website (go to source code in your browser), you will see a couple (1 - 3) CSS files linked going up to a 1000 lines or more per file. But that's not such a big number for CSS. Important is to keep structure with subdivisions (via comments) like this:

/********************* sidebar **********************/

/********************* main content **********************/

Also, it helps if you take a look at your HTML. Often CSS gone wild goes hand in hand with a bit of HTML going wild. Try to do things simpler.

Short answer: no, there is no way in CSS to specify how far a style should cascade. As you've rightly shown you can assign a non-cascading style (one example is by using > to indicate a single level) but even this isn't particularly well supported. I myself never use it (but then I've never made a site that doesn't require IE6 support...)

I find one of the challenges of CSS is getting the right level of specificity with my declarations. You want as few as you can manage so I start with the very general and then start targeting as wide a field as possible. If you are doing that then there is not much more you can do. There are always examples (normally in my work it's a left hand navigation tree that drops down 8 levels each with their own colour and background image) where you are writing out way more than you'd like.

But you need to look at the positive - image if they were non-cascading styles!! :)