浅谈CSS重构样式表性能
什么情况下重构
结合代码的上下文重构代码会更加的容易。所以,如果是修复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]-->
复制代码
经常策略性针对的衡量重构,以便能够更小更可控的模块发布你的代码改动。
转载于:https://juejin.im/post/5b4daee751882569fd28655e
浅谈CSS重构样式表性能相关推荐
- css中字体下划线样式,css下划线 浅谈css自定义下划线
使用css样式对一段文字或一段文字中其中几个文字设置虚线效果的下划线如何实现?我们知道css字体下划线使用text-decoration样式实现,而虚线下划线则不能使用此css样式属性.要实现通过下边 ...
- html css 命名规范,浅谈css命名规则(新手必看)
头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left rig ...
- 浅谈CSS Modules以及CSS Modules在Vue.js上的使用
前言 在平常的开发或者学习中,我们可能会有意无意的接触到CSS Modules.那CSS Modules到底是什么呢?现在,我将带你走进CSS Modules,去了解它的始末.本文将从 什么是CSS ...
- Web前端之浅谈css
Web前端之浅谈CSS CSS 什么是CSS? CSS的三种引用方式 CSS常用选择器介绍 选择器权重 字体属性 文本属性 元素分类 display属性: 块状元素 行内元素 行内块元素 盒模型 内边 ...
- html 怪异模式,CSS_浅谈CSS编程中的怪异模式,怪异模式盒模型
今天学习了 - phpStudy...
浅谈CSS编程中的怪异模式 怪异模式盒模型 今天学习了一下css3的box-sizing属性,顺便又温习了一下css的盒模型,最后觉得有必要对盒模型做一个全面整理. 先不考虑css3的情况,盒模型一共 ...
- css inport作用,浅谈css和@import区别及用法详解
下面小编就为大家带来一篇浅谈css和@import区别及用法.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 css和@import都是调用外部样式表的方法. 一.用法 ...
- php css定位到图片上,CSS_浅谈css中图片定位之所有图标放在一张图上,如今做网页为了使网站丰富多 - phpStudy...
浅谈css中图片定位之所有图标放在一张图上 如今做网页为了使网站丰富多彩,富于表现力,往往需要应用大量的图片/图标.如何处理这些图片,使其尽量不影响网页载入,解析等速度,是一个不大不小的问题.如果你的 ...
- 浅谈Spark应用程序的性能调优
浅谈Spark应用程序的性能调优 :http://geek.csdn.net/news/detail/51819 下面列出的这些API会导致Shuffle操作,是数据倾斜可能发生的关键点所在 1. ...
- react 组件添加样式_如何通过4个简单的步骤将CSS模块样式表添加到React组件
react 组件添加样式 Let's say you'd like to add a CSS Modules Stylesheet to your project. You can find Crea ...
最新文章
- 向访客和爬虫显示不同的内容
- R语言进行缺失值填充(Filling in missing values):使用R原生方法、data.table、dplyr等方案
- XenDesktop vDisk更新
- php 现货 结算算法,PHP算法逻辑:如何计算购买量?
- Java 详解 JVM 工作原理和流程
- 图片浏览器每次只能打开一张图片_导出阿里国际站图片银行中的图片到电脑
- Linux 软件的安装
- jvm_垃圾收集算法讲解(一)
- 第一次玩,试试手(标题)
- 【NOIP2011TG】【OJ4366】【codevs1135】选择客栈
- Mac下搭建手机APP开发环境(HBuilder X ,HTML5plus Runtime,MUI,springboot)
- c# mvvm模式获取当前窗口_对Vue中的MVVM原理解析和实现
- Vue调用本地缓存(监视数据变更)
- 酷比魔方iwork8刷机shell_酷比魔方IWORK8旗舰版(I1-T)双系统刷机教程.doc
- STM32 避障小车 —— HC-SR04
- MATLAB自动设置仿真曲线颜色和线型属性
- 3D动画建模软件市场现状研究分析
- Vivado使用系列:使用自定义BD
- 数据结构笔记_34 赫夫曼编码压缩、解压文件
- Amazon Braket 与量子计算
热门文章
- 微软解释Edge浏览器比Chrome更加安全的原因
- 基于ArduinoLeonardo板子的BadUSB攻击实战
- (转)Javascript模块化编程(一):模块的写法
- Android基础 : Android Service[转]
- js_高级_表格排序案例---分别用面向过程和面向对象实现
- 《代码敲不队》第五次作业:项目需求分析改进与系统设计
- Android 获取keystore SHA1方法
- 传统数据中心穿上“云”外衣 任重而道远
- bzoj-1026 windy数
- 解决 Callout位置不更新的问题