I was trying to think of the name of a thing in the CSS vernacular the other day. It made me think we should have some kind of reference right here on CSS-Tricks, as a site with CSS in the title probably ought to have! So, here’s the basics.
Breaking that down…
- The whole thing is a ruleset.
- The curly braces and everything inside is a declaration block.
- The bit before the opening curly brace is a selector.
- Each key/value pair, as separated by a colon and ending in a semicolon, is a declaration.
- In those key/value pairs, the key is a property (or property name), and the value is a value (or property value).
Marco Biedermann once created this diagram out of HTML and CSS itself, which I think is exceedingly clever:
See the Pen CSS Terminology by Marco Biedermann (@marcobiedermann) on CodePen.
More
- Louis Lazaris: CSS Terms and Definitions
- Divya Manian: CSS Vocabulary
- MDN: Syntax
The “whole thing” is called ruleset, so why are declarations not called rules?
I would argue that what is called declaration block should be called the ruleset. A ruleset is being applied to a selector. Inside the ruleset are rules consisting of property and value.
Is the selector part of the ruleset?
Declarations are in fact called rules; they are a type of rule. There are other types of rules, too, such as at-rules (@import, etc.). So it’s valid, just a little less precise.
I’ve never heard the term “rule set” before. But CSS 2.1 used “rule set” and “rule” interchangeably:
More recent CSS specs standardize on the name “rule”.
A selector + declaration block is one type of CSS rule. Specifically, it is a “CSS Style Rule”. That’s to distinguish it from the other types of CSS rules, namely the
@rules. Both@rules and style rules implement theCSSRuleinterface in the DOM (technically, CSSOM).Does it really make a difference to your day-to-day coding? Not unless you’re using the CSSOM interfaces. But I think the main point of Chris’ post is that it helps to have a consistent terminology when you’re talking about a programming language. The words may be made-up and arbitrary, but it helps to know what they mean.
PS Chris: What about fleshing this out with other terms (like
@-rulesand so on) and adding it to the Almanac?It could be due to the fact that CSS declarations aren’t always strictly adhered to. That is, other declarations can override them, which would seem to undermine their nature as strict rules. They’re more like suggestions, with the most specific one taking precedence. By definition rules are always supposed to be followed.
At least, that’s my guess.
I always liked this one…
It seems like no matter how many times I look at these diagrams, I always seem to forget CSS terms when I’m talking with someone! Maybe a tattoo on my forearm is in order? #dedication
You can up a level as well to stylesheet and … stylesheets?
I was recently writing about @media, and wasn’t sure what to call it. An “@media rule”? I did a bit of searching, and found that it’s most commonly called an “@media directive”.