Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Techniques Display Modes Block vs. Inline Elements

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Posted by Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Why use so many rules for the same selector?

I was going through the block vs inline video in the CSS layouts Deep dive and I noticed that Guil tended to use many CSS rules for the same selectors or groups of selectors.

I was just wondering if this was really neccessary as I was finding harder to keep up with the video when the same selectors were being used to create CSS rules, would it have made any difference to the way way the CSS worked to put the properties and the values in just one of each?

I don't have code examples as there's no codepen or workspace for the example I'm talking about but hopefully if you remember the video you'll know what I mean :)

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

Jonathan, could you post a small example of what you mean?

Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

are you talking about instead of using 

h1 {
color: red;
background-color: green;
font-size: 12px;
float: left;
}

using something like?

h1 {  color: red; }

h1 {  background-color: red; }

h1 {  font-size: 12px; }

h1 { float: left; }
Jeff Busch
Jeff Busch
19,287 Points

Hi Jonathan,

To the right of the video sreen is a link to the Project Files. For your convenience I've added the link: Project Files. If you need help posting the code look below and click on Markdown Ckeatsheet. You caan also look at the example here: How to display code at Treehouse.

Jeff

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Stone Preston , it's more like a group of selectors, these are all class selectors, put together to accomplish a single task. But for me it's cleaner to use as little selectors as possible and as many properties as you can in the same rule.

From memory, in the video you had ules like

.header-top,
.content-main {

rule and styles

}

.content-main {
}
.header-top {
}

.header-top li {
}

I'm sorry I can't be more clearer than that, without going into the video for a third tme but it's something like this. Would it make any difference to the technique in the video to my way?

3 Answers

Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

well for instance if you used 

.header-top,
.content-main {

rule and styles

}

then that would apply the same styles to all of those selectors.

if you used 

.content-main {
some rule and styles

}
.header-top {
a different rule and styles

}

.header-top li {
another different rule and styles

}

you could apply different styles to each of those selectors. With the first way you cant customize it for each selector althought you would use it if you had some styles you wanted applied to multiple selectors.

federicococheofiletti
federicococheofiletti
5,289 Points
federicococheofiletti
federicococheofiletti
5,289 Points

I've understand what you're saying Jonathan. I think it's just a matter of workflows. I usually prefer to put all the property of a given selector in the same declaration block. Some may split it in logical group: blocks with only positioning properties followed by blocks with only color property etc..

Anyway this should make no difference as long as you pay attention to the cascading nature of CSS.

I hope i've been clear enough. Not only i'm learning HTML and CSS but also english. So i suppose to sound a little weird from time to time :)

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points 
.main-header {
    padding: 20px;
    white-space: nowrap;
}
.main-logo,
.main-nav,
.main-nav li {
    display: inline;
}
.main-logo,
.main-nav li {
    padding: 10px 20px;
    border-radius: 5px;
}
.main-nav li {
    margin-right: 10px;
}
.main-logo {
    margin-right: 50px;
    width: 200px;
    margin-top: 50px;
}

.main-logo a, 
.main-nav a {
    color: white;
    text-decoration: none;
}

Thanks Jeff, I must have completely missed the project files link, i normally know where to look for them but usually only expect videos to download.

So this is the code that I'm looking at. There are many combinations of the same selectors used here. Is there not a way we could make this code cleaner by achieving the same effects we want but toning down on lines of code?

Thanks again.

Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

it depends. for instance here we select multiple classes and apply a style:

.main-logo,
.main-nav,
.main-nav li {
    display: inline;
}

and here we select one class with a child element and apply a style

.main-nav li {
    margin-right: 10px;
}

if you wanted to do what you are talking about and combine those 2 different selectors and rules into one selector and rules like this:

.main-logo,
.main-nav,
.main-nav li {
    display: inline;
   margin-right: 10px;
}

that would give ALL those classes a margin-right of 10px, but you only want right margin of 10 px on that li with a class of main nav. see where you could run into problems? Although you are right that its cleaner code, sometimes you need to be more specific with your selectors in order to make it function correctly.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

So it's about maximising specificity, and to do that you have to make sacrifices on the code you write?

You could have one selector of everything but if you make have another selector with a descendent or sibling element it becomes it's own selector?

Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

"So it's about maximising specificity, and to do that you have to make sacrifices on the code you write?"

Not necessarily. if you only want a rule applied to a specific element, you are going to have to be specific in your selection. Less code does not always mean its the best code (especially if it doesnt work the way you want it to). I dont think having to add another selector is a sacrifice really.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Fair dos. Think I'll just have to follow the video better then. I think maybe I'm seeing a "DRY" issue when maybe there isn't one. I still can'thelp but think maybe there's another way to do this example but again, maybe I'm just overthinking it. Thanks for putting up with me on this thread

Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

there may be and probably is another more concise way of organizing your css selectors and rules to the minimum amount of code. However doing that seems sort of like going on a hunt for the "holy grail" of CSS stylesheets and probably isnt worth the time.