如何能更好的写出CSS？分享web前端大佬资料总结 _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 代码。

注意：这篇文章不是关于如何设计漂亮的应用。本文是关于如何写出便于维护的 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· 。