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

Posted by Sarah Thomas
Sarah Thomas
4,190 Points

CSS: best practice for selectors with redundant rules?

What is the best practice for grouping CSS selectors if they have very similar declarations?

For example, if I have 2 classes that have all of the same rules except one, which option below is best practice for speed/efficiency/etc?

OPTION 1: separate declarations for each selector:

.class1 {
     property1: x;
     property2: y;
     property3: z;
}

.class2 {
     property1: a;
     property2: y;
     property3: z;
}

OPTION 2: group common declarations:

.class1, 
.class2 {
     property2: y;
     property3: z;
}

.class1 {
     property1: x;
}

.class2 {
     property1: a;
}

Thanks!

Mark Pryce
Mark Pryce
8,804 Points

Good question, I'm curious as to the right answer too.

My gut instinct would be to use group 2 simply so I don't have to retype the same declarations, making documents smaller?

Looking forward to a more seasoned answer though :)

Kai Nightmode
Kai Nightmode
37,045 Points

I also like option 2. With properties only specified once, updates will be a breeze. Nice DRY code. :)

1 Answer

Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

Hi Sarah,

The answer here is going to be dependant on how the classes are related. If they belong to two completely different elements, say a button and a logo, then I might keep them separate. However, if they were both related to buttons and the only difference was the button colour, then I'd probably go with option two. Writing CSS that makes sense in this case, for me at least, would be better so it's not only easier to update in the future, but also more logical for other people reading and/or trying to debug your code. :)

Sarah Thomas
Sarah Thomas
4,190 Points

That makes sense, thank you Ryan!