Making CSS rules for links in header more DRY

Question

I want to implement the cleanest amount of CSS through proper use of inheritance. All links need to be a shade of white, so lets say #fff

HTML

<div class="header">
  <div class="headerLogo">
    <a href="/">BruxZir</a>
  </div>
  <div class="headerMenu">
    <a href="#">&equiv;</a> <!-- other HTML and JS left out -->
  </div>
</div>

CSS

.header {
  background-color: #333;
  color: #fff;
  height: 36px;
  width: 100%;
  line-height: 36px;
}

/* should be replaced with image */
.headerLogo {
  display:inline;
  font-size: 24px;
  line-height: 36px;
  padding-left: 6px;
}
.headerLogo a{ 
  color:#fff;
  text-decoration:none;
}

.headerMenu{
  float:right;
  font-size: 36px;
  margin-right: 6px;
}

.headerMenu a {
  /* needs the same rules for color, font-size, no text-decoration */
}

Here is my Codepen

I am thinking that since many of these rules will apply to the rest of the links in the header, I can set this up somehow for better inheritance. Also wondering if I would be better served using <span>s instead of <div>s for the logo and the menu?

Answer 1

The worst aspect of your code is the markup, not the CSS. Unless you need the div as an actual styling hook, you can safely discard it. After all, you're not styling it in any meaningful way (what you do have can just as easily be applied to the descendant tags).

<div class="header">
    <a href="/" class="headerLogo">BruxZir</a>
    <a href="#" class="headerMenu">&equiv;</a> <!-- other HTML and JS left out -->
</div>

However, the inclusion of semantic tags might be a better way to go:

<header>
    <h1><a href="/" class="logo">BruxZir</a></h1>
    <nav>
        <a href="#" class="menu">&equiv;</a> <!-- other HTML and JS left out -->
    </nav>
</header>

Answer 2

KleinFreund is right.

if you want all the links the same throughout the header

.header a {
    color: #fff;
    text-decoration: none;
}

and if you want the links throughout the entire page to be the same color than you want something like this

a {
    color: #fff;
    text-decoration: none;
}

---

I assume that your Header Logo is going to be an Image or a Picture. If you want your Logo to link somewhere then you should use an image tag and then wrap it in an anchor tag

<a href="http://www.somelink.com">
  <img src="/somefolder/somecoolLogo.jpg" alt="Describing text"/>
</a>

The alt attribute is what most search engines use to find images. it's also pretty much mandatory, because it's used a lot for screen readers and stuff for people that can't see or can't see well. there are other attributes for image tags too.