Categories: css-tricks.com

CSS Rules vs. CSS Rulesets

The latest spec:

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:

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.

To Shared LinkPermalink on CSS-Tricks


CSS Rules vs. CSS Rulesets originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

hnikoloski

Share
Published by
hnikoloski

Recent Posts

Demystifying Screen Readers: Accessible Forms & Best Practices

This is the 3rd post in a small series we are doing on form accessibility.…

1 week ago

Managing User Focus with :focus-visible

This is going to be the 2nd post in a small series we are doing…

3 weeks ago

The Power of :has() in CSS

Hey all you wonderful developers out there! In this post we are going to explore…

4 weeks ago

Accessible Forms with Pseudo Classes

Hey all you wonderful developers out there! In this post, I am going to take…

1 month ago

Passkeys: What the Heck and Why?

These things called passkeys sure are making the rounds these days. They were a main attraction at W3C…

1 year ago

Some Cross-Browser DevTools Features You Might Not Know

I spend a lot of time in DevTools, and I’m sure you do too. Sometimes…

1 year ago