1

CSS Rules vs. CSS Rulesets | CSS-Tricks - CSS-Tricks

 1 year ago
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

Geoff Graham on Sep 21, 2022

DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.

The latest spec:

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.

Louis Lazaris:

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:

Side-by-side screenshot comparing the table of contents for both the CSS 2 and CSS 3 specifications.

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.

Direct Link →

DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.

Leave a Reply Cancel reply

Comment

Name

Email

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-props-featured.png?fit=1200%2C600&ssl=1&resize=350%2C200

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, 2020
css-sparkle-1.png?fit=1200%2C600&ssl=1&resize=350%2C200

Chapter 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, 2021
first-web-conference.jpg?fit=800%2C549&ssl=1&resize=350%2C200

Chapter 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, 2021

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK