Efficient CSS : Styling links for most of cases, avoiding over-rides

Question

I am often presented with the following problem:

I have markup which resembles the following:

<body>
  <div id="wrapper">
    <div id="header"><a href="/">home</a>
    </div>
    <div id="left-column">
      <ul>
        <li><a href="/1">one</a></li>
        <li><a href="/2">two</a></li>
      </ul>
    </div>
    <div id="main-content">
      <p><a href="#">some link</a> lorem ipsum</p>
    </div>
  </div>
</body>

Imagine this on a big scale, with many different navigation items, paragraphs and advanced stuff in general.

I'm trying to follow the OOCSS and Modular CSS principles, avoid location-based styling, but in many cases the CMS just is not flexible enough to add classes everywhere.

So in order to style all links in main-content with a border I end up doing :

a {border:1px solid #000;}

But then somehow all my links in the left-column end up with borders. Then I have to go and over-write:

#left-column a {border:0;}

And this is the beginning of chaos. For every change you do in a you have to go add reset styles to all 'exceptions'.

Then I attempt

#main-content a {border....}

But that's even worse. Why? Because the id is a powerful selector and will over-write links inside #main-content that normally should not have a border applied.

Any suggestions to do efficient link styling without resets? If CSS "Scope" is not yet a Release candidate module, which tools does CSS natively gives us to work out this problem? Would order of appearance of rules help for example?

to over-ride the specificity of the id, you could always use the body tag (if you are wanting to avoid using !important). eg: 'body #someId a' to over-ride '#someId a' — seemly, May 23 '13 at 15:58

score 2 · Answer 1 · answered May 23 '13 at 16:00

Many of your problems can be avoided/heavily negated by simply not using IDs, or at the very least not including them in your CSS selectors.

Writing effecient CSS is an obstacle you'll have to tackle for mostly every new project you do. There's no one definitive way of doing it. The larger the project, the more efficient OOCSS can be, but while it's often great practice, don't think too much into it.

There are many tools or methods to consider to write efficient, non-cumbersome CSS.

For starters, consider using child selectors rather than regular descendant selectors to select only direct children rather than all children. This often completely prevents old CSS from getting into newly added modules.

Secondly, and on the topic of anchor links, consider what kind of links you want to select. Do you want to select all anchor links, or just anchor links found in paragraph text? In which case you wouldn't need to write a global type selector (like a { border: 1px solid #000; }) since that'd also include other linked elements.

All your text links are in paragraphs, right? Then selecting anchor links which are children to paragraphs can often prove enough: p a { border: 1px solid #000; }. If it's still too global, restrict it to the main area using a the class name of a close parent in the selector as well.

score 1 · Answer 2 · edited May 23 '17 at 10:25

I tend to to use ids very little these days because of the specifity issues you are encountering. A class would adequately suffice in most cases. And if you are using ids for performance reasons then don't, because the real-world benefits are negligible.
In the code example above we also see names used that denote a very specific layout position. Instead use semantic names that describe the function/purpose of the element. Also try to make use of the new HTML5 elements. They give even more meaning to the markup and provide more hooks to style your page.

<body>
    <section class="wrapper">
        <header class="site-header"><a href="/">home</a> </header>
        <nav class="main-nav">
            <ul>
                <li><a href="/1">one</a></li>
                <li><a href="/2">two</a></li>
            </ul>
        </nav>
        <main>
            <p><a href="#" class="emphasis">some link</a> lorem ipsum</p>
        </main>
    </section>
</body>

One should build your styles from the bottom up: from basic -> towards more complex. What we see here is that the base tag styling contain more than just the base styles. This is to be avoided. Here below is a progressive approach which makes better use of the Cascade in CSS.

a {color:red; font-family:coolfont,arial;}
.emphasis {border:1px solid #000;} /* or */
main a {border:1px solid #000;}

Efficient CSS : Styling links for most of cases, avoiding over-rides

2 Answers2