@Cobey, @Pete, @Gunnar: Good points (though I am not sure this technique is harmful, just nuanced). In my examples, you will see that I also use dashes to namespace. I wanted to mention it, but I felt it might be going too deep for this introduction.
For those that may not be familiar with “namespacing”: you should use a dash (or other valid character in class names) as a separator between values you want to match. That way, you can use that character as a hook to make sure you do not unintentionally match other elements.
For example:
[class*=name] would match .name and .class-name, but [class*=-name] would only match .class-name
I shy away from using ^= and $= as they specify that the class MUST be at the beginning or the end, which you may not always have control over. Namespacing your classes seems more versatile.
The article I link to from Eric Meyer does a great job of explaining more about these nuances.
Nathan Ford
@Cobey, @Pete, @Gunnar: Good points (though I am not sure this technique is harmful, just nuanced). In my examples, you will see that I also use dashes to namespace. I wanted to mention it, but I felt it might be going too deep for this introduction.
For those that may not be familiar with “namespacing”: you should use a dash (or other valid character in class names) as a separator between values you want to match. That way, you can use that character as a hook to make sure you do not unintentionally match other elements.
For example:
[class*=name] would match .name and .class-name, but [class*=-name] would only match .class-name
I shy away from using ^= and $= as they specify that the class MUST be at the beginning or the end, which you may not always have control over. Namespacing your classes seems more versatile.
The article I link to from Eric Meyer does a great job of explaining more about these nuances.