css 组织模式 命名
刚刚学习css的时候,css就是填属性嘛,没什么难的; 写着写着好吃力!好诡异!感觉不好维护~; 心里想 这css知识不够用吖,看来css没那么简单, 遇到问题上网看文章,虽然问题解决的但是,学得很零散。后来打算上网买点书看看,发些关于css的书籍一般都是有些年份的了,后来看来本《css揭秘》学到了不少东西,但主要是css3的内容,又后来发现张鑫旭前辈出了本《css世界》立马购之学之,看了两遍感觉醍醐灌顶,我的css世界观被刷新了几遍,可能和我css比较弱有关呵呵~ 感觉没问题了,写个项目来玩玩。但我写多几个组件的时候发现,这命名好像不太好,这好像不太好维护。是时候补充点什么了~~;
css很灵活,选择器也很多。实现相同的效果可以有多种实现方法。有个大佬说过这么一句话大概意思是:“我们能用什么,并不代表我们应该用什么”;
关于css的组织,类似于代码风格,并没有强制的要求,而且个人理解不同,应用场景不同,所以各有各的方法。
关键词:[嵌套,复用,沉余,维护];
css嵌套
说到css 不得不说less sass postcss 等工具。其中用的最多的功能应该是嵌套了。这不是一般的方便; 我以前就写这种代码的。
//----------------- html <ul class="list"> <li class="item"><a href="">1</a></li> <li class="item"><a href="">2</a></li> </ul> //------------------less .list{ >.item{ border: 1px solid; >a{ color: red; } } }
从效果上讲并没有任何问题,书写很方便。主流建议不超过4层
问题1:使用的元素选择器
css渲染从右到左开始的。渲染 .list>.item>a 的过程:1.遍历页面上所有的a标签=》 2.遍历.item =》3.遍历.list
a、div、li、都是整个网页中最多的元素。如果这样的选择器和原生都比较多,就有有比较明显的性能差别。
修改修改: 为a添加class 并 减小了一层嵌套
//--------------less .list{ >.item{ border: 1px solid; } .link{ color: red; } } //---------------css .list>.item{} .lilst .link{}
这性能好多了。
命名空间
如果要更好的性能可以不使用嵌套。
//--------------html <ul class="list"> <li class="list_item"><a class="list_link" href="">1</a></li> </ul> //-----------css .list_item{} .list_link{}
直接一个class 选择器,渲染速度有快了。而且从html的机构中解耦出来,更加的稳定。
缺点:如果不使用简写,class名会比较长。正价了html的体积。代码的复用率不太好,会有沉余;
css复用,抽离属性
有的称为原子类;
比如bootstrap 和浮动和清理浮动的类。如果,整页面的清理浮动类都使用.clear 的类,那么整个页面清理浮动只需要一条css。
比如Tailwind CSS 框架。
将公用的属性,按属性的起class名,为元素添加多个class 名来添加样式
优点:
1.没有命名空间的问题
2.复用好,如何安排得当,写10个页面和100页面也只需要哪些样式;
缺点:
1.多类名,渲染会慢那么一点
2.要在html页面上维护
如果整个页面都使用这种方法,维护性确实比较堪忧。但是这种模式也是很有利用价值的
1.抽离特殊的样式,经典案例就是字体图标,根据字体图标设定好class 直接用,使用方便,维护性好;
2.提取常用却一般不需要维护的样式:经典例子 bootstrap 的浮动
思路大概就这样吧~~~实践出真知,我要堆码了···