看我如何能又快又好的写出CSS？分享web前端大佬资料总结

让我们开门见山：编写优秀的 CSS 代码是件十分痛苦的事情。很多开发人员都不想做 CSS 开发。你让我干什么都行，但是 CSS 还是算了吧。

前端560集视频学习资料需要加扣扣裙：939106847领取

在我创建应用的时候，从来都无法从 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.scs