Organization/Standards Question re: Multiple Class Selectors


#1

https://www.codecademy.com/courses/learn-html-css/lessons/ids-classes-divs/exercises/multiple-selectors?action=lesson_resume&link_content_target=interstitial_lesson

This lesson teaches using multiple class selectors. In the lesson, we delete a shared property between two classes and merge them into a CSS rule using multiple classes. So that:

.partner {
  padding: 20px;
  margin: 0 auto;
  border-bottom: 1px solid #EEE;
  text-align: center;
}

.prop {
  border: 1px solid #FFF;
  padding: 40px 0px;
  margin: 5px 0px;
  text-align: center;
}

Becomes:

.partner {
  padding: 20px;
  margin: 0 auto;
  border-bottom: 1px solid #EEE;
}

.prop {
  border: 1px solid #FFF;
  padding: 40px 0px;
  margin: 5px 0px;
}

.prop, .partner {
  text-align: center;
}

To me, the final result seems to be less organized than the original; all of the sudden, you have three CSS rules instead of two, despite the fact that the two rule option contains duplicate properties…

I am wondering what is the benefit, if any, to using multiple class selectors in this case? Do browsers load multiple elements from different CSS rules more slowly-- meaning the second code would parse (I think I’m using parse correctly?) faster than the first? Is it standard in CSS coding to merge as many shared properties into one rule as possible, even if it creates additional CSS rules?

Thank you for the insight!


#2

In this specific case, we are combining like CSS

The approach of combining like CSS declarations to eliminate redundancy. That’s a principle of DRY (Don’t Repeat Yourself).

DRY gives us reusable and more maintainable code. Many times, it gives us less code that is more optimized.

While the given example appears to create more code, think it when you need to make a change. Both elements want their text centered. If you had them as separate CSS declarations, then you’d have to make the change in 2 places…instead of 1. You have to remember to manually change it in multiple places.

Why is that an important point? Think about it. It takes more of your time to make the change and you have to remember to change it in both places. That increases your time and makes it more prone to errors (in case you forget to change it in the other spot).

If we added more like styles, it becomes even more clear, as the code continues to grow.

What do you think? Does that make sense to you?


#3

This does make sense, thank you. I can imagine in more complex code how having to go back and change many different areas would be time consuming and prone to errors.

I guess, at the level I’m at now, the idea that I’d be applying the same styles to multiple elements didn’t really seem very common. But I can see how that might change later down the road.

In this case, is it common to group the multiple class selectors right after or before the individual styles for each element? Or do you just kind of throw it in wherever?


#4

CSS is cascading. You want to organize our code to group like styles but also remember that the order is important.

Organizing your code helps you find sections of styles to speed up your development.


#5

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