如何更好的编写CSS

时间:2022-01-12 来源:未知网络 作者:996建站网

原文:How to get better at writing CSS

作者:Thomas Lombart

译者:JeLewine

废话不多说,咱们就开门见山吧:想写出优质的CSS代码将会是非常痛苦的。很多开发者都不想做CSS开发。我可以做你想做的一切,但是,除了CSS

当我在构建应用时,CSS是我挺讨厌的部分。但你无法摆脱它,对吧?我的意思是,正是因为我们如此的专注于用户体验和设计,所以现在我们才不能跳过这一部分。

在开始一个项目时,一切都很正常。你有一些CSS选择器:.title input #app,这看起来非常的简单。

但是当你的应用变得越来越大时,它就开始变的越来越糟糕了。你对CSS选择器感到困惑。你发现你写的像div#app .list li.item a诸如此类的东西,自己在一遍又一遍地在重复相同的代码。你把所有代码都放在文件末尾,因为你根本就不在乎。CSS像一坨shit。然后你要狗带了:500行的CSS完全没法维护。

我今天有一个小目标:让你更好的去编写CSS。我想让你回首看看自己的旧项目并发出感慨:oh,boy,我怎么能写这么一坨东西?

好吧,你可能会想,你说的有道理。但是CSS框架呢?这就是他们的用法,不是吗?这就是我们编写好CSS代码的方法。

是的没错,不过这样还是会有一些缺点:

  • 它往往会带来平凡的设计
  • 想要定制或跳出CSS框架会变的困难
  • 在使用它们之前,你必须先学习它们

不过毕竟,你已经开始在看这篇文章了。这一定是有原因的,不是吗?所以,不用多说了,让我们开始学习如何更好的编写CSS吧。

注意:这不是关于如何设计优雅应用程序的文章。它是关于学习如何编写和组织可维护的CSS代码的。

SCSS

在这篇文章里我将会用SCSS作为例子。

SCSS是一个CSS的预处理器。简单来说,它是一个CSS的超集:他为CSS添加了一些很酷的功能,例如变量,嵌套,导入和mixins。

我将先谈谈我们立即会使用到哪些功能。

变量

通过SCSS,你可以使用变量了。它带来的主要好处就是可复用性。我们假设你的应用有一组颜色。你的主色调是蓝色。

所以你的应用到处都是蓝色:按钮的背景颜色,标题的颜色,链接。蓝色无处不在。

突然之间,你不喜欢蓝色。你更喜欢绿色了。

  • 没有变量:更改所有使用了蓝色的地方
  • 使用变量:只需更改变量
// 声明变量
$primary-color: #0099ff;
// 引入变量
h1 {
  color: $primary-color;
}

如何更好的编写CSS插图

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序