惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

L
Lohrmann on Cybersecurity
Martin Fowler
Martin Fowler
Engineering at Meta
Engineering at Meta
腾讯CDC
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Microsoft Azure Blog
Microsoft Azure Blog
G
Google Developers Blog
TaoSecurity Blog
TaoSecurity Blog
博客园_首页
Vercel News
Vercel News
Hugging Face - Blog
Hugging Face - Blog
D
Darknet – Hacking Tools, Hacker News & Cyber Security
Last Week in AI
Last Week in AI
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
T
The Exploit Database - CXSecurity.com
量子位
Project Zero
Project Zero
A
Arctic Wolf
小众软件
小众软件
NISL@THU
NISL@THU
C
CERT Recently Published Vulnerability Notes
有赞技术团队
有赞技术团队
MongoDB | Blog
MongoDB | Blog
博客园 - 聂微东
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
N
News and Events Feed by Topic
宝玉的分享
宝玉的分享
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
T
Troy Hunt's Blog
P
Privacy & Cybersecurity Law Blog
Security Latest
Security Latest
B
Blog
酷 壳 – CoolShell
酷 壳 – CoolShell
D
DataBreaches.Net
Schneier on Security
Schneier on Security
The Hacker News
The Hacker News
K
Kaspersky official blog
C
Check Point Blog
Hacker News: Ask HN
Hacker News: Ask HN
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
Webroot Blog
Webroot Blog
www.infosecurity-magazine.com
www.infosecurity-magazine.com
人人都是产品经理
人人都是产品经理
AI
AI
Cisco Talos Blog
Cisco Talos Blog
MyScale Blog
MyScale Blog
Cloudbric
Cloudbric
B
Blog RSS Feed
S
Schneier on Security
P
Palo Alto Networks Blog

Impressive Webs

Transforming Healthcare with VR: Virtual Surgery and Patient Simulation YouTube's Time-Based UX Problem for Live Sports Don't Let ChatGPT Write Your Code Filestack: A File Uploader and Powerful APIs for App Content Delivery How to Disable JavaScript in Almost Any Browser - Impressive Webs A Review of ipwhois.io for Reliable Geolocation Data Detecting Specific Text Input with HTML and CSS The Most Interesting Developer Tools for 2021 - Impressive Webs Fading in a Page on Load with CSS & JavaScript
CSS Rules vs. CSS Rulesets - Impressive Webs
https://www.facebook.com/ImpressiveWebs/ · 2022-09-21 · via Impressive Webs

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

Web Tools Weekly

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).