Home/ Questions/Q 3614872
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T22:18:12+00:00

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

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0