CSS staggered - how to stop a style from being too long

Question

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

I am faced with a situation where my CSS just gets out of hand due to how many classes I have to do, due to inheritance. 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 { // ... } 

This only makes top-level snap elements. But this is not always what I want. Usually in many cases I have to write more specialized styles for a deeper search in different hierarchies.

In this one instance, I know the solution, but what about more complex scenarios? I have a very bad case of CSS Gone Wild. Now I have more than 20 .css files, and although they are well organized and planned, it’s easy enough to handle. This is normal? Most huge websites have many CSS styles to deal with?

Answer 1

Have you viewed Sass or Less ? This is basically supersets of CSS syntax (so your existing css still works), which allows you to better organize your css code through mixins, variables, nesting, etc. They output simple css, but often can do a better job than you could manually by minimizing the amount of duplication, etc. This also leads to significantly smaller source files.

As others have said, for maximum effectiveness, there are more factors than just the amount of css. The number of HTTP requests — one — should be as few as possible of the files actually received, even if you just concatenate 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 they are. Effectively, it is better to have more rules with more efficient selectors. Here are some helpful tips explaining the effectiveness of css selectors .

Answer 2

You seem to have a good handle on your css and html. You know the right rules, you know that they are too verbose, and make efforts to avoid using separate styles for everything.

At this point, I would recommend just continuing to work with the site, not considering how long your code is, just the quality . I am sure that in the end you will understand that this is not so much compared to the size of the site.

If you switch between 20 different files, it can make you out of control. You can always combine them into one file (separated by obvious comment blocks) so that it is less overwhelming.

Answer 3

This is normal? The biggest sites have many css styles to solve with?

If you look at the largest website (go to the source code in your browser), you will see a couple (1 - 3) CSS files associated with 1000 lines or more for each file. But this is not such a large amount for CSS. It is important to maintain the structure with units (through comments) as follows:

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

It also helps if you look at your HTML. Often CSS resigned, hand in hand with a bit of HTML. Try to make something easier.

Answer 4

Short answer: no, there is no way in CSS to indicate how far the style cascade should go. As you rightly showed, you can assign a non-cascading style (one example is with > to specify one level), but even this is not particularly well supported. I myself never use it (but then I never made a site that does not require IE6 support ...)

I find that one of the tasks of CSS is to get the right level of specificity with my ads. You want as little as possible, so I start with the most general, and then start targeting the widest field possible. If you do this, you can do much more. There are always examples (usually in my work this is a left navigation tree that falls into 8 levels with its own color and background image), where you write more than you want.

But you need to look at the positive image if they are not cascading styles! :)