This exercise talks about making our CSS more flexible. What does this mean and how can we accomplish this?


#1

Question

This exercise talks about making our CSS more flexible. What does this mean and how can we accomplish this?

Answer

Within this context, flexible style sheets are ones that are relatively easy to maintain and can be modified without unexpectedly breaking other parts of your code. Aside from avoiding the important! keyword in most situations, another big step we can take towards keeping our style sheets flexible is to keep our selector specificity as low as possible. This helps developers to avoid tricky “specificity wars” down the line and allows them to more readily override styles when necessary.

Check out the articles below in this thread for some strategies you can use to keep your specificity low.


FAQ: Learn CSS Selectors Visual Rules - CSS Setup Selectors - Important
#2

Hi where is the article link specified in the answer? I am unable to see it.


#3

I’m also not seeing the link, and I’ve noticed this same issue in other discussions that are linked to from the lessons. I’m using Chrome; is this potentially a browser issue?


#4

I see the same issue in Safari, so I think it’s just that the text hasn’t been edited to include the link in these instances. I think I’ll flag the article and note that it’s missing the link, and do that in the future as well.


#5

Please do flag others like this! This (topics the Discuss and Guide sections in the forums linked directly to the learning environment exercise-by-exercise) is a community-built wiki feature in beta. We have some content to seed things, but we really rely on contributions from learners like you to not only build the wiki but maintain it. If you don’t see a link suggested, for example, we’d love to hear suggestions from the community!

In terms of hacks or tricks on keeping specificity low, I’ve seen this one do the rounds

In terms of articles giving some more depth and context, I found this one most helpful myself:

The latter is a big guide, I’m not sure you’d need to read it all (and definitely not at this stage of the course), but the section on specificity is informative without being verbose, and gets a little more into the theory and the “why” of it all.


#6

Thanks! Yeah, it’s probably over my head for now, but I’ll go back and read through that when I know a little bit more of what I’m doing. :stuck_out_tongue:


#7

Hey @themorningline, please flag such FAQs when you see them!


#8

Hi there, I have a question regarding !important and multiple selector. Under the style sheet, I have h5 {
color: rebeccapurple !important;
} AND .description h5 {
color: teal;
}. In this instance, I know that the rule with ! important overrides the latter .description h5 rule. My question is, what’s the different between adding a comma between the selectors as follow: .description , h5 versus omitting the comma?

Because when I added the comma (due to having multiple selectors), the .description, h5 rule overrides !important. Where the text is now teal instead of purple. Is this supposed to happen?

Thanks.