什么情况下重构
结合代码的上下文重构代码会更加的容易。所以,如果是修复bug,或者开发新的功能时用到了已有的代码,觉得有可变动的空间,能更好的为项目所用,重构是最好的选择。顺带的重构不至于会把项目搞乱,他人也可以从你重构的代码中受益,且不断的重构代码,也能提升你的代码质量。
然而如果碰到一段有很多依赖的代码,也许你就得慎重考虑下是否要对其进行重构。重构有很多依赖的代码,就像抽衣服上的线:抽得越多,散开得越多。对于这类代码,如果时间很紧,先把工作完成也许更合适。然后再匀出些时间,回头审视并重构代码。
高性能样式表
级联和权重
重构样式表,前提得先是你的改动符合优秀框架的特点。要对浏览器的表现形式 级联有深刻的理解。
• style
• id选择器
• class类选择器
• 类型选择器
• !important
要扎实的理解上面样式的层叠样式覆盖关系,懂得计算层级特指度(权重)。
本文所说的特指度(specificity): 特指度表示一个css选择器表达式的重要程度,可以通过一个公式来计算出一个数值,数越大,越重要。
优质的CSS
1、保持选择器的简单;浏览器是从右向左匹配选择器的,所以避免层级过深。
/* bad */
div nav ul li a
/* good */
div a
复制代码
2、分离CSS和JS;由于JS和CSS两者都依赖于HTML元素的类和ID。所以应避免两者的混乱,区别两者的职能。JS中使用的类和ID,不应该在用来为元素添加样式。
<div class="chenrf J_name"></div>
document.querySelector('.J_name')
复制代码
3、合理的利用盒子模型;盒子模型有两属性:content-box、border-box,区别于宽度高度的计算方式,合理的选择,适用于当下场景,能让你的开发节奏加快。
测试
测试CSS有难度,因为不同的平台、屏幕尺寸和设备都需要测试。全面测试的对CSS代码的改动进行测试会花费较长的时间,并且需要用到多种不同的工具。
代码组织和重构策略
顺序组织CSS代码
1.通用样式,消除不同浏览器之间的不一致性
2.基础样式,设定网站所有元素的基本样式,margin、padding、line-height等
3.组件和容器样式,以基础样式为基础进行,可复用的。样式的调整都交由父容器处理。
4.结构化样式,用来创建网站的布局,内再包含组件和容器样式
5.功能性样式,最精确的样式,针对特定的效果,比如js使用所添加的 !important 类
6.浏览器特定样式;可选,针对特定浏览器生效的样式,比如IE7: *diaplay: inline
多个文件还是大文件
用户访问包含CSS文件的网站时,浏览器首先要请求CSS文件,然后将其下载下来,在解析他们并用用恰当的样式。因此,我们需要尽可能的是其需要下载的CSS文件缩小。
• 在小型项目中用一个CSS文件完全可以接受,操作起来也简单。
• 在大型项目中拆分为多个文件,这样后期代码维护比较便捷
• 多个文件下的大型项目,可以使用工具在上线前,或者自动化工具把其页面需要的样式CSS文件,拼接合并为一个CSS文件
策略
1、删除僵尸代码。既然重构就尽可能的把一些存在但没有使用的代码剔除
2、分离CSS和JS。跟上面讲的一样,为元素添加样式的类和ID不应该在JS中用做选择器
3、删除冗余的ID。页面中的ID具有唯一性,且特指度最高,故重构时应降低更精确选择器的特指度。
4、定义可复用的组件。把网站中一些常用的样式接口组件化,精简重复的CSS
5、隔离面相特定的浏览器样式。浏览器之间存在差异,因此我们会在CSS中使用一些 “hack” 针对特定浏览器做调整。
<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]-->
复制代码
经常策略性针对的衡量重构,以便能够更小更可控的模块发布你的代码改动。