31

CSS标准

 3 years ago
source link: https://www.clloz.com/programming/front-end/css/2020/08/28/css-specification-choose/
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 的知识本身就是比较庞杂,难以成体系,而且标准化也不像 ECMAScriptHTML 有一份完整的标准。一般我们查询 CSS 的内容都是到 MDN 上进行查询,如果想要查询 W3C 的标准,除了一份 CSS2.2 ,其他的标准一大片,不知道看哪个才好。在 W3CALL STANDARDS AND DRAFTS 中以 CSStitle 搜索一共有 94 份文档。本文来总结一下如何查看自己需要的标准。

MDN

对于我们日常的查询来说, MDN 是一个更合适的选择,如果遇到问题都去查标准效率太低了, MDN 的内容足够满足我们的大部分需求了。

使用 MDN 我们除了使用使用关键词查询之外,在 CSS参考 页面给出了按字母索引 的所有标准 CSS 属性、伪类、伪元素、数据类型、以及 @ 规则。 还按类型排列的 CSS 选择器 列表和 CSS 关键概念 列表。还有一份简短的 DOM-CSS / CSSOM 参考。

MDN 的使用大家都不陌生,这里再给大家推荐两个软件,一个是 Dash for Mac ,他提供了大多数语言和工具的 API ,前端的包括 HTMLCSSJavascriptNodeJSReactVueAngular 等的 API ,并且也能和 Alfred 进行整合,非常方便的 API 查询工具。

另一个是 CodeRunner ,他右侧的工具栏直接可以进行 GoogleStackOverflow 以及 MDN 的检索,非常方便。如果你是写一些小的 demo 非常建议使用这个软件。

标准

下面就是稍微有些杂乱的标准,如果我们想要系统地了解规范的细节,那么只能去看标准了。不过那么多的标准我们应该看哪些。这份 CSS Working Group Editor Drafts 可以作为参考,它给出了各个 CSS 细分区域有几份标准,哪一份是 Current Work 的。

在这些标准中最重要的就是 CSS2.2 ,它是所有 CSS 的基础,其他的标准都要在学习了 CSS2.2 之后,其中最重要的是:

  • 5 Selectors 选择器
  • 6 Assigning property values, Cascading, and Inheritance 属性值赋值,层叠和继承
  • 8 Box model 盒模型
  • 9 Visual formatting model 视觉格式化模型
  • 10 Visual formatting model details 视觉格式化模型细节

CSS2.2 之后的茫茫多的标准就是按具体内容细分成了独立的标准,比较重要的有如下这些:

  • Selectors Level 4
  • CSS Box Model Module Level 3
  • CSS Cascading and Inheritance Level 3
  • CSS Values and Units Module Level 3
  • CSS Pseudo-Elements Module Level 4
  • CSS Animations Level 1
  • CSS Transforms Module Level 1
  • Media Queries Level 4
  • CSS Flexible Box Layout Module Level 1
  • CSS Regions Module Level 1
  • CSS Multi-column Layout Module
  • CSS Inline Layout Module Level 3

我还是建议在有确实需要的时候再阅读标准,因为标准的阅读需要花费大量的时间,并且有些非常新的标准不一定就会一直持续下去,把最重要的 CSS2.2 掌握,其他的略读一下即可。

参考文章

  1. 有哪些CSS标准是前端工程师很有必要研读的? – 貘吃馍香的回答 – 知乎
  2. 有哪些CSS标准是前端工程师很有必要研读的? – 贺师俊的回答 – 知乎

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK