组织和扩展 CSS

在新项目的第一份样式表上工作是件乐事。写到几百行时，情况开始改变：你改变了一个按钮的颜色，另外三个按钮也跟着改变了，一个标题拒绝移动，直到你在它旁边贴上 !important，每条新规则都可能破坏旧的。CSS 本身仍然是正确的。缺少的是承载它的结构，正是这个结构，而不是语法，决定了一份样式表在一千行还是十万行时是否仍可维护。

为什么 CSS 难以扩展

CSS 默认是全局的。你写的每条规则都可以影响到页面上任何匹配的元素。写 p { color: navy; } 的话，整个项目中的每个段落都会变成深蓝色，无论你是否有意。在小页面上这很便利。随着项目增长，这就是大多数问题的根源。

问题表现为规则冲突。两份样式表都针对 p，或一条通用规则和一条具体规则都应用到同一个元素，现在你必须弄清楚哪一个胜出。你在 CSS 如何工作中看到了决定这一点的机制：浏览器通过特异性和顺序解决冲突。扩展 CSS 的关键在于首先不创建那些冲突。

css

/* 一条全局规则影响页面上的每个段落 */
p {
  color: navy;
}

/* 另一条规则，在其他地方，竞争相同的元素 */
.notice p {
  color: crimson;   /* 在 .notice 内胜出：更具体 */
}

Juno为什么 CSS 难以扩展 CSS 规则是全局的：一条规则可以样式化页面各处的元素，这一开始很方便，后来会很混乱。随着项目增长，规则开始冲突，浏览器必须使用特异性和顺序选择获胜者。组织 CSS 的大部分工作是关于首先编写不彼此冲突的规则。

保持特异性低且平坦

最有用的单一习惯是用**类**样式化，大多情况下一次一个类。像 .card 这样的类很容易应用，可重用，如果以后需要，也可以毫无痛感地覆盖，因为单个类是一个低而温和的特异性水平。

麻烦来自两件事：id 和长的选择器链。像 #header 这样的 id 比类更难覆盖，像 .sidebar ul li a 这样的链被绑定到一个精确的结构。更喜欢你可以放在任何地方的普通类：

css

/* 首选：单个类，低且平坦 */
.nav-link {
  color: navy;
}

/* 避免：id，稍后难以覆盖 */
#nav-link {
  color: navy;
}

/* 避免：深链，脆弱且更高的特异性 */
.sidebar nav ul li a {
  color: navy;
}

Juno保持特异性低且平坦用类样式化，大多情况下一次一个类，像 .card 或 .nav-link。单个类快速可重用，稍后覆盖毫无痛感，正是你想要的。远离 #header 之类的 id 和 .sidebar ul li a 之类的长链，因为两者都更难改变。

命名约定

一旦你用类样式化，下一个问题是如何命名它们。像 .blue 或 .thing2 这样的名字很快就会失效，因为它们没有说明类的目的。一个**命名约定**是一个约定的命名类的方式，使得名字告诉你类做什么以及它属于哪里。

广泛使用的叫做 BEM，代表块、元素、修饰符。一个块是像卡这样的组件。一个元素是其中的一个部分，用两个下划线写。一个修饰符是一个变化，用两个破折号写：

css

/* 块：组件本身 */
.card { }

/* 元素：块的一部分，两个下划线 */
.card__title { }
.card__body { }

/* 修饰符：块的变化，两个破折号 */
.card--featured { }

html

<article class="card card--featured">
  <h2 class="card__title">周末工坊</h2>
  <p class="card__body">一个简短的布局介绍。</p>
</article>

Juno命名约定命名约定是一个约定的命名类的方式，使得名字告诉你它的目的。BEM 是常见的：像 .card 的块，像 .card__title 的其中的元素带两个下划线，像 .card--featured 的变化带两个破折号。你不必使用 BEM，但选择某个一致的方案并坚持它。

结构化文件

随着样式表增长，一个长文件变得难以移动。常见的修复是将 CSS 分成几个文件夹，按照规则做什么：**基础**样式（body 和标题之类的普通元素的默认值）、组件（卡、按钮和其他片段）和实用程序（像间距或文本对齐这样的微小单一目的帮手）。

当你分割文件时，一个细节很重要：你加载它们的顺序。当两条规则具有相同的特异性时，后来的一条胜出，所以稍后加载的样式表可以覆盖更早的一个。从最通用加载到最具体：

css

/* main.css：顺序从最不具体运行到最具体 */
@import "base/reset.css";        /* 元素默认值 */
@import "base/typography.css";

@import "components/card.css";    /* 自包含的片段 */
@import "components/button.css";

@import "utilities/spacing.css";  /* 加载最后所以它们可以覆盖 */
@import "utilities/text.css";

Juno结构化文件将 CSS 按规则做什么分成文件夹：基础用于元素默认值，组件用于卡和按钮之类的片段，实用程序用于微小的帮手。然后注意你加载它们的顺序，因为当特异性打结时，稍后的规则胜出。加载通用优先和具体最后，所以帮手可以覆盖片段。

使级联显式

到目前为止的一切通过约定保持级联可管理：低特异性、好名字、谨慎的文件顺序。在你走得更深时有更多东西在这里，值得知道旅行的方向。现代 CSS 让你直接控制排序而不是依赖文件碰巧坐在哪里，它给你方式使级联可预测，当更多人在同一样式表上工作。你会在项目增长时遇到这些工具，上面的习惯正是什么为它们做准备。

Juno使级联显式到目前为止的一切用习惯驯服级联：低特异性、清晰的名字、谨慎的加载顺序。随着你走得更远，CSS 给你工具直接设置获胜顺序而不是依赖哪个文件加载优先。你不需要它们还，这章中的习惯正是什么使你为它们准备。

组织和扩展 CSS ​

为什么 CSS 难以扩展 ​

保持特异性低且平坦 ​

命名约定 ​

结构化文件 ​