CodeinWP CodeinWP

CSS Rules vs. CSS Rulesets

Over the last 10 years or so I’ve done a ton of technical editing work. I’ve helped with CSS articles and CSS books for various online and print publications. One of the things that comes up often when I make suggestions is the difference between a CSS rule and a CSS ruleset.

In most cases, almost all authors use the term “CSS rules” to refer to the blocks of CSS that include the selector and the CSS declarations. Is this correct?

Way back in 2010, I wrote a full article on defining CSS terms, which I still stand by today. But I’ve updated the “CSS rulesets” portion of that article, which I thought I would explain in more detail here.

According to W3C’s latest document on CSS syntax:

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.

So it is technically correct to refer to these chunks of CSS as “style rules”, “rules”, or “rule sets”. Interestingly, the spec uses “rule sets” (two words) whereas MDN uses “rulesets” (one word). MDN also uses “rule” as an acceptable synonym, but doesn’t seem to mention anything on “style rules”. Maybe that needs a refresh.

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 know some authors in the past have referred to individual lines of CSS as CSS rules, but that’s not correct. The individual lines are called declarations and the entire group of lines inside the curly braces are called a declaration block. The code below, with comments, demonstrates this:

/* 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 */
}

Understanding these terms isn’t crucial to writing CSS code. But I think it’s important when it comes to writing articles, tutorials, and books about the topic.

In summary:

  • Style rule is the preferred official term
  • Rule is considered a short version of style rule
  • Rule set (or ruleset) is an acceptable but possibly outdated synonym
  • An individual property/value line is a declaration, not a rule

5 Responses

  1. Aizaz Ul Haq says:

    Hi there, this is the only article that gives out such a neat and simple explanation. Only a person with your experience is able to explain this. I have been seeing the term ruleset quite a lot. Now I know the details of CSS Rules and Rulesets thanks to you!

  2. jacopo says:

    Hello! This article is finally what I was looking for, with such a clear and straightforward explanation. The term “ruleset” has always intrigued me and now, thanks to you, I have a full understanding of what Rules and Rulesets in CSS are!

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).