站点介绍
让我们开门见山：编编辑优质的 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 代码以及怎么样团队代码。
SCSSSCSS 是一个 CSS 的预处理器。从开始上来说，它是一个 CSS 的超集：它增加了有的功能，比如变量，嵌套，导入和混入（mixins）等。
下面讲解有的我们即将使用的功能。
变量
你可以在 SCSS 中使用变量。主要的好处在于可重用性。我们假设你的应用有一组颜色。主色是蓝色。
那么你处处都用到了蓝色：按钮的 background-color（背景色），标题和链接的 color（颜色）。蓝色无处不在。
瞬间有24小时，不热爱蓝色，开始热爱绿帽色。
如果没有变量：你需要改写任何包含蓝色设置的代码。如果使用了变量：你只要改写这种变量。// Declare a variable
$primary-color: #0099ff;
// References a variable
h1 {
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，等等），在此不做一一讲解了。
如果你想知道再多消息，请调查相对应的文档（）。文档编辑得较好，且易于理解。
团队 CSS 代码：BEM 途径论以前有多少次在CSS类中使用包揽一切的名字了。例如：.button、.page-1、.page-2、.custom-input。
我们常常不了解怎么样命名。然而命名非常重要。假使你正在构建某个应用，并且由于某种不知名原因不得不将其搁置数月，那该怎么办？还有更糟的，假使有人想把项目拿回来，该怎么办？如果你的 CSS 代码没有恰当的命名，那么乍一就这样看上去超难明白你在说什么。
BEM 可以帮助我们解决这种问题。BEM 是一种命名约定，是英语 Block Element Modifier（块元素修饰符）的缩编辑。
这个途径可以使我们的代码结构化，并提升模块化和可重用性。现在让我们说一说什么是块、元素和修饰符。
块
你可以把块视为组件。如果需要搭建一个简单的房子，你会怎么去做？你需要一个窗户，一个屋顶，一扇门和有的墙壁。这些就是我们的块。它们具有本身的意义。
命名：块名：.block示例：.card、.form、.post、.user-navigation元素
接下来，你大概怎么样用乐高积木搭建一个窗口呢？可能有的积木就这样看起来像框架，如果你把四个这样的积木组装起来，就会获得一个漂亮的窗户。这些就是我们的元素。它们是块的一部分，它们对于建块必不可少。但是，在块外面的时候，它们便无用武之地。
命名：块名+ __ +元素名：.block__element示例：.postauthor、.postdate、.post__text修饰符
现在窗户已经建好了，但是你可能想要一个绿帽色或一个小窗户。这些我们称之为修饰符。它们是块或元素上的标志，它们用来变化行为，外貌等等。
命名：块名称或元素名称+ -- +修饰符名称：.block__element--修饰符，.块--修饰符示例：.post--important，.post__btn--disabled小心事项
在使用 BEM 的时候，你可以用且就只能用类来命名。不可以用 ID，不可以用标签。就只能用类。块和元素可以嵌入很多块和元素，但是它们一定是完整独立的。请记住：独立。所以如果你想将把一个按钮放在标题下的话，就不要在按钮上加边距，不然按钮就会与标题绑定。请改用工具类。是的，你的 html 文件会超负荷，但是不用担心，与 BEM 弄来的好处相比，这其实只是个小小的缺点。示例
以下是一个学习。你可以去你最热爱或经常在用的网址，之后跟着想想就这样看哪些是块、元素和修饰符。
比如，以下是我想象中的 Google 商店：
现在认真想想哪些地方可以改进。与往常一样，你一定自己查询搜索、实验和构件，以便更好地满足你的要求。
融会贯通，下面的示例演示了 BEM 的功能（）。
团队 CSS 文件：7-1模式现在让我们来讲解怎么样团队 CSS 文件。这种部分可以真正帮助你提升事情效率，并帮助你马上寻找需要改写的 CSS 代码。
为此，让我们知道一下 7-1 模式。是不是从没有听过这种模式。
首先你一定遵守以下两条规则：
将任何内容分别编辑入7个不一样的文件夹中。将它们全部导入位置在于根级其他 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 个文件夹了。
之后跟着，你有两个选择：
你可以根据7-1模式团队CSS代码，那么你需要留下abstracts、components、layout 和 base 文件夹。你想将任何的分块文件和 mail.css 放在一个大文件夹内，那么你会获得如下结构：sass/
_animations.scss
_base.scss
_buttons.scss
_header.scss
_variables.scss
main.scss
但哪些不接受scss文件的浏览器该怎么办呢？这是我们的末尾一步，我们现在就来学习怎么样将SCSS编译为CSS。
从 SCSS 到 CSS首先，你需要 Node.js 和 NPM（或 Yarn）。
我们将使用一个名为 node-sass 的包，它可以让我们将 .scss 文件编译为 .css 文件。
它的 CLI（命令行窗口）相当容易使用：
node-sass input output [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.html
mkdir -p sass/{abstracts,base,components,layout} css
cd 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 标签内：!DOCTYPE html
html lang=”en”
head
meta charset=”UTF-8"
meta name=”viewport” content=”width=device-width, initial-scale=1.0"
meta ”
link rel=”stylesheet” href=”css/style.css”
titleMy app/title
/head
body
h1 class=”heading”My app/h1
/body
/html
之后跟着就可以了，你准备好了！你可以在编程的时候运行npm run watch，并在浏览器中打开index.html文件。如果你想缩小CSS，只需运行npm run build。
补充添加24小时从头开始加载
你可能渴望添加24小时从头开始加载以提升事情效率，而不用手动从头开始加载本地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，并使用这些值（规则中。
事实上，在构建网址时，你可能会使用有的并非任何浏览器都完整接受的新功能。因此，提供商方案可以提供对这些功能的接受。
以下是一个示例：
-webkit-animation-name: myAnimation;
-moz-animation-name: myAnimation;
-ms-animation-name: myAnimation;
这其实就是为什么我们需要全自动前缀来帮助我们的CSS代码获取浏览器的兼容，而不用增加特外的杂乱性。
那么我们怎么样用更聪慧地构建CSS呢？
将任何的SCSS文件编译成一个主CSS文件。使用全自动前缀为CSS文件添加前缀。压缩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 代码了。
为了帮助同伴们更加好的学习Python，技术学派整理了Python的有关学习视频及学习路线图。
领取方法关注“技术学派”后，评论转发文章，私信回复：Python学习
相似站点
