如何才能写出更优秀的CSS代码

让我们开门见山：编编辑优质的 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， ba.scss，_variables.scss 等。

至于导入，可以使用 @import 指令。比如，这样做：

// _animations.scss

@keyframes appear {

0% {

opacity: 0;

100% {

opacity: 1;

// header.scss

@import “animations”;

h1 {

animation: appear 0.5s ea-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、.ur-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 个文件夹：

ba：你可以将任何的样板代码放入该文件夹中。对于这里的样板：每当开始一个新项目时，你需要编辑的任何CSS代码。比如：排版规则、动作漫画、工具程序（对于工具程序，我指的是margin-right-large、text-center、…等类）等等。components：这里指组件。这种文件夹包含任何用来构建页面的组件，比如按钮、表单、滑块、弹出窗口等等。layout：页面不一样部分用到的布局，也就是说：页眉、页脚、导航、分区、你自己的网格等等。pages：页面。一些页面可能有特殊的样式，与一般的处理方法不一样。那么你可以将它放入该文件夹。themes：主题。如果你的应用中有不一样的主题（黑暗模式、管理员等等），那么可以将它们放入该文件夹。abstracts：抽象。你可以将任何函数和变量与混入（mixin）放在这里。简而言之，就是你任何的帮手。vendors：外部资源。应用或项目怎么可能没有外部的库呢？你可以将任何不依赖于你的文件都放入该文件夹。比如，你可以放入Font Awesome文件、Bootstrap和很多类似的东西。主文件

你需要将以上任何内容导入到该文件中。

@import abstracts/variables;

@import abstracts/functions;

@import ba/ret;

@import ba/typography;

@import ba/utilities;

@import components/button;

@import components/form;

@import components/ur-navigation;

@import layout/header;

@import layout/footer;

是不是认为以上内容有那么一点太多，一时非常难支持。这种架构适合于大型项目，而非小项目。下面我们讲解一种更加的适合小项目的做法。

首先，你不需要 vendors 文件夹。可以将任何外部 CSS 代码放在头部的link标签内。接下来，如果你的应用只有一个主题的话，可以省略 themes 文件夹。末尾，你可能不会有超级多的页面特殊的风味，所以也 pages 也没必须。好了，现在只剩下 4 个文件夹了。

之后跟着，你有两个选择：

你可以根据7-1模式团队CSS代码，那么你需要留下abstracts、components、layout 和 ba 文件夹。你想将任何的分块文件和 mail.css 放在一个大文件夹内，那么你会获得如下结构：sass/

_animations.scss

_ba.scss

_buttons.scss

_header.scss

_variables.scss

main.scss

但7 14是什么情人节 哪些不接受scss文件的浏览器该怎么办呢？这是我们的末尾一步，我们现在就来学习怎么样将SCSS编译为CSS。

从 SCSS 到 CSS首先，你需要 Node.js 和 NPM（或 Yarn）。

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

它的 CLI（命令行窗口）相当容易使用：

node-sass input out中央一套开学第一课put [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,ba,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 compresd”

将包含编译好的 CSS 文件的连接加入到 index.html 文件的 head 标签内：!DOCTYPE html

html lang=”en”

head

meta chart=”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-rver应用包：npm install -g live-rver。小心：它是一个全局包。将npm-run-all添加到项目依赖项中：npm install npm-run-all –save-dev：有了它我们就可以同一时间运行多个脚本。将这些脚本添加到package.json：{

“scripts”: {

“start”: “npm-run-all –parallel liverver watch”,

“liverver”: “live-rver”,

“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 liverver watch”,

“liverver”: “live-rver”,

“watch”: “node-sass sass/main.scss css/style.css -w”,

“compile”: “node-sass sass/main.scss css/style.css”,

“prefix”: “postcss css/style.css –u autoprefixer -o css/style.css”,

“compress”: “node-sass css/style.css css/style.css –output-style compresd”,

“build”: “npm-run-all compile prefix compress”

现在当你运行 npm run build 时，可以生成经历过压缩的 CSS 代码，并且添加了提供商前缀！

白菜根现在，你可以开始编编辑有着可保护性、模块化和可重用性的 CSS 代码了。

为了帮助同伴们更加好的学习Python，技术学派整理了Python的有关学习视频及学习路线图。

领取方法关注“技术学派”后，评论转发文章，私信回复：Python学习