让我们 刀切斧砍：编写很棒的 CSS 代码是件非常痛楚的变乱。很多研发职员都不 想做 CSS 开发。你让我干什么都行，但是 CSS 还是别了吧。

在 我建立 使用 的时间，历来 都无奈 从 CSS 中享遭到 兴趣。但是你也躲不 已经 往，是不是 ？我是说，我们 全神贯注于用户体验，但是如今 计划也是不 容无视 的部门。

名目 刚末端 的时间，齐备都很优美。你有一些 CSS 抉择 器，诸如 .title、input、#app 等等，非常 简朴。但是跟着 使用 渐渐变 大年夜 ，CSS 也愈来愈 糟糕 。你关于 CSS 抉择 器感触 怀疑 。你会发明 本身写了一些 div#app .list li.item a 之类的工具 。然后 你一遍又一各处写雷同的代码。着末 你把全部 代码都扔到文件末端，由于你根本 不 在 乎，CSS 烂透了。效果你得 到 了 500 行根本 无奈 掩护 的 CSS 代码。

我本身 经常和 CSS 苦苦胶葛。

本日目的是：让你写出更好的 CSS。我想让你回首一下旧名目 ，然后 想一想 ：天啊，我怎样 会写如许的工具 ？但是，你大年夜 概会想：好，你说的很关于 ，但是 CSS 框架呢？CSS 框架就是为了资助 我们 写出更好的 CSS 代码，不 是吗？

固然，但是 CSS 框架也有一些缺陷 ：

• 它经常会使用平凡 无奇的计划。
• CSS 框架使得 定制很困难，更不 用 说跨越 框架了。
• 在 使用以前 ，你必需 先学习怎样使用它们。

既然你存眷 了这篇文章，那么你一定 有本身的缘故来由 ，关于 不 关于 ？好了，废话不 多说，让我们 末端 学习怎样写出更好地 CSS 代码。

注意：这篇文章不 是关于怎样计划美丽的使用 。本文是关于怎样写出便于掩护 的 CSS 代码和 怎样构造代码。

1. SCSS

将在 上面 例子中使用 SCSS。SCSS 是一个 CSS 的预处置处罚器。从根本 上来 说，它是一个 CSS 的超集：它增长了一些很酷的功用 ，比方变量，嵌套，导入和 混入（mixins）等。

上面 先容一些我们 行将 使用的功用 。

变量

你可以在 SCSS 中使用变量。紧张的长处在 于可重用性。我们 假定 你的使用 有一组颜色。主色是蓝色。

那么你到处都用到了蓝色：按钮的 background-color（背景色 ），标题和 链接的 color（颜色）。蓝色无处不 在 。

忽然有一天，你不 喜好蓝色，末端 喜好绿色。

• 如果不 变量：你必要矫正 全部 包含 蓝色配置 的代码。
• 如果使用了变量：你只需 要矫正 这个变量。

// Declare a variable$primary-color: #0099ff; // References a variableh1 {  color: $primary-color;}

嵌套

你可以在 SCSS 中使用嵌套。那么如下代码：

h1 {     font-size: 5rem;      color: blue;} h1 span {      color: green;}

可以写成：

h1 {      font-size: 5rem;      color: blue;      span {       color: green;      }}

可读性更好了，是不是 ？你可以使用嵌套在 更短工 夫 内写出复杂的抉择 器。

分块与导入

从可掩护 性和 可读性的角度来说，你无奈 将全部 代码都生存在 一个大年夜 文件中。在 实行大概 构建小型使用 时，这种做法尚且可行，但是到了专业 的级别……想都不 要想。很荣幸的是，有了 SCSS 后，我们 仍然 可以继续相沿这种做法。

你可以颠末 使用前下划线给文件定名，来建立 分块的文件：_animations.scss，_ base.scss，_variables.scss 等。

至于导入，你可以使 用 @import 指令。比方，你可以这么做：

// _animations.scss@keyframes appear {      0% {opacity: 0;}      100% {opacity: 1;}}// header.scss@import "animations";h1 {      animation: appear 0.5s ease-out;}

哈哈！你大年夜 概想，你在 这里犯了一个错误！应当 是 _animations.scss，而不 是 animations;)

非也。如果你使用这种定名方式 ，智慧的 SCSS 知道 你指的是分块文件。

关于变量、嵌套、分块和 导入，我们 必要相识的就这么多。SCSS 另有很多其余 功用 ：好比混入、继续和 其余 指令（@for，@if，等等），在 此不 做逐个 先容了。

如果你想相识更多信息，请查察相应的文档 戳这里。文档写得 很好，且易于明确。

2. 构造 CSS 代码：BEM 办法 论

我记不 清曾经 多少 次在 CSS类中使用包办齐备的名字了。好比：·.button·、·.page-1·、·.page-2·、·.custom-input·。

我们 经常不 知道 怎样定名。但是 定名很紧张。如果你正在 构建某个使用 ，而且由于某种缘故来由 不 克不 及 不 将其布置 数月，那该怎样 办？另有更糟糕 的，如果有人想把名目 拿归去，该怎样 办？如果你的 CSS 代码不 适当的定名，那么乍一看上去 很难明确你在 说什么。

BEM 可以资助 我们 管理这个题目。BEM 是一种定名商定 ，是英文 Block Element Modifier（块元素修饰符）的缩写。

这种办法 可以使 我们 的代码布局化，并进步模块化和 可重用性。如今 让我们 说一说什么是块、元素和 修饰符。

块

你可以把块视为组件。还记得 你小时间玩过乐高积木吗？让我们 追念一下小时间。

如果必要制造 一个简朴的房子，你会怎样 做？你必要一个窗户，一个屋顶，一扇门和 一些墙壁。这些就是我们 的块。它们有着本身的意思 。

• 定名：块名：.block
• 示例：.card、.form、.post、.user-navigation

元素

接上去 ，你应当 怎样用你的乐高积木制造 一个窗口呢？大年夜 概有些积木看起来像框架，如果你把四个如许的积木组装起来，就会得 到 一个美丽的窗户。这些就是我们 的元素。它们是块的一部门，它们关于 于建块必不 成 少。但是，在 块表面的时间，它们便无用武之地。

• 定名：块名+ __ +元素名：.block__element
• 示例：.post__author、.post__date、.post__text

修饰符

如今 窗户曾经 建好了，但是你大年夜 概想要一个绿色大概 一个小窗户。这些我们 称之为修饰符。它们是块大概 元素上的标记，它们用于窜改 举动，表面 等等。

• 定名：块称呼 大概 元素称呼 + -- +修饰符称呼 ：.block__element--修饰符，.块--修饰符
• 示例：.post--important，.post__btn--disabled

注意变乱

• 在 使用 BEM 的时间，你可以用且只能用类来定名。不 克不 及 用 ID，不 克不 及 用标签。只能用类。
• 块和 元素可以嵌入其余 块和 元素，但是它们必需 是彻底 独立的。请记着：独立。以是如果你想将把一个按钮放在 标题下的话，就不 要在 按钮上加边距，不然 按钮就会与标题绑定。请改用工具 类。
• 是的，你的 HTML 文件会超负荷，但是不 用 担忧 ，与 BEM 带来的长处比拟 ，这只是个小小的缺陷 。

示例

如下 是一个练习。你可以去你最喜好大概 最经常使用 的网站，然后 想一想 看哪些是块、元素和 修饰符。

比方，如下 是我想象中的 Google 市肆：

如今 该你了。仔细 想一想 哪些中央 可以改良 。与如今 异样 ，你必需 本身搜索、实行和 构件，以便更好地满意你的必要 。

领悟贯串

上面 的示例演示了 BEM 的功用 。

写一个博文组件

写多个按钮

3. 构造 CSS 文件：7-1形式

你还跟得 上节奏 吗？很好！如今 让我们 来先容怎样构造 CSS 文件。这个部门可以真正资助 你进步任务 听从 ，并资助 你立即找到必要矫正 的 CSS 代码。

为此，让我们 相识一下 7-1 形式 。你大年夜 概会想，我从未听过这种形式 。信赖我，这很简朴。你必需 听从 如下 两条规定端方 ：

1. 将全部 内容区分 写入7个差异的文件夹中。
2. 将它们全部 导入位于根级此外 main.scss 文件中。仅此罢了 。

7 个文件夹：

• base：你可以将全部 的榜样 代码放入该文件夹中。关于 于这里的榜样 ，我指的是：每 次末端 一个新名目 时，你必要写的全部 CSS代码。比方：排版规定端方 、动画、工具 步伐（关于 于工具 步伐，我指的是margin-right-large、text-center、...等类）等等。
• components：这里指组件。这个文件夹包含 全部 用于构建页面的组件，比方按钮、表单、滑块、弹出窗口等等。
• layout：页面差异部门用到的布局，也就是说：页眉、页脚、导航、分区、你本身的网格等等。
• pages：页面。有的页面大年夜 概有特定的款式 ，与但凡 的处置处罚方式 差异。那么你可以将它放入该文件夹。
• themes：主题。如果你的使用 中有差异的主题（暗中形式 、管理 员等等），那么可以将它们放入该文件夹。
• abstracts：笼统 。你可以将全部 函数和 变量与混入（mixin）放在 这里。简而言之，就是你全部 的帮助。
• vendors：外部 资源。使用 大概 名目 怎样 大年夜 概不 外部 的库呢？你可以将全部 不 依靠于你的文件都放入该文件夹。比方，你可以放入Font Awesome文件、Bootstrap和 其余 雷同的工具 。

主文件

你必要将以上全部 内容导入到该文件中。

@import abstracts/variables;@import abstracts/functions;@import base/reset;@import base/typography;@import base/utilities;@import components/button;@import components/form;@import components/user-navigation;@import layout/header;@import layout/footer;...

我知道 你以为以上内容有点太多，临时 难以担当。这个架构得 当于大年夜 型名目 ，而非大名 目 。上面 我们 先容一种更得 当大名 目 的做法。

起首，你不 必要 vendors 文件夹。可以将全部 外部 CSS 代码放在 头部的link标签内。接上去 ，如果你的使用 只需 一个主题的话，可以省略 themes 文件夹。着末 ，你大年夜 概不 会有大年夜 量页面特定的风格 ，以是也 pages 也不必 。好了，如今 只剩下 4 个文件夹了。

然后 ，你有两个抉择 ：

1. 你可以依照 7-1形式 构造CSS代码，那么你必要留下abstracts、components、layout 和 base 文件夹。
2. 你想将全部 的分块文件和 mail.css 放在 一个大年夜 文件夹内，那么你会得 到 如下布局：

sass/    _animations.scss    _base.scss    _buttons.scss    _header.scss    ...    _variables.scss    main.scss

你可以恣意选。

你大年夜 概会想：你压服 了我！但是我该怎样使用呢？我是说，哪些不 支持 scss文件的欣赏器该怎样 办呢？说的好！这是我们 的着末 一步，我们 如今 就来学习怎样将SCSS编译为CSS。

4. 从 SCSS 到 CSS

起首，你必要 Node.js 和 NPM（大概 Yarn）。

我们 将使用一个名为 node-sass 的包，它可让 我们 将 .scss 文件编译为 .css 文件。

它的 CLI（下令行界面）相当轻易使用：

node-sass  
 [options]

它有多个抉择 ，但我们 只使用此中两个：

• -w：监督目次大概 文件。这意味 着node-sasswaits在 时候监督你的代码能否 发生发火 窜改 ，一旦呈现 发生发火 ，它就会主动编译成CSS。这在 开发时非常 有效。
• --output-style：CSS文件的输入 内容。它的值可以是：嵌套、睁开、紧凑、紧缩 。我们 将使用它来构建你的CSS文件。

如果你是一个猎奇 心很重的人（我盼望云云，由于开发职员应当 猎奇 ！）那么，请点击这里查察 完备的文档。

如今 我们 知道 必要用哪些工具 。此外 的任务 更简朴。只需 按如下 步伐 利用：

• 建立 名目 ：mkdirmy-app && cd my-app
• 初始化：npm init
• 增加 node-sass库：npm install node-sass --save-dev
• 建立 文件夹，index.html和 main.scss文件：

touch index.htmlmkdir -p sass/{abstracts,base,components,layout} csscd sass && touch main.scss

• 将这些脚本到场到package.json文件中：

{      ...      "scripts": {          "watch": "node-sass sass/main.scss css/style.css -w",          "build": "node-sass sass/main.scss css/style.css --output-style compressed"      },      ...}

• 将包含 编译好的 CSS 文件的毗连到场到 index.html 文件的 head 标签内：

                                                            
My app
    

然后 便可 以 了，你预备好了！你可以在 编程的时间运转 npm run watch，并在 欣赏器中翻开 index.html文件。如果你想减少 CSS，只需 运转 npm run build。

5. 增补

增加 及时重新 加载

你大年夜 概盼望增加 及时重新 加载以进步任务 听从 ，而无需手动重新 加载本地index.html文件。

你可以依照 如下 简朴的步伐 利用：

• 安装 live-server软件包：npm install -g live-server。注意：它是一个全局包。
• 将npm-run-all增加 到名目 依靠项中：npm install npm-run-all --save-dev：有了它我们 便可 以 同时运转 多个脚本。
• 将这些脚本增加 到package.json：

{      ...      "scripts": {          "start": "npm-run-all --parallel liveserver watch",          "liveserver": "live-server",          "watch": "node-sass sass/main.scss css/style.css -w",      },     ...}

如今 如果你运转 npm run start，便可 以 立即看到代码的变更。

增加 主动前缀

我们 配置 好了开发工具 ，太棒了！如今 ，让我们 来谈谈构建工具 ，特殊是：主动前缀（Autoprefixer）。

它是一个工具 （尤为 是postcss插件），它可以分析CSS，并使用这些值（https://caniuse.com/）将供给 商的前缀到场到CSS规定端方 中。

现实上，在 构建网站时，你大年夜 概会使用一些并不 是 全部 欣赏器都彻底 支持 的新功用 。因而 ，供给 商方案可以供给 关于 这些功用 的支持 。如下 是一个示例：

-webkit-animation-name: myAnimation;-moz-animation-name: myAnimation;-ms-animation-name: myAnimation;

你大年夜 概会想，这写起来太有趣 了。这就是为何 我们 必要主动前缀来资助 我们 的CSS代码得 到欣赏器的兼容，而不 用 增长额定 的复杂性。

那么我们 怎样用更智慧地构建CSS呢？

1. 将全部 的SCSS文件编译成一个主CSS文件。
2. 使用主动前缀为CSS文件增加 前缀。
3. 紧缩 CSS文件

另有着末 多少 步，请统一 看上来 ，立即就竣事了。

• 增加 两个依靠项，postcss-cli和 autoprefixer：npm install autoprefixer postcss-cli --save-dev
• 矫正 build脚本，并将这些脚本增加 到 `package.json：

{      ...      "scripts": {          "start": "npm-run-all --parallel liveserver watch",          "liveserver": "live-server",          "watch": "node-sass sass/main.scss css/style.css -w",          "compile": "node-sass sass/main.scss css/style.css",          "prefix": "postcss css/style.css --use autoprefixer -o css/style.css",          "compress": "node-sass css/style.css css/style.css --output-style compressed",          "build": "npm-run-all compile prefix compress"      ...}

如今 当你运转 npm run build 时，可以天生颠末紧缩 的 CSS 代码，而且增加 了供给 商前缀！太棒了是不是 吗？但是你知道 更酷的是什么吗？这里为你配置 了一个代码堆栈，以资助 你灵敏末端 ：）

如果你想知道 我是怎样在 名目 中使用 这些武艺 的，请点击这里查察 代码堆栈 和 效果。盼望你能颠末 这些例子更深入 明确。如今 ，你可以预备末端 编写具有可掩护 性、模块化和 可重用性的 CSS 代码了。

小同伴们，加油！！！