CSS文档优化
首先了解下CSS的渲染逻辑,它是从标记的最后一位开始搜索的,例如:.myclass li a,首选它会遍历所有的<a>,然后看哪些<a>之前有<li>,然后再看哪些<li>之前有.myclass。
所以:1、层级太多会增加CSS渲染的工作量。
如下:
除此之外,还有哪些可以优化的呢?
2、图中样式的每个属性独占一行,行数越多,文件的大小就越大,而且找起来也不好找,进入疯狂的滚轮模式。
3、很长很长的链式定位,.myclass li a span,让不熟悉的同事要不断切换html与css文档找到所影响到的元素,影响工作效率。建议更多的采用带明确含义的clss。
4、一些常用的属性可以抽离,正常团队工作中,前端与设计会在设计阶段至开发前沟通好一些通用的样式,例如:字体、标题风格等等。还有一些我们会常用到的,例如:各种定位、清除浮动属性等。
以下是优化过的文档:
当然,在项目体量比较小的时候,效率提升不会怎么明显。不过更多的好处在于后续维护时的效率,毕竟,作为一名技术,工作的目的也是为了提高公司的收益,开源节流,这就是节流的地方了。
欢迎交流指点
CSS文档优化的更多相关文章
- CSS文档统筹
一.CSS文档统筹 1.整站里相同的CSS样式提取到一个样式表里,各个页面调用相同的样式文件即可: 2.网站较大的情况下一般会把网站的头部,尾部单独分离出来,包括样式文件: 1)根据页面类型分离文件 ...
- CSS文档流与块级元素和内联元素
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
- CSS文档流与块级元素和内联元素(文档)
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...
- CSS文档流、块级元素、内联元素
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
- 完美CSS文档的8个最佳实践
在css的世界,文档没有被得到充分的利用.由于文档对终端用户不可见,因此它的价值常常被忽视.另外,如果你第一次为css编写文档,可能很难确定哪些内容值得记录,以及如何能够高效完成编写. 然而,为C ...
- css文档之盒模型阅读笔记
前段时间抽空仔细阅读了w3c的css文档关于盒模型方面的一些基础知识.边读边记录了一些要点,在此做些整理,与大家分享,如有理解有误之处,请不吝指教. 1.综述 文档中的每个元素被描绘为矩形盒子.渲染引 ...
- CSS文档流
文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...
- css 文档流中块级非替换元素水平区域的计算规则(1)
最近在读<Basic Visual Formatting in CSS>,结合以前看的<css权威指南>和css标准.今天就做个笔记. 以前在遇到一些宽度不明确指明的一些布局的 ...
- 前端学习笔记之CSS文档流
先引用一段W3C的文档: 9.3 Positioning schemes In CSS 2.1, a box may be laid out according to three positionin ...
随机推荐
- JDBC编程之数据准备
--------------------siwuxie095 JDBC 编程之数据准备 启动 MySQL 服务,在管理员模式下的 CMD 窗口中输入 net start mysqldb 「对应的关闭 ...
- 12、scala隐式转换与隐式参数
一.隐式转换 1.介绍 Scala提供的隐式转换和隐式参数功能,是非常有特色的功能.是Java等编程语言所没有的功能.它可以允许你手动指定,将某种类型的对象转换成其他类型的对象. 通过这些功能,可以实 ...
- 截止JDK1.8版本,java并发框架支持锁包括?
读写锁 自旋锁 乐观锁
- 23. Bypass ngx_lua_waf SQL注入防御(多姿势)
0x00 前言 ngx_lua_waf是一款基于ngx_lua的web应用防火墙,使用简单,高性能.轻量级.默认防御规则在wafconf目录中,摘录几条核心的SQL注入防御规则: select.+(f ...
- cookie 、Session 和自定义分页
cookie cookie的由来 大家都知道Http协议是无状态的. 无状态的意思 是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系, 他不会受前面的请求响应情况直接影响, ...
- 【linux下-远程访问mysql数据库报错问题】
虚拟机跑Linux项目用到MySQL数据库,可是远程连接MySQL时总是报出erro 2003: Can't connect to MySQL server on '211.87.***.***' ( ...
- C#类的成员(字段、属性、方法)
前面定义的Person的类,里面的成员包括:字段.属性.方法.事件等,此外,前面说的嵌套类也是类的成员. a.类的成员为分:静态成员(static)和非静态成员 b.静态成员用static标识,不标识 ...
- poj3694(lca + tarjan求桥模板)
题目链接: http://poj.org/problem?id=3694 题意: 给出一个 n 个节点 m 条边的图, 然后有 q 组形如 x, y 的询问, 在前面的基础上连接边 x, y, 输出当 ...
- bzoj1227: [SDOI2009]虔诚的墓主人(树状数组,组合数)
传送门 首先,对于每一块墓地,如果上下左右各有$a,b,c,d$棵树,那么总的虔诚度就是$C_k^a*C_k^b*C_k^c*C_k^d$ 那么我们先把所有的点都给离散,然后按$x$为第一关键字,$y ...
- Mysql缓存的配置和使用
在mysql服务器高负载的情况下,必须采取一种措施给服务器减轻压力,减少服务器的I/O操作.一般采用的方法是优化sql操作语句,优化服务器的配置参数,从而提高服务器的性能.Mysql使用了几种内存缓存 ...