Stylus 实践

挺长时间没写过干货了。这两天写点儿技术类的东西好了~

实践

秉着谦虚的态度,没有加上”最佳”两个字。然而我觉得在中小型项目中,这些实践还是很棒的

目录结构

目录结构非常重要。

分解的细一点,对后期的维护和理解很有帮助

比如这样

|--src
|--styles
|--index.styl
|--normalize.styl
|--variable.styl
|--global.styl
|--form.styl
|--button.styl
|--table.styl
|--animate.styl
|--modal.styl
|--alert.styl
|--helper.styl
|--others.styl
|--components
|--header.styl
|--footer.styl
|--others.styl

这样,这个项目的样式文件按照功能分开了。只需要在引入一个index.styl编译出来就可以了。

index.styl文件不做任何事情,只是引入所有的文件。

normalize.styl初始化样式,在index.styl中第一个引入。

variable.styl变量,全局要使用的变量被写在这里。比如字体样式,颜色,图片大小

global.styl全局样式,一般都是body元素的样式。比如font-size会影响到rem的大小嘛,写在这里。然后是a标签的样式什么的。一般第二个引入。

form.styl表单样式,其他的省略了。

animate.styl 动画样式,一般用Vue会有转场动画,把动画样式写在这里面好控制一些。

modal.styl 其实这个模块不应该写在这里,但是考虑到做出来代码量其实不少,而且要给各种不同的变种。所以还是写在这里。

alert.styl 理由同上

helper.styl 一些辅助函数,用以给其他模块@import的。

others.styl 其他,可以做一些媒体查询(media query)什么的

components/ 这是文件夹,如果是vue就不用做这么个文件夹,可以直接写文件里。React还有css in js这样的东西。这个文件是为了给其他不使用框架的情景使用的。

上面借鉴了Bootstrap的目录划分

index.styl

上面说了,这个文件主要是引入其他的文件。而引入顺序是非常重要的。

@require './normalize'
@require './global'
// 引入其他全局文件

// 然后引入 components/ 下的样式

我想都明白

helper.styl

这里主要写一些辅助的函数,类什么的。比如总结出的clear fixed什么的。还有媒体查询。我一般写flex的helper函数

@import './variable'

flex-design()
display flex
flex 1
flex-center()
justify-content center
align-items center

只要需要的时候引入一下就可以用了。特别好用。常用函数都可以总结一下放在这里

Flex

Flex其实兼容性还是可以的。Android 4.4就全都支持了(逃…)。PC端兼容性到IE 10呢!

而且flex布局其实非常的爽。想想一般情况下如何居中对齐。大概是用line-heigh吧。然而又和父元素高度耦合了。

再想想如何适应屏幕折行。就像我这个博客站点的导航条,你可以试试小屏幕和大屏幕的感觉,就是用了flex布局的wrap属性。

扔掉旧浏览器,开开心心的迎接新规范吧~

编码规范

无论如何先安利Vue。我一直觉得这样写着比jsx要开心很多

vue

好了,说说我自己的stylus编码规范

No;

没有分号。分号有很多很多缺点,少打一个分号,一辈子下来能省出来一两年也说不定。而且,分号特别的丑!特别的丑!

看看Vue源码,根本不存在分号。读起来赏心悦目

最后,听说不写分号的jj长5cm(严肃脸)

尽量不写:

理由同上!不写分号。当然,不得不写的时候还是要写一下的

至多四层嵌套

浏览器对CSS文件的解析是从右至左的。一般情况下四层以内影响不大。然而大于四层就会产生性能问题。所以建议至多四层嵌套。

BEM

命名尽量使用BEM规范。Block, Element, Modifier,类名像是这样的alert--warning

带来的好处是易于维护,易于理解,易于协作

@import './variable'

.alert
width 100%
border-radius .5rem
&--warning
background-color $alert-warn-bg-color
color $alert-warn-font-color
&--info
background-color $alert-info-bg-color
color $alert-info-font-color

是不是很清晰。

这里有一些资料,需要的可以看看