【React+Typescript+Antd】防止样式感染——LESS CSS 框架简介
网页项目中,样式感染是很让人头疼的一件事。
什么是样式感染?
样式感染是指不同页面中拥有同一样式名的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;
这样就只针对你当前布局和子控件起作用,而不会影响到兄弟布局甚至父布局。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Jmeter 常用函数(27)- 详解 __env
- 字节流---输入输出
- 常用方法(文件夹操作)
- 常用方法(文件名操作)
- 构建File对象
- 两个常用静态变量
- Spring MVC 整合 Servlet 3.0
- 初探 SpringBoot 自动装配
- 报错405:HTTP method GET is not supported by this URL
- 思科模拟器:网络安全实验
- Django入门:基于 Django 的 Web 页面开发
- 从零开始重新认识 Spring Framework
- 思科模拟器:高级交换实验
- ElasticSearch 基本的查询命令+集成 SpringBoot
- 数据库能力测试:SQL 语句改错