7、优化CSS：从代码转换到BEM实践

优化CSS：从代码转换到BEM实践

1. 重新审视代码转换

当接手一个使用纯原生CSS的网站，并希望借助PostCSS来维护代码时，很多人会想到利用一些网站将纯CSS转换为SASS。毕竟，PostCSS和SASS代码有一定的相似性。转换过程看似简单：将转换结果提取到文本文件，保存后进行SASS编译，再把新编译的CSS放到服务器的相应位置，网站就能使用SASS了。然而，这样做并不一定能得到简洁高效的代码。

以Tutorial5中的CSS样式表为例，特别是大约第132行开始的 .nav-panel 样式规则。将第114到197行复制到http://css2sass.herokuapp.com/ 进行转换，转换后的代码并不美观，有很大的改进空间。

2. 更新代码

使用CSS到SASS转换器时，要明确转换后的代码并非最终版本，它只是转换过程的第一步。例如，对比Nikolay代码编译版本中第234到239行的代码和经过调整后的代码，可以发现：现代浏览器大多不需要供应商前缀，原代码存在较高的CSS特异性，尤其是在代码嵌套时更为明显。

为了改进代码，可以用 .nav-panel ul li 直接替换 .nav-panel ul .nav-btn ，避免使用第二个类来识别元素进行样式设置。同时，应拆分源文件中的大型嵌套块，因为大嵌套块会影响代码的可读性、可维护性和性能。甚至可以考虑移除开头的 .nav-panel ，这不仅能让代码更易读，还能减少CSS特异性问题。

3. 转向BEM

BEM（