规范并不是越大越全越好 - 我的 CSS 规范

站长

2024年03月13日 19:15 · 阅读数 20

前言

该规范并不是一个大而全的规范。

作为中小厂，我们需要的规范并不是一个大而全的规范。扪心自问，大家写的规范自己可以遵守吗？更何况别人写的规范。

我们的规范应该遵循一点，不符合的代码完全接受不了，不允许代码提交。比如中英混杂命名方式、超大单文件。

因此我将规范分为三类：

必须做（不这么做代码直接打回重写）
不要做（做了直接打回重写）
建议做（遇到该问题建议这么解决，但不这么写也可以上线）

必须做

命名规范

前端开发中，CSS 的命名往往是一个大问题，也是很多开发者厌恶 CSS 的来源。 CSS 写的越多，就会越发现 CSS 的维护尤其困难，特别是在你看到一大堆 left 、 right 、 zuo 、 you 等各类 CSS 类名的时候。

因此 CSS 规范显得尤为重要，良好的 CSS 规范是 CSS 维护成本降低的主要手段。

类名命名规范

我这里简单说，详细可以查看完整版 BEM 规范。

我们的命名分为三块，Block、Element、Modifier 。下面我简单说下三块的内容：

Block 块：用来描述一个真正的功能模块，比如 menu，又如 chat。
Element 元素：功能模块的组成部分，比如 menu-item，又如 chat-message。
Modifier 修饰符：基于某一个块或元素的修饰符，比如 menu-item-disabled，又如 chat-message-img。

命名方式：

单词和单词之间通过 - 连接

例如：block-element-modifier。

规范并不是越大越全越好 - 我的 CSS 规范

拿一个小人举例，我们的小人如上图所示：对应的 class 结构如下：

stick-man 整个小人。

stick-man-head 小人的头。

stick-man-head-xs 小人的小头。

stick-man-head-md 小人的大头。

stick-man-hand 小人的手。

stick-man-feet 小人的脚。

ID命名规范

我们的 ID 命名必须遵守以下内容：

单词之间使用 - 连接。
保持唯一性。
保持描述性，比如 submit-button 和 button1 应该选择前者。
不允许使用 CSS 关键字，以避免混淆。
不允许数字开头，CSS、JS 中，数字开头可能会引起未知问题。
不允许使用 ID Selector 修改样式，ID选择器的权重非常高，很难进行样式覆盖。

CSS 权重：

Inline styles: 1000。

ID Selector：100。

class Selector：10。

element Selector：1。

缩写

只允许使用大家都能看懂的缩写，如果有不清楚是否别人可以看懂，查阅或补充下表。如：

缩写一览表

btn（button）
el（element）
nav（navigation）
bg（background）
txt（text）
img（image）
col（column）
lg
md
sm
xs
xl

选择器使用规范

避免过多层级的选择器：多层级的选择器有两个问题，权重极高难以覆盖、难以理解。
- 例如 body header nav ul li a，我们应该写为 .navigation-link。
避免使用 ID 选择器：ID 选择器的优先级非常高，可能导致样式覆盖问题。尽可能使用类选择器。
避免使用标签选择器：标签选择器有两个问题，优先级低、影响范围广。
避免使用 !important：!important 可以覆盖其他所有样式，但是过度使用可能会使 CSS 变得难以维护。
使用伪类和伪元素：伪类和伪元素可以帮助你选择特定的元素，如 :hover，:first-child，::before 和 ::after。
使用属性选择器：属性选择器可以根据元素的属性来选择元素，如 [disabled]，[type="text"]。
使用组合选择器：组合选择器可以帮助你选择特定的元素，如 .menu > li 选择 .menu 的直接子元素 li。

属性声明顺序

我们的 class 属性声明应该做一定的划分，避免杂乱的 class 难以阅读。

分类及定义顺序：

布局相关：display、flex、grid 及周边属性。
位置与尺寸：position、top、z-index 等 / width、height、margin、padding 等。
字体与样式：font、color、line-height 等 / bg、bg-image、border、border-raidus 等。
其他：opacity、visibility、overflow 等。
CSS3：transition、animation、transform。

如果你发现你的样式较多时（超过 30 行），建议在不同分类中间做空行处理。

CSS 示例：

.example {
  display: grid;
  grid-template-rows: repeat(1, minmax(0, 1fr));

  position: absolute;
  top: 4px;
  left: 4px;

  font-size: 12px;
  color: #000;
  background-color: #fff;

  opacity: 0;

  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

tailwindcss 同理，示例：

<div class="
  grid-rows-1
  absolute
  top-4
  left-4
  text-sm
  text-black
  bg-white
  opacity-5
  animate-spin
"></div>

不要做

避免 Margin

在前端开发过程中，尽量避免使用 Margin。如果一定要用 Margin，建议提前关注 Margin 的塌陷问题。

主要问题

高度塌陷（Collapse）：在相邻的两个块之间，双方都设置了 Margin，会导致其中较小的 Margin 会被覆盖。这在前端称作高度塌陷。

Margin 与盒模型

Margin 在所有的盒模型中，都不包含在宽度内。

高度塌陷问题解决方案

Padding 替代 Margin：Padding 没有塌陷问题
使用 Flex / Grid 布局：在 FlexBox 、 Grid 布局中，元素之间的 Margin 不会出现塌陷问题
使用 overflow 属性：元素设置 overflow: hidden 可以阻止 Margin 塌陷
使用 float 解决塌陷问题（不推荐）

有害的 Margin：mxstbr.com/thoughts/ma…
Margin 的高度塌陷：www.joshwcomeau.com/css/rules-o…
怪异盒模型：www.runoob.com/css/css-box…

避免 Global Style

除了初始化项目外，我们都不应该使用全局样式。全局样式的每一次修改，都会带来巨量的问题。

问题

全局样式每次修改都会影响所有页面。且单通过代码审核很难看出问题。

举个例子：

之前带过一个实习生，在给老项目添加新页面时，发现老项目使用的是 标准盒模型 ，他觉得很不好用，于是通过 box-sizing 修改为了 怪异盒模型 ，且在开发时没有查看其他页面发现问题，审核时，由于在 CSS 的文件中，没有审核到该问题。

项目上线后，整个项目样式崩溃。

避免 !important

在开发过程中，我们应尽量避免使用 !important。如果在没有其他选择的情况下，可在业务代码中酌情使用（确保该属性一定是生效的）。

问题

样式冲突：!important 会覆盖其他所有样式（包括内联样式），可能会导致预期之外的后果。
维护困难：!important 使用后，会导致样式别人难以修改。
破坏权重：CSS 有自己的一套权重体系，!important 会破坏权重体系。

解决方案

内联样式：内联样式的权重更高

避免不恰当的z-index

在无必要的时候，避免使用 z-index。使用 z-index 时，确保理解并赋准确的权重，避免过大的权重（z-index: 999999）。

避免 Float

在现代浏览器中，我们他应该避免使用 Float。如果需要布局，建议采用 Flex、Grid。

在早期开发中，由于网页缺乏好的布局工具，因此使用 Float（设计初衷是为了实现文本环绕）实现布局。但是在现代开发中，浏览器已经提供了足够布局使用的属性。

避免 calc

新版的 CSS 中提供了 calc 来进行动态计算，我们应当慎重的使用 calc 来进行动态计算。

问题

性能问题：calc 函数在运行时计算，会影响页面的渲染性能。

替代方案

例子：

<div style="width: 200px" />
<div style="width: calc(100% - 200px)" />

使用 CSS Grid 布局 或 Flexbox 布局 替代 calc

<div style="display: flex">
    <div style="width: 200px" />
    <div style="flex-grow: 1" />
</div>

<div style="display: grid; grid-template-columns: 200px auto;">
  <div></div>
  <div></div>
</div>

使用 百分比布局 与 vw、vh 替代 calc（不能完全还原）（不能完全还原）

<div style="width: 20%"></div>
<div style="width: 80%"></div>

<div style="width: 20vw"></div>
<div style="width: 80vw"></div>

建议做

使用 CSS 动画，而不是 JavaScript 动画
尽量避免回流与重绘
善用 CSS3 新特性
及时清理未生效的 class

使用 min-width、width 替代 overflow、外包div 来解决 Flexbox 中 text、img 溢出问题

在我们使用 Flexbox 时，会遇到 text 、 img 的尺寸超出 Flexbox 的元素范围导致的溢出问题。

问题原因

CSS2.1 版本之后，为了给 Flex 提供更合适的默认最小尺寸引入了 auto ， width 和 min-width 在 Flexbox 中的默认值是 auto 。

min-width: auto 使得元素的最小宽度不再是默认的 0 ，而是根据内容和上下文来计算。即使元素没有设置显式的最小宽度，也会有一个最小宽度，以防在 Flexbox 中过于压缩。

进而导致 Flexbox 内的 text 、 img 的元素宽度是由内部的文本、图片尺寸计算而来，进而导致换行等操作 overflow-wrap 失效。

overflow、外包div 方案的问题

嵌套层级增加
意外切割元素

解决方案

text。
- 添加 CSS 的 min-width: 0
img。
- 添加 CSS 的 width: 0

转载自:https://juejin.cn/post/7340851499717869604

规范并不是越大越全越好 - 我的 CSS 规范

前言

必须做

命名规范

类名命名规范

ID命名规范

缩写

选择器使用规范

属性声明顺序

不要做

避免 Margin

主要问题

Margin 与 盒模型

高度塌陷问题解决方案

相关文章

避免 Global Style

问题

避免 !important

问题

解决方案

避免 不恰当的z-index

避免 Float

避免 calc

问题

替代方案

建议做

使用 min-width、width 替代 overflow、外包div 来解决 Flexbox 中 text、img 溢出问题

问题原因

overflow、外包div 方案的问题

解决方案

Margin 与盒模型

避免不恰当的z-index