Am I subclassing my CSS correctly?
Solution 1
What you have there with the multi-classes will work fine assuming you want them to work like so:
<div class="button blue">
Will use .button and .button.blue
</div>
<div class="button">
Will only use .button
</div>
<div class="header blue">
Will use .header and .header.blue
</div>
<div class="header">
Will only use .header
</div>
<div class="blue">
Will use neither of the .blue declarations because it doesn't contain header or button.
</div>
Solution 2
A selector like .button.blue actually selects for an element with that has both "blue" and "button" as classes, not a class called .button.blue. See http://www.w3.org/TR/CSS21/selector.html#class-html.
You can use the .button.blue style rule you have listed, but you'll need to rearrange your HTML so that you have something like <button type="button" class="button blue"/>
. However, you don't really need to have a button class since it being a button (or <input type="submit">
, etc.) is enough to use in your selector. You could write a CSS rule that is simply button.blue, input[type=submit].blue{}
SkinnyG33k
Updated on June 07, 2022Comments
-
SkinnyG33k almost 2 years
I am making a set of buttons for my site, and I am in need of some professional insight.
In order to reduce CSS bloat, I want to subclass my buttons for different colors, ex .button.blue .
Will the following incur issues in the future? (assuming I don't make a class of just .blue) Do I have to use something like .button.button-blue instead?
.button { display:inline-block; padding: 9px 18px; margin: 20px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; text-align: center; background: #FFE150; } .button.blue { background: #49b8e7; border:1px solid #54abcf; border-bottom:1px solid #398fb4; color:#FFF text-shadow: 0 1px 0 rgba(255,255,255, 0.5); } .header{ height: 50px; } .header.blue { background: blue; color: #fff; }