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


Tags: css

Problem :

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?



Solution :

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.


    CSS Howto..

    How to reset CSS3 *-transform: translate(…)?

    How do I create triangle shaped vertical breadcrumbs

    Best Practice (jQuery, CSS): How to initialize hidden elements that will toggle visible?

    How to force divs into the same row when using Blueprint CSS

    How is this font face in CSS3 embedded into a css file?

    How to overwrite css animation

    How to prevent Ajax overflow/server crash? (Arduino/ESP8266 Environment)

    How to make a 2x2 grid of Div's in CSS?

    How to make TD behaving like TR(row) with CSS?

    How to add a css to a view in the Controler?

    how to make NGINX serve static content like .js, .css, .html?

    How to achieve pages like a math notebook in css?

    CSS - how to set up header images as use eg. Facebook?

    How to style radio button or checkbox inside a bootstrap table?

    How to Center-Justify links in CSS?

    How to have choices that change the background of a site

    How can I add text to a jQuery slider control?

    How to apply css for min-width and print?

    CSS Clouds - How to adjust to inner content?

    How to override element.style height

    CSS + Show Animated GIF while Loads

    How to make a child div alone responsive using css?

    How to modify the layout of jQuery UI autocomplete combobox

    How to improve the rendering of my HTML/CSS button?

    How to hide text using CSS?

    How to add multiple CSS elements to a div using jQuery?

    CSS - How to use by ID and by class

    How to position the scaled elements (jQuery, css)

    How to display a custom css animation with jquery and fall back to just show() if not supported?

    How to achieve chamfered CSS Border Corners rather than rounded corners?