网页项目中,样式感染是很让人头疼的一件事。

纠错:防止样式感染并不是LESS的特有功能,可以使用react-css-modules防止样式感染。详情移步:https://maomao.ink/index.php/IT/997.html

什么是样式感染?

样式感染是指不同页面中拥有同一样式名的css样式,并且不同文件对该样式进行不同操作,导致两个页面的样式互相影响的现象。

通常,样式出了问题并没有错误信息可供参考,但是跟你想要的结果千差万别。

在多个页面使用同一个样式文件,且class也一致时,理论上应该能够复用同一个样式文件。但是,如果你css立面用了flex布局,那结果就不能保证了。

我的亲身经历:多个html页面使用不同的css文件,页面内使用了大量flex布局,多个页面的css文件内的class名称具有相同的名字。最后导致在修改B页面的样式时,影响到A页面的样式。

我纳闷,为何我修改自己的css样式会引起别的以及写好的页面?(新手表示一度自我怀疑是flex没学好。)

最后得出结论,css虽然可以有多个文件,但是最终会解析成一个大文件,这里面包含所有的css样式。

如果不同文件里面存在同名样式,则后面的样式会覆盖原来的样式。

因此导致我之前的错误。

最后,我将不同文件的css样式名都取了唯一的名字,之前的问题迎刃而解。

结论:即使是不同文件名下的样式,也需要保证样式名的唯一,否则存在样式感染。

但是现实开发中,一个项目是由多个人共同开发的。

如何保证自己起的名字与别人的完全不相同呢?

这时候就有一个很棒的工具:LESS CSS 框架

LESS CSS 框架

这个工具最大的作用是防止样式感染,它可以让你按照写js代码的方式写css样式。不需要太长的样式名称,只要是按照布局层次结构,最后编译时,会通生成跟层级有关的class名称。这样一来,很大程度上减少了花在取class名字的精力,也大大减少了样式感染的几率。

除此之外,Less还有其他好用的功能,比如共用样式、样式复用等。可以减少开发者的代码量,重复的代码都交给编译器来做。

网上有很好的教程:
Less样式表安装教程:http://lesscss.org/usage/
Less样式表教程:https://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/

Less的学习成本很低,上面一篇教程几乎可以涵盖所有功能。

为了尊重原创,我只贴链接,不贴内容,感兴趣可以移步学习。

补充:

使用flex布局时,为了避免样式感染,最好使用:

  display: inline-flex;

这样就只针对你当前布局和子控件起作用,而不会影响到兄弟布局甚至父布局。