Defining styles based on context [closed] - css

Question

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I understand the basic concept of contextual styling and why you would want to define styles based upon parents and siblings. But in some instances it seems like this simply adds additional css which I hate having to write unless necessary. Take this for example. Say I have a red button on my site that I define as:
.button.red{
background-color: #ff0000;
color: #fff;
}
Hence, I can place the following code anywhere:
<button class="button red">submit</button>
But I've heard that it is best practice remove a "red" or "green" style from your html and use contextual styling. But this would lead to a ton of additional css to write each red or green button based on it's parent. Can anybody shed some light on why you want to do this or is this not necessarily best practice.

Answer 1

Okay, I think there's something that needs to be cleared up first, and that's semantic styling. What you're doing here is just applying a static style to a button, which is fine, but the name you've given it is very specific. You're saying that some buttons will be red, and naming them as such.
But further down the line, what if you decide that type of button should be blue? Or green? What you should do instead is use a class name which explains why you're styling this button. Think of it in terms of, it's not that all of your red buttons are primary actions, it's that your primary action buttons are red. So to steal from Bootstrap's terminology, you wouldn't give that the classes of "button red" but rather the classes of "button primary" or "button error"--something to illustrate the meaning of what you're actually trying to accomplish.
This has later benefits as well, letting you do things such as declare that "all primary buttons within a popup container will be green"
.popup .button.primary {}
This sort of separation makes things look much nicer in your code and lets you start general and become more specific with your rules as your needs become more specific, which is helpful from both a programmatic and a stylistic standpoint.

Answer 2

The rationale for this guide line is that there must be some reason why you want your button to be red, or why you want your paragraph indented, or why your list should be spaced out.
The HTML simply reads so much better when the text in the class attribute say what the fragment of HTML is describing. The idea of separation of concerns, a very well accepted practice dictates that
HTML should contain structural information only
CSS should contain presentational information only
Scripts should contain interactive information only
HTML with colors violates this practice.
In practice, there is probably no reason why your CSS should blow up in size. You can always say
button.warning, p.notice, ul.stop {
color: red
}