作为一名合格的前端开发,稳固可靠的css代码已经是一个必备的基础技能,从一开始的css代码累赘,直到sass/less等css扩展语言诞生,css也开启了不一样的道路,此篇文章适合对sass/less等css拓展语言的了解并且习惯使用面向过程的编写方式的开发者学习,以下以sass为例。
sass是一款css的辅助工具,主要以编程的开发方式应用到css中去,来提高css代码的管理和开发。
在sass/less等语言诞生之前,开发者总会遇到一些问题,css上的一系列问题,比如,写两个按钮的类名,他们具有共同的特点,字体颜色,边框,间距等等,有些人会这样写:
.btn-theme{
border: 1px solid green;
padding: 12px;
width: 100px;
}
.btn-small{
border: 1px solid green;
padding: 12px;
width: 80px;
}
有些人会这样写:
.btn-theme, .btn-small{
border: 1px solid green;
padding: 12px;
}
.btn-theme{
width: 100px;
}
.btn-small{
width: 80px;
}
然而,无论对于哪一种,都存在着的弊端,我希望我们有自己的原则,就是在不写重复代码的同时尽量的不去触碰共同的特点,假如用sass,完全可以继承的方式这样写:
.btn{
border: 1px solid green;
padding: 12px;
}
.btn-theme{
@extend .btn
width: 100px;
}
.btn-small{
@extend .btn
width: 80px;
}
这样的好处是什么呢?我们可以完全的独立开一个基类,在编写其他按钮样式的时候,都可以在不影响其他按钮的同时高效的开发,在一个项目开发中,任何的html元素,如button,input,image,checkbox,你都可以编写一个适合ui的基类,从而减少今后带来的不必要麻烦。例如,现在给我一个项目,开始编写css,首先我可能会这样做:
/* base.scss */
/* button */
.base_button{
padding: 12px;
border: 1px solid red;
}
/* input */
.base_input{
padding: 0 12px;
line-height: 30px;
}
/* image */
.base_mage{
...
}
/* checkbox */
.base_checkbox{
...
}
然后我们把我们的设计稿切块,能切成哪些块呢?这时候应该普及一个知识点,BEM:它是由Yandex团队提出的一种CSS Class 命名方法,简单来说,就是 模块-元素-修饰符 ,因此我们可以拆分的块就很明确:
切完块之后,分元素,拿弹窗块举个例子,可以围绕html的语义化拆分为 header-body-footer ,因此,一个完整弹窗样式基本搭建完成:
.popver__header{}
.popver__body{}
.popver__footer{}
上面使用两个下划线,我希望他也是一个特殊的类,不直接使用,只用作继承,外面可以加多一层,实现对拆分块的引用
/* popver.scss */
.popver_container{
.popver_header{
@extentd .popver__header
}
.popver_body{
@extentd .popver__body
}
.popver_footer{
@extentd .popver__footer
}
}
这时候我们会发现,我们之前写的基类呢?作用在哪里?在一个 body 里面,我们需要插入很多的html元素,此时,就可以把基类继承在body里面各自对应的元素里,并同时加入特殊点,例如:
.popver__input{
width: 200px;
color: red;
@extentd base_input
}
.popver_body{
@extentd .popver__input
@extentd .popver__body
}
这样,我们基本完成了一个项目,对每一个基类的编写,再到模块的拆分,再到特殊类的编写、继承,以及对基类的继承。
以上,我们基本实现了一个项目css基础设计和搭建,刚刚我们只是讲了BEM当中的B-E,我们应该如何把M利用起来,此时,最简单的方式就是借用sass的编程特性,举个例子:
在上面的弹窗中,body里面的input宽度可能是不可控的,即可能在不同的弹窗中会有不同的宽度,高度或则间距,这种我们就可以把它归为元素的修饰,因此,我们可以这样写:
/* 数组变量 */
$inputWidth: 200 300 400;
.popver__input{
width: 200px;
color: red;
@extentd base_input
}
.popver_body{
@each $number in ($inputWidth){
.popver_input_#{$number}{
@extentd .popver_input
width: $number + px;
}
}
@extentd .popver__body
}
这样,我们就实现了popver_input_200,popver_input_300,popver_input_400类名的编写,我们只需要在变量名inputWidth后增加一个值即可,对高效开发的实现同时具备一定的语义化。
一个完整的项目的css基础搭建从设计到完成,主要的目的在于思考:如何从维护性,效率问题上解决问题。然而,更多的开发技巧,应该从深入的学习sass/less开始,在项目开发中不断的去实践。