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 的浮动

 

思路大概就这样吧~~~实践出真知，我要堆码了···