锐客网

  1. 首页 > 睿知 > >

如何才能写出更优秀的CSS代码-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;
【如何才能写出更优秀的CSS代码-css代码教程】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（块元素修饰符）的缩编辑 。

推荐阅读


上一篇：学习强国如何订阅隐藏的订阅号？学习强国订阅隐藏订阅号的方法步骤

下一篇：9岁,150度/225度 豪雅新乐学镜片,效果有了解的吗？