怎样才能写出更好的 CSS？

1、第 1 页 共 29 页怎样才能写出更好的怎样才能写出更好的 css？让我们直截了当：编写优秀的 css 代码是件非常疼痛的事情。无数开发人员都不想做 css 开发。 你让我干什么都行， 但是 css 还是算了吧。在我创建应用的时候，从来都无法从 css 中享受到乐趣。但是你也躲不过去，是不是？我是说，我们聚精会神于用户体验，但是如今设计也是不容忽略的部分。项目刚开头的时候，一切都很美妙。你有一些css 挑选器，诸如 .title、input、app 等等，十分容易。但是随着应用逐渐变大，css也越来越糟。你对 css挑选器感到困窘。你会发觉自己写了一些divapp .list li.item

2、 a之类的东西。然后你一遍又一遍地写相同的代码。最后你把全部代码都扔到文件末尾，由于你根本不在乎，css烂透了。结果你得到了 500行根本无法维护的 css 代码。我本人常常和 css 苦苦纠缠今日我的目的是：让你写出更好的 css。我想让你回顾一下旧项目，然后想一想：天啊，我怎么会写这样的东西？但是，你可能会想：好，你说的很对，但是 css 框架呢？css 框架就第 2 页 共 29 页是为了协助我们写出更好的 css 代码，不是吗？固然，但是 css 框架也有一些缺点：它常常会用法平淡无奇的设计。css 框架使得定制很困难，更不用说超越框架了。在用法之前，你必需先学习如何用法它们。既然你关

3、注了这篇文章，那么你一定有自己的缘由，对不对？好了，废话不多说，让我们开头学习如何写出更好地 css 代码。注重：这篇文章不是关于如何设计美丽的应用。本文是关于如何写出便于维护的 css 代码以及如何组织代码。scss第 3 页 共 29 页我将在我的例子中用法 scss。scss 是一个 css 的预处理器。 从根本上来说， 它是一个 css 的超集：它增强了一些很酷的功能，例如变量，嵌套，导入和混入（mixins）等。下面介绍一些我们即将用法的功能。变量你可以在 scss 中用法变量。主要的益处在于可重用性。我们假设你的应用有一组色彩。主色是蓝色。那么你到处都用到了蓝色：按钮的 backg

4、round-color（背景色），标题和链接的 color（色彩）。蓝色无处不在。骤然有一天，你不喜爱 蓝色，开头喜爱 绿色。假如没有变量：你需要修改全部包含蓝色设置的代码。假如用法了变量：你只需要修改这个变量。第 4 页 共 29 页/ declare a variable$primary-color: 0099ff;/ references a variableh1 color: $primary-color;嵌套你可以在 scss 中用法嵌套。那么如下代码：h1 第 5 页 共 29 页font-size: 5rem;color: blue;h1 span color: green;可以

5、写成：h1 font-size: 5rem;color: blue;第 6 页 共 29 页span color: green;可读性更好了，是不是？你可以利用嵌套在更短时光内写出复杂的挑选器。分块与导入从可维护性和可读性的角度来说，你无法将全部代码都保存在一个大文件中。在试验或构建小型应用时，这种做法尚且可行，但是到了专业的级别想都不要想。很幸运的是，有了 scss 后，我们依旧可以继续沿用这种做法。你可以通过用法前下划线给文件命名，来创建分块的文件：第 7 页 共 29 页_animations.scss，_ base.scss，_variables.scss 等。至于导入，你可以用法 i

6、mport 命令。例如，你可以这么做：/ _animations.scsskeyframes appear 0% opacity: 0;100% opacity: 1;第 8 页 共 29 页/ header.scssimport "animations"h1 animation: appear 0.5s ease-out;哈哈！ 你可能想， 你在这里犯了一个错误！ 应当是 _animations.scss，而不是 animations ;)非也。假如你用法这种命名方式，聪慧的 scss 知道你指的是分块文件。第 9 页 共 29 页关于变量、嵌套、分块和导

7、入，我们需要了解的就这么多。scss 还有无数其他功能：比如混入、继承和其他命令（for，if，等等），在此不做一一介绍了。假如你想了解更多信息，请查看相应的文档（https:/sass- css 代码：bem 办法论我记不清曾经多少次在 css 类中用法包揽一切的名字了。比如：.button、.page-1、.page-2、.custom-input。我们经常不知道如何命名。然而命名很重要。如果你正在构建某个应用，并且因为某种缘由不得不将其搁置数月，那该怎么办？还有更糟的，如果有人想把项目拿回去，该怎么办？假如你的 css 代码没有恰当的命名，那么乍一看上去很难明了你在说什么。bem 可以协

8、助我们解决这个问题。 bem 是一种命名商定， 是英文 blockelement modifier（块元素修饰符）的缩写。第 10 页 共 29 页这种办法可以使我们的代码结构化， 并提高模块化和可重用性。 现在让我们说一说什么是块、元素和修饰符。块你可以把块视为组件。 还记得你小时候玩过乐高积木吗？让我们回忆一下小时候。假如需要建筑一个容易的房子， 你会怎么做？你需要一个窗户， 一个屋顶，一扇门和一些墙壁。这些就是我们的块。它们有着本身的意义。命名：块名：.block示例：.card、.form、.post、.user-navigation元素接下来，你应当如何用你的乐高积木建筑一个窗口呢？

9、可能有些积木看起来像框架，假如你把四个这样的积木组装起来，就会得到一个美丽的窗户。这些就是我们的元素。它们是块的一部分，它们对于建块第 11 页 共 29 页必不行少。但是，在块外面的时候，它们便无用武之地。命名：块名+ _ +元素名：.block_element示例：.post_author、.post_date、.post_text修饰符现在窗户已经建好了， 但是你可能想要一个绿色或一个小窗户。 这些我们称之为修饰符。它们是块或元素上的标记，它们用于转变行为，外观等等。命名：块名称或元素名称+ - +修饰符名称：.block_element-修饰符，.块-修饰符示例：.post-impor

10、tant，.post_btn-disabled注重事项在用法 bem 的时候，你可以用且只能用类来命名。不能用 id，不能用标签。只能用类。块和元素可以嵌入其他块和元素，但是它们必需是彻低自立的。请记住：自立。所以假如你想将把一个按钮放在标题下的话，就不要在按钮上加边距，否则按钮就会与标题绑定。请改用工具类。第 12 页 共 29 页是的，你的 html 文件会超负荷，但是不用不安，与 bem 带来的益处相比，这只是个小小的缺点。示例以下是一个练习。你可以去你最喜爱 或最常用的网站，然后想想看哪些是块、元素和修饰符。例如，以下是我想象中的 google 商店：现在该你了。仔细想想哪些地方可以改

11、进。与往常一样，你必需自己搜寻、试验和构件，以便更好地满足你的需求。融会贯穿下面的示例演示了 bem 的功能（https:/codepen.io/thomlom/pen/rjvvdq）。第 13 页 共 29 页写一个博文组件写多个按钮组织 css 文件：7-1 模式你还跟得上我的节奏吗？很好！ 现在让我们来介绍如何组织 css 文件。这个部分可以真正协助你提高工作效率，并协助你立即找到需要修改的 css 代码。为此，让我们了解一下 7-1 模式。你可能会想，我从未听过这种模式。信任我，这很容易。你必需遵守以下两条规章：第 14 页 共 29 页将全部内容分离写入 7 个不同的文件夹中。将它们

12、所有导入位于根级别的 main.scss 文件中。仅此而已。7 个文件夹：base： 你可以将全部的样板代码放入该文件夹中。 对于这里的样板，我指的是：每次开头一个新项目时，你需要写的全部 css 代码。例如：排版规章、动画、工具程序（对于工具程序，我指的是margin-right-large、text-center、.等类）等等。components： 这里指组件。 这个文件夹包含全部用于构建页面的组件，例如按钮、表单、滑块、弹出窗口等等。layout：页面不同部分用到的布局，也就是说：页眉、页脚、导航、分区、你自己的网格等等。pages：页面。有的页面可能有特定的样式，与通常的处理方式不同

13、。那么你可以将它放入该文件夹。themes：主题。假如你的应用中有不同的主题（黑暗模式、管理员等等），那么可以将它们放入该文件夹。abstracts：抽象。你可以将全部函数和变量与混入（mixin）放在这里。简而言之，就是你全部的帮手。vendors：外部资源。应用或项目怎么可能没有外部的库呢？你可以将全部不依靠于你的文件都放入该文件夹。例如，你可以放入 fontawesome 文件、bootstrap 和其他类似的东西。第 15 页 共 29 页主文件你需要将以上全部内容导入到该文件中。import abstracts/variables;import abstracts/functions

14、;import base/reset;import base/typography;import base/utilities;import components/button;import components/form;import components/user-navigation;第 16 页 共 29 页import layout/header;import layout/footer;.我知道你觉得以上内容有点太多， 一时难以接受。 这个架构适合于大型项目，而非小项目。下面我们介绍一种更适合小项目的做法。首先，你不需要vendors 文件夹。可以将全部外部 css 代码放在头部的

15、 link 标签内。接下来，假如你的应用惟独一个主题的话，可以省略 themes文件夹。最后，你可能不会有大量页面特定的风格，所以也 pages 也没须要。好了，现在只剩下 4 个文件夹了。然后，你有两个挑选：你可以根据 7-1 模式组织 css 代码，那么你需要留下 abstracts、components、layout 和 base 文件夹。你想将全部的分块文件和 mail.css 放在一个大文件夹内，那么你会得到如下结构：第 17 页 共 29 页sass/_animations.scss_base.scss_buttons.scss_header.scss._variables.scs

16、smain.scss你可以任凭选。第 18 页 共 29 页你可能会想：你说服了我！但是我该如何用法呢？我是说，哪些不支持scss 文件的扫瞄器该怎么办呢？说的好！这是我们的最后一步，我们现在就来学习如何将 scss 编译为css。从 scss 到 css首先，你需要 node.js 和 npm（或 yarn）。我们将用法一个名为 node-sass 的包，它可以让我们将 .scss 文件编译为 .css 文件。它的 cli（指令行界面）相当简单用法：node-sassoptions第 19 页 共 29 页它有多个挑选，但我们只用法其中两个：-w：监视名目或文件。这意味着 node-sass

17、waits 在时刻监督你的代码是否发生改动，一旦浮现发生，它就会自动编译成 css。这在开发时十分实用。-output-style：css 文件的输出内容。它的值可以是：嵌套、绽开、紧凑、压缩。我们将用法它来构建你的 css 文件。假如你是一个奇怪心很重的人（我希翼如此，由于开发人员应当奇怪！）那么，请点击这里查看完整的文档（https:/ && cd my-app初始化：npm init添加 node-sass 库：npm install node-sass -save-dev创建文件夹，index.html 和 main.scss 文件：touch inde

18、x.html第 20 页 共 29 页mkdir -p sass/abstracts,base,components,layout csscd sass && touch main.scss将这些脚本加入到 package.json 文件中：."scripts": "watch": "node-sass sass/main.scsscss/style.css -w","build": "node-sas

19、s sass/main.scsscss/style.css -output-style compressed"第 21 页 共 29 页,.将包含编译好的 css 文件的衔接加入到 index.html 文件的head 标签内：第 22 页 共 29 页my appmy app然后就可以了， 你预备好了！ 你可以在编程的时候运行 npm run watch，并在扫瞄器中打开 index.html 文件。 假如你想缩小 css， 只需运行 npmrun build。第 23 页 共 29 页补充添加实时重新加载你可能希翼添加实时重新加载以提高工作效率， 而无需手动重新加载本地

20、index.html 文件。你可以根据以下容易的步骤操作：安装 live-server 软件包：npm install -g live-server。注重：它是一个全局包。将 npm-run-all 添加到项目依靠项中：npm install npm-run-all-save-dev：有了它我们就可以同时运行多个脚本。将这些脚本添加到 package.json：第 24 页 共 29 页."scripts": "start": "npm-run-all -parallel liveserverwatch&

21、amp;quot;,"liveserver": "live-server","watch": "node-sass sass/main.scsscss/style.css -w",.现在假如你运行 npm run start，就可以立刻看到代码的变更。第 25 页 共 29 页添加自动前缀我们设置好了开发工具，太棒了！现在，让我们来谈谈构建工具，特殊是：自动前缀（autoprefixer）。它是一个工具（尤其是 postcss 插件），它可以解析 cs

22、s，并利用这些值（https:/ css 规章中。事实上， 在构建网站时， 你可能会用法一些并非全部扫瞄器都彻低支持的新功能。因此，提供商计划可以提供对这些功能的支持。以下是一个示例：-webkit-animation-name: myanimation;-moz-animation-name: myanimation;-ms-animation-name: myanimation;第 26 页 共 29 页你可能会想， 这写起来太乏味了。 这就是为什么我们需要自动前缀来协助我们的 css 代码获得扫瞄器的兼容，而不用增强额外的复杂性。那么我们如何用更聪慧地构建 css 呢？将全部的 scss 文件编译成一个主 css 文件。用法自动前缀为 css 文件添加前缀。压缩 css 文件还有最后几步，请坚持看下去，马上就结束了。添加两个依靠项，postcss-cli 和 autoprefixer：npm installautoprefixer postcss-cli -save-dev修改 build 脚本，并将这些脚本添加到 package.json：."scripts": 第 27 页 共 29 页"start&