[分享]css共识计划是什么意思

你是否曾遇到过使用 CSS 时，对于如何命名样式类、如何布局页面、如何写选择器等问题感到困惑？如果是这样，那么你可能会对 CSS 共识计划感兴趣。CSS 共识计划（CSS Guidelines）是一套...

你是否曾遇到过使用 CSS 时，对于如何命名样式类、如何布局页面、如何写选择器等问题感到困惑？如果是这样，那么你可能会对 CSS 共识计划感兴趣。

CSS 共识计划（CSS Guidelines）是一套关于编写可维护、可扩展和可重复使用的 CSS 代码的指南。这份指南的主要目的是为了提高团队协作和项目可读性，从而加快项目的开发和维护速度。

以下是该指南的一些通用规则：

/* CSS 命名规则 */
.blue-button {}

/* 原则上不必使用通用选择器 */
.example {}

/* 使用 rem 或 em 作为 font-size 的单位 */
body {
  font-size: 16px;
}

/* 避免使用 !important */
.example {
  color: red !important;
}

/* 使用 BEM 命名法 */
.block__element--modifier {}

/* 固定宽度配合弹性盒子布局 */
.flex-container {
  display: flex;
  width: 100%;
}

/* 避免使用 id 选择器 */
#example {}

/* 添加注释增加代码可读性 */
/* This is a comment */

/* 使用属性缩写 */
.example {
  margin: 10px 0;
}

/* 在多个选择器中尽量共享样式 */
.example-1,
.example-2 {
  color: red;
} 

所有这些规则都是为了提高 CSS 代码的可读性，易维护性和易扩展性，以便其他开发人员能够更轻松地了解你的代码，并在其中添加或修改。它还可以帮助确保整个项目遵循相同的样式规则，从而避免样式冲突和其他问题。