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

推荐订阅源

大猫的无限游戏
大猫的无限游戏
K
Kaspersky official blog
Apple Machine Learning Research
Apple Machine Learning Research
B
Blog
aimingoo的专栏
aimingoo的专栏
M
MIT News - Artificial intelligence
小众软件
小众软件
云风的 BLOG
云风的 BLOG
腾讯CDC
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
Hugging Face - Blog
Hugging Face - Blog
S
SegmentFault 最新的问题
Stack Overflow Blog
Stack Overflow Blog
量子位
S
Secure Thoughts
G
GRAHAM CLULEY
C
CXSECURITY Database RSS Feed - CXSecurity.com
人人都是产品经理
人人都是产品经理
雷峰网
雷峰网
T
Threat Research - Cisco Blogs
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
Cisco Talos Blog
Cisco Talos Blog
G
Google Developers Blog
爱范儿
爱范儿
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
有赞技术团队
有赞技术团队
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
Martin Fowler
Martin Fowler
The GitHub Blog
The GitHub Blog
Google DeepMind News
Google DeepMind News
C
Cisco Blogs
D
Darknet – Hacking Tools, Hacker News & Cyber Security
博客园 - 聂微东
宝玉的分享
宝玉的分享
H
Hackread – Cybersecurity News, Data Breaches, AI and More
N
Netflix TechBlog - Medium
Forbes - Security
Forbes - Security
Engineering at Meta
Engineering at Meta
S
Security Affairs
Help Net Security
Help Net Security
博客园 - 三生石上(FineUI控件)
AWS News Blog
AWS News Blog
博客园 - 叶小钗
Recent Commits to openclaw:main
Recent Commits to openclaw:main
V2EX - 技术
V2EX - 技术
Hacker News: Ask HN
Hacker News: Ask HN
Project Zero
Project Zero
H
Heimdal Security Blog
W
WeLiveSecurity
C
Check Point 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).