[carnivroar]

I have two pieces of CSS code that accomplish the same thing. I am trying to understand what is the best, standard way of doing it. (Don't worry about the content/style, I'm just interested in the way I did the class/div stuff). My goal is to write reusable code so I could create multiple designs without touching the HTML.

Defines a button class:

HTML:

<div id="nav">
  <ul>
     <li><div class="button"><a href="index.html">home</a></div></li>
     <li><div class="button"><a href="resume.html">resume</a></div><li>
     <li><div class="button"><a href="projects.html">projects</a></div></li>
     <li><div class="button"><a href="about.html">about</a></div></li>
  </ul>
</div><!--end of nav-->

        CSS:

#nav ul { 
  padding: 2px 0px 0px 0px;
  margin: 0px;
}

#nav ul li { 
  display: inline;
  border-right: 1px solid rgba(100,100,100,0.2);
}  

#nav ul li:last-child {
  border-right: none;
}  

.button {
  display: inline;
}

.button a {
  font: 15px Sensation_Regular;
  padding: 2px 10px 2px 10px;
  color: rgba(253,238,225,0.7);
  -moz-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
  -moz-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.button:hover a{
  text-decoration: none;
  color: rgba(253,238,225,1);
  background: rgba(0,0,0,0.5);
}

Or define button inside #nav:

HTML:

<div id="nav">
  <ul>
    <li><a href="index.html">home</a></li>
    <li><a href="resume.html">resume</a></li>
    <li><a href="projects.html">projects</a></li>
    <li><a href="about.html">about</a></li>
  </ul>
</div><!--end of nav-->

        CSS:

#nav { 
  position: absolute;
  bottom: 0px;
  width: 780px;
  text-align: right;
  padding: 2px 0px 2px 0px;
  border: 10px solid rgba(0,0,0,0.1);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#nav ul { 
  margin: 0px 40px 0px 0px;
  font-size: 0px
}

#nav ul li { 
  display: inline;
  font: 15px Sensation_Regular, sans-serif;
  border-right: 1px solid rgba(100,100,100,0.2);
}  

#nav ul li:last-child {
  border-right: none;
}  

#nav ul li a{
  padding: 2px 10px 2px 10px;
  color: rgba(253,238,225,0.7);
  -moz-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
  -moz-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#nav ul li a:hover{
  text-decoration: none;
  color: rgba(253,238,225,1);
  background: rgba(0,0,0,0.5);
}

Thanks.

This post has been edited by carnivroar: 12 August 2012 - 11:15 PM

[adolf625]

I would define the button by itself, it allows it to be more modular and easier to make changes later on without breaking something else.

[AnalyticLunatic]

Just glancing over, it appears to me your second HTML/CSS would be more maintainable, but I give you credit for both. Seems like you've got a good hand on it.

[Lemur]

Second, hands down. Redundant or unnecessary code needs to be eliminated. Unless it's necessary, don't use it in html.

The goal of html is to be as streamlined as possible with no frills. This makes your job infinitely easier when you're trying to debug everything.

[carnivroar]

Lemur, on 13 August 2012 - 06:21 PM, said:

The goal of html is to be as streamlined as possible with no frills.

That's a good logical explanation. I would love to hear more opinions on this. Even though I already converted my site into the first one, it's not hard going back. I want to make a few completely different themes to add to my portfolio, but without having to modify the HTML.

[Lemur]

Consider your site a house for this metaphor of mine.

HTML's goal is to be a solid and clearly understandable structure. It needs to be sturdy, and bulletproof. The more random outcrops you have the easier it is to miss something and have various side-effects that manifest. Keep it clean, and simple, or it will have its vengeance come IE.

Likewise, CSS needs to be of the same.

Really, all design and dev needs to be absolutely clean. It will never really happen, but the closer you get the less problems you will end up having.

[carnivroar]

Lemur, on 13 August 2012 - 10:10 PM, said:

Consider your site a house for this metaphor of mine.

HTML's goal is to be a solid and clearly understandable structure. It needs to be sturdy, and bulletproof. The more random outcrops you have the easier it is to miss something and have various side-effects that manifest. Keep it clean, and simple, or it will have its vengeance come IE.

Likewise, CSS needs to be of the same.

Really, all design and dev needs to be absolutely clean. It will never really happen, but the closer you get the less problems you will end up having.

But say I want to use the same button for my footer. Or maybe in the future I'll have a sidebar or something. Then I'd have to rewrite the same exact thing for #footer a... #footer a:hover... #siderBar a... #sideBar a:hover, etc. No? This was what made me rethink my initial design (the second code).

[baavgai]

Second one, doubtless. However, to compare apples to apples, you should take the #nav markup out of the second.

Also, for those playing along at home, you'll want to add something like body { background-color: #000; }. Man, the color choices.

To play fair, you actually didn't need the divs in the first one.

<html>
<head>
	<title>CSS Testing</title>
	<style type="text/css">
		body { background-color: #000; }
		
		#nav ul { 
		  margin: 0px 40px 0px 0px;
		  font-size: 0px
		}
		
		#nav ul li { 
		  display: inline;
		  font: 15px Sensation_Regular, sans-serif;
		  border-right: 1px solid rgba(100,100,100,0.2);
		}  

		#nav ul li:last-child {
		  border-right: none;
		}  

		a.button {
		  padding: 2px 10px 2px 10px;
		  color: rgba(253,238,225,0.7);
		  -moz-border-top-left-radius: 5px;
		  border-top-left-radius: 5px;
		  -moz-border-bottom-right-radius: 5px;
		  border-bottom-right-radius: 5px;
		  -webkit-transition: all 0.3s ease-in-out;
		  -moz-transition: all 0.3s ease-in-out;
		  -o-transition: all 0.3s ease-in-out;
		  -ms-transition: all 0.3s ease-in-out;
		  transition: all 0.3s ease-in-out;
		}

		
		a.button:hover{
		  text-decoration: none;
		  color: rgba(253,238,225,1);
		  background: rgba(0,0,0,0.5);
		}

	</style>
</head>
<body>
<div id="nav">
  <ul>
    <li><a class="button" href="index.html">home</a></li>
    <li><a class="button" href="resume.html">resume</a></li>
    <li><a class="button" href="projects.html">projects</a></li>
    <li><a class="button" href="about.html">about</a></li>
  </ul>
</div>
</body>
</html>

Though, again, the second is best. The more you can separate style from content, the better you are.

carnivroar, on 14 August 2012 - 01:59 AM, said:

But say I want to use the same button for my footer. Or maybe in the future I'll have a sidebar or something. Then I'd have to rewrite the same exact thing for #footer a...

No, you just have to throw another entry at the top:

#nav ul li a, #footer a {

Cut and paste is always the worst case scenario.

[carnivroar]

baavgai, on 14 August 2012 - 04:53 AM, said:

Though, again, the second is best. The more you can separate style from content, the better you are.

carnivroar, on 14 August 2012 - 01:59 AM, said:

But say I want to use the same button for my footer. Or maybe in the future I'll have a sidebar or something. Then I'd have to rewrite the same exact thing for #footer a...

No, you just have to throw another entry at the top:

#nav ul li a, #footer a {

Cut and paste is always the worst case scenario.

Okay, that convinces me. And you are right, putting "button" on the HTML implies style.

Thanks for the explanation, I'll reconvert my site back today.