8 Replies - 378 Views - Last Post: 14 August 2012 - 11:28 AM

#1 carnivroar  Icon User is offline

  • D.I.C Regular

Reputation: 28
  • View blog
  • Posts: 382
  • Joined: 18-September 11

Which CSS is better?

Posted 12 August 2012 - 11:12 PM

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


Is This A Good Question/Topic? 0
  • +

Replies To: Which CSS is better?

#2 adolf625  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 21
  • View blog
  • Posts: 161
  • Joined: 22-November 08

Re: Which CSS is better?

Posted 13 August 2012 - 12:46 PM

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.
Was This Post Helpful? 0
  • +
  • -

#3 AnalyticLunatic  Icon User is offline

  • D.I.C Lover

Reputation: 221
  • View blog
  • Posts: 1,030
  • Joined: 25-June 12

Re: Which CSS is better?

Posted 13 August 2012 - 01:51 PM

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.
Was This Post Helpful? 0
  • +
  • -

#4 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1359
  • View blog
  • Posts: 3,425
  • Joined: 28-November 09

Re: Which CSS is better?

Posted 13 August 2012 - 06:21 PM

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.
Was This Post Helpful? 1
  • +
  • -

#5 carnivroar  Icon User is offline

  • D.I.C Regular

Reputation: 28
  • View blog
  • Posts: 382
  • Joined: 18-September 11

Re: Which CSS is better?

Posted 13 August 2012 - 06:33 PM

View PostLemur, 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.
Was This Post Helpful? 0
  • +
  • -

#6 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1359
  • View blog
  • Posts: 3,425
  • Joined: 28-November 09

Re: Which CSS is better?

Posted 13 August 2012 - 10:10 PM

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.
Was This Post Helpful? 0
  • +
  • -

#7 carnivroar  Icon User is offline

  • D.I.C Regular

Reputation: 28
  • View blog
  • Posts: 382
  • Joined: 18-September 11

Re: Which CSS is better?

Posted 13 August 2012 - 10:59 PM

View PostLemur, 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).
Was This Post Helpful? 0
  • +
  • -

#8 baavgai  Icon User is offline

  • Dreaming Coder
  • member icon

Reputation: 5800
  • View blog
  • Posts: 12,635
  • Joined: 16-October 07

Re: Which CSS is better?

Posted 14 August 2012 - 04:53 AM

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.

View Postcarnivroar, 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.
Was This Post Helpful? 1
  • +
  • -

#9 carnivroar  Icon User is offline

  • D.I.C Regular

Reputation: 28
  • View blog
  • Posts: 382
  • Joined: 18-September 11

Re: Which CSS is better?

Posted 14 August 2012 - 11:28 AM

View Postbaavgai, 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.

View Postcarnivroar, 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.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1