再谈css

先说两句闲话,为什么叫再谈呢?因为以前有谈过,请看这里初谈怎样更好的去规划CSS

时间差不多是一年前,那个时候还没有换工作,公司就我一个前端,负责一个项目的所有前端相关,当然,说是这样说,我是没有能力去顾及那么多的,自己懂的或者意识到的东西本身就有限,只是通过一整个项目的折腾,总会意识到一些问题,甚至有时候代码写得自己都忍无可忍,有痛就有领悟,自然就能总结出一些东西,就有了那篇初谈。当时写完之后蛮有成就感的,现在看来还是有很多不足,因为是初谈,为照顾一些初学者,包含了多一些基础的东西,一年过去了,前段时间在团队内部也做了一次css的分享,借此机会再谈谈吧,虽然依旧可能有很多不足~

选择器

这是css的永恒话题,也是核心话题。但这里如果罗列出来就没意思了,不如大家去看文档~

元素、类、id、子选择器、后代选择器、兄弟选择器、属性选择器、伪类选择器、伪元素选择器、群组选择器

在这一堆选择器中,该如何选择呢?老生常谈的东西咱就不多说了,说说在项目中的有益做法。

首先要明确的是,为什么要用?它是css和html之间沟通的桥梁。 既然跟html有关,那么就可以谈谈html,又和什么有关呢?和我们要做的页面有关,好的,那就到了视觉稿。我用一个词来形容看视觉稿的感觉——“庖丁解牛”。什么意思呢?

它可能包含以下部分:顶部、头部、导航、侧边栏、banner区、列表、底部,以及其他大的区块。 至少到这里我们能看到什么呢?我们的css能大致划分多少大块,能把“宽度、居中、浮动、文本位置、字体类型、颜色”等剥离出来。

那么可以再细看,继续找共性,比如“圆角、边框、背景、阴影”等等。

下面找不同,被我们剥离出来的东西,在哪些区块是有特殊性的?

这样做的好处是什么?——模块化,增强复用性。我们不需要每个地方用一套独立的样式,共同的规则书写很多遍。可以把共同的部分写成一个公共类,特殊的规则再另外定义,此所谓“基类 扩展类 实例类”。

好的,根据页面结构,我们已经成功的把它们拆解了,下面要做好什么呢?——解耦。

为什么要这么做,首先html的标签是有限的,而且我们要尽量语义化,那么一个页面里面用到相同标签的地方可能就很多,比如h1~h6、ul、p、span等等,如果我们直接用元素选择器来定义规则:

1、 如果我们觉得那个元素可能不合适呢,要换掉,css也要改了。

2、 如果要加入一个新的内容,用的是同一种标签却是不同的样式呢?这个时候要重新定义一条规则,或者被迫使用其他的选择器,也许能够暂时达到目的,但灵活性是很差的,万一又有变化,就不起作用了,这就是为什么常常提到可维护性。

另外,不使用元素选择器也会增加代码的可读性,我们为划分好的不同模块采用不同的命名,增强可读性的前提下,也很好的避免了冲突。

好,接着说,很多人会谈到嵌套的问题,一般说法是最好不要多于三层或者四层,意义在于哪里呢?这得从css的解析方式说起,它是从最右端往左进行解析的,层过多自然会耗掉更多解析时间,这也同样跟上面说的那个吻合,不仅仅是因为解耦才不使用元素选择器,如果使用元素选择器,特别是在最右一层的话,它会遍历完整个页面中的同类元素,再往上寻找,这显然造成了本来可以避免的问题。

还有哪些css2.1的选择器可以发挥妙用呢?

比如:兄弟选择器“+/~”、伪类选择器’:selector’、伪元素选择器’::selector’、群组选择器”.a.b.c” 相比css2.1,css3新加入的东西的确是让人兴奋的,特别是一些属性选择器和一些伪类、伪元素选择器,能够让我们更加灵活的去控制页面样式,减少给html打的补丁,甚至是限制用户行为,比如selection、resize等。

Css4选择器?是的,它会在css3的基础之上继续加强,具体不细谈。给出两个链接大家可以去看看。

css4-selectors

w3 selectors-4

以上结合页面的规划,谈了一下,用什么选择器和怎么用,代码怎么组织的问题。

再简单谈谈工具、框架和一些需要注意的点:

1、 用工具可以做什么

简而言之,提高工作效率,包括:

预处理工具less、sass、stylus,编程的方式来写css,有变量、嵌套、函数、条件、算术、词法作用域等等

LessSass
sassguideStylus

更多工具: http://www.oschina.net/news/22745/8-css-preprocessors-speed

后处理工具Autoprefixer、Css Grace

用处

  • 不改变css原生写法

  • IE hack处理兼容

  • 添加css3前缀

  • 检查错误(哪些误用?例如:float: left/right 或者 position: absolute 后还写上 display: block;更多请戳哪些误用

CSS Grace

Autoprefixer

还有代码格式化工具、代码压缩工具等等,都是能够帮助我们写出更优雅的代码。

谈到工具了,要说的一点是,我们做技术的要敢于、乐于尝试,现在还有很多人习惯于写css,而不去用这些工具,不觉得它们有什么好处,反而觉得学习起来麻烦,还有些朋友,接触一下,知道有变量,可嵌套,其他的觉得太复杂没做深入了解,就直接选择放弃了,前端技术和工具层出不穷,如果是这样一个状态的话,无论是对自己技术的提升,工作方式的优化等等,都是不利的。其实没有想象那么复杂,好处却是大大的。

2、 框架的使用

或许每个人都能脱口而出的一个是bootstrap。当然,还有其他的框架,我并不是给它打广告。

为什么要用呢?首先还是节省了时间,不再做重复劳动,然后,它是做过了各种的测试,集大家的力量,在项目中经过考验的,对很多设备和浏览器都适用,并且有它的一套UI设计在里面,这样就可以为我们省去了很多的劳动。

3、 需要注意的点

a、 文件个数和大小,有一个文件就会向服务器发送一个请求,显然,不宜过多,一般以不超过四个为宜,所以,有时候我们在开发过程中可能用到多个文件,发布的时候会进行合并和压缩,就是这个道理。

b、 文件是否有加载的必要?这种情况常见于需要兼容低版本IE,很多人是直接写css hack在文件里面,如果项目比较大,需要用到的代码文件比较多,那显然没有必要为其他浏览器以及高版本浏览器去加载兼容代码。一般倾向于写条件判断语句来选择性加载。

不过可能会遇到问题,比如IE10不识别,这篇文章里给出了解决方案,大家可以参考一下IE10不识别的解决方案

Css的出轨

大家都知道,随着css3的肆虐,很多效果我们不需要用ps来做了,比如border-radius、box-shadow、opacity、filter、text-fill-color、text-stroke、box-reflect等,这让我们只使用代码就能写出很多好看的效果,也增加了灵活性。

样式性标签淡出历史舞台,如:居中、加粗。

动效标签css替代,如闪烁、跑马灯。

联姻js动起来transform、transition、animation

既然css能做的事情越来越多,越来越灵活,那么不得不说的一个话题就是“纯css”实现,很多年了,高频中枪的有:二级导航、tab切换、手风琴、轮播图等。

那么纯css有什么好处?首先你不会js的话,那肯定是有好处的,这个不说,然后就是,它可能更容易控制,代码文件会更小。当然,凡事皆需根据实际情况权衡,大家自己思考。

“无所不能”的未来

为什么说它无所不能,先来看看布局:

适应多终端

媒体查询Media query、流式Flow、伸缩盒Flexbox、计算布局calc、网格布局Grid、多栏布局Multi columns等等;

另外,因为一些属性的出现,页面中的元素打破了总是方方正正的形象。

几个戴表:transform、border-radius、 multiple backgrounds、shapes、appearance、@font-face等等

形状可以是任意的。字体可以是多样的。 很多东西都不再拘泥于单调的形式,这给我们带来了无限可能,就看你的思维是否被局限住!~

听说还有pointer-events;will-change;

还有变量,好吧,说high了。不管它们最终有无,最终能做些什么事情,css都还在向前推进着,或者新的选择器,或者新的属性、属性值。我们能做的,就只有期待!~

这次就先谈到这里吧,人的认识、思想和方法论都会随着时间的推移,经历的增多发生一些微妙的变化。相信我还会再谈的,那下次见?~

欢迎订阅我的微信公众号:前端周末

欢迎加入我的企鹅群:152128548