CSS Rules vs. CSS Rulesets | CSS-Tricks - CSS-Tricks
source link: https://css-tricks.com/css-rules-vs-css-rulesets/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
CSS Rules vs. CSS Rulesets
DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.
A style rule is a qualified rule that associates a selector list with a list of property declarations and possibly a list of nested rules. They are also called rule sets in CSS2.
As the above quote from W3C indicates, it seems like the W3C considers “rule set” to be a bit of an outdated term, preferring the term “style rule” (or possibly “rule” for short).
I never noticed that! “Rule set” is so gosh darned branded on my brain that it’s gonan take losing a lot of muscle memory to start using “style rule” instead. I didn’t see a specific note in the spec’s Changes section, but you can see the change in the table of contents between versions:
Louis nicely sums up the parts of a style rule as well:
/* Everything below is a style rule (or rule set, or just rule) */
section { /* Everything between the braces is a declaration block */
margin: 0 20px; /* This line is an individual declaration */
color: #888; /* Another declaration */
}
I know nothing of the context and, at first, I was gonna poo-poo the change, but “style rule” really makes sense the more I sit with it. If the property:value pairs are declarations that sit in a declaration block, then we’ve got something less like a set of rules and more like one rule that defines the styles for a selector with a block of style declarations. 👌
Once again, naming things is hard.
Leave a Reply Cancel reply
Comment
Name
Website
Save my name, email, and website in this browser for the next time I comment.
Get the CSS-Tricks newsletter
How to Get All Custom Properties on a Page in JavaScript
We can use JavaScript to get the value of a CSS custom property. Robin wrote up a detailed explanation about this in Get a CSS Custom Property Value with JavaScript. To review, let’s say we’ve declared a single custom property on the HTML element: html { --color-accent: #00eb9b; }…
June 8, 2020Chapter 8: CSS
In June of 2006, web developers and designers from around the world came to London for the second annual @media conference. The first had been a huge success, and @media 2006 had even more promise. Its speaker lineup was pulled from some of the most exciting and energetic voices in…
May 3, 2021Chapter 7: Standards
It was the year 1994 that the web came out of the shadow of academia and onto the everyone’s screens. In particular, it was the second half of the second week of December 1994 that capped off the year with three eventful days. Members of the World Wide Web Consortium…
March 11, 2021Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK