Which way is best - re-using classes css question

HTML & CSS
1

Hi,
so for example if i have 5 divs on a page that i want the same shape/size etc except i want one to have a different background.

I could do A.

<div id="parent1"><div class="layout background"></div></div>

Where the layout contains the general structure and i simply add the background class to the divs that need it. this would keep the css cleaner but the page dirtier.

or B

<div id="parent"><div class="layout"></div></div>

and then specify

#parent .layout{background:red;}

which would keep my html tider but more in the stylesheet.

As i am writing it i am thinking B is the correct way of doing it but wonder what you think and if i have missed any other option.

thanks

2

Could you expand upon example B? How would the 5 divs play out in this example? Wouldn’t ALL divs in that example B get the background? Perhaps I’m missing something as to why example B is workable here. Example A is easy to imagine; i.e. below (which you could easily comebine all those parent classes into 1 parent.

<div id="parent1"><div class="layout background"></div></div>
<div id="parent2"><div class="layout"></div></div>
<div id="parent3"><div class="layout"></div></div>
<div id="parent4"><div class="layout"></div></div>
<div id="parent5"><div class="layout"></div></div>

I’d combine the parents (into #parent and have a separate background class (as done in example A). If you want it to be more specific to your example, then do #parent .layout.background{} which will target an element with both .layout and .background WHICH IS a CHILD of #parent.

3

yep sorry i didn’t expand the B example to show as you have that the parent divs would be different (as id’s should be).

So as in the your post it would either be A leave it as you have and add the background class where needed

Or B the same as your example but remove the background class and use the id of the parent to adjust the subsequent layout class.

interesting that you would add the additional class (A) to the html really thought i’d get - do less in the html and more in the css :slight_smile: Think i’ll go with A then. Thanks for the reply

4

This is my ideal setup. Your end goal might not be able to be achieved with this but this is how I’d go.

<div id="parent">
  <div class="layout background"></div>
  <div class="layout"></div>
  <div class="layout"></div>
  <div class="layout"></div>
  <div class="layout"></div>
</div>

If you wanted to target specifically the first/second/third/fourth/fifth/last (etc) then you could remove that background class but that’s probably not the case.

5

first remember that CSS cascades and allows for multiple selectors. So you could keep your classification system semantic. for example. Say you knew that your forms and footers and sidebar were pink , headlines would be in 200% bold text, and that the masthead and footer would be 50% wide and in bold text. you could arrange your code as follows:

.sidebar, footer, form { background: pink; }
.masthead, footer, h1,h2,h3,h4 {width:50%;  font-weight: bold;}
 h1,h2,h3,h4 {  font-size:200%;}

This cuts down on the need to assign multiple classes to your markup.

This is not to say that multiple classes are bad. in fact you could organize see if your rules often have comma groups of properties and then reorganize them that way. using those classes as needed on your markup. This is whats known as “opt-in” classes.

6

@Ryan : It really even looks like you wouldn’t need the layout class in that set up.

#parent>div{ the rules from .layout}
7

@dresden_phoenix In that example, sure. I just threw it on the first to make it easy. I do actually mention your point below…

All in all it depends on the dynamics of the page. We can only speculate. My quote above was referring to :first-child (whereas you do >), nth-child, and last-child.

8

I think this is the better way to go. The good article CSS Architecture will explain why.

9

thanks all that is really useful.
To explain fully what i am doing is best seen on the draft i am building http://test.goodbeachguide.co.uk/ (it’s still in really early stages so lots of things out of place).

I’m holding each ‘screen’ (don’t know the technical term but the page is split by big background images) in a class called ‘panel’ which holds everything in the correct place centrally on the screen. If you scroll down at the moment you’ll see the ‘screens’ each has a semi-transparent background of white, except the first one. This is the part that my question most relates to.

thanks

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.