4
\$\begingroup\$

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?

\$\endgroup\$
  • 2
    \$\begingroup\$ Using div's there is just fine. Why not .header a { color: #fff; }? \$\endgroup\$ – kleinfreund Jan 23 '14 at 19:47
7
\$\begingroup\$

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>
\$\endgroup\$
  • 2
    \$\begingroup\$ I often see the <h1> added to wrap the logo. But I don't agree that it is the "best" way to go, mostly because of SEO reasons (in my case this text will be replaced with an image) and that fact that it is a block element. \$\endgroup\$ – JGallardo Jan 23 '14 at 21:11
  • 1
    \$\begingroup\$ If the title of the site is "BruxZir", then any tag other than h1 is superfluous. Markup should not be chosen based on SEO or what it looks like, it should be chosen based on the type of content in question. \$\endgroup\$ – cimmanon Jan 23 '14 at 21:47
  • \$\begingroup\$ @JGallardo, if your Logo is an Image, than you should use an Image Tag for it. <img> with all the nice Bells and Whistles (Attributes) that it comes with, that is how you work the Optimization on a Logo. \$\endgroup\$ – Malachi Jan 23 '14 at 22:16
  • \$\begingroup\$ @JGallardo Cimmanon makes a good point here. if you build a good site with good structure, following all the standards, then your site will also be good for SEO. on the other hand if you try to build a Site strictly to maximize SEO it will look crappy to a human and will most likely be scored badly by Google. you need a happy medium. I would try to make the content of your page worth reading, then you will get more people reading it and sharing it, that is what google looks for, content that is relevant. \$\endgroup\$ – Malachi Jan 27 '14 at 14:18
4
\$\begingroup\$

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.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.