读《前端架构设计》

远子 â€¢  2020å¹´05月25日

编写 CSS 时的 "BB鸟" 规则

以下规则摘录自《前端架构设计》:

  1. 永远不要给布局的子内容强加内边距和元素样式。布局只关注垂直对齐、水平对齐和文字间距。
  2. 主题和别的数据属性值永远不要强制改变外观;它们必须保持布局、组件和元素可以应用于其上。
  3. 组件总是贴着它的父容器的四个边,元素都没有上外边距和左外边距,所有的最后节点 (最右边和最下边的节点)的外边距都会被清除。
  4. 组件本身永远不要添加背景、宽度、浮动、内边距和外边距的样式,组件样式是组件内元素的样式。
  5. 每个元素都有且只有一个唯一的且作用域只在组件内的 CSS 类名。所有的样式都是直接应用到这个选择器上,并且只有上下文和主题能修改元素的样式。
  6. 永远不要在元素上使用上外边距,第一个元素总是贴着它所在组件的顶部。
  7. JavaScript 永远不要绑定任何元素的 CSS 类名,选中元素通过数据属性实现。

读完这些规则, 我发现编写 CSS 实际上只有一个规则: 互不影响

  1. 新的样式不要影响到旧有的样式
  2. 张三的样式不要影响到李四的样式

而能符合这原则的 CSS 命名规范是 BEM.

(完)