精简高效的css命名准则
对于css,为了避免样式冲突,我们总会赋予相当特殊的命名,或是在选择符上添加html标记,或是使用层级。我们为避免在冲突上做文章,就会把代码的命名变得复杂化。
如果css的重用性越高,相比就越高效。如果名字越普通就越没有含义,越容易被重用,所以css想要重用性高,就需要命名简单。但是,简单的命名越容易造成冲突
面向属性的命名方法
我们习惯在css命名的时候掺杂语义,这样可以让代码更易懂。例如淘宝中免费注册:help-guest-regist
.l{float:left}
.r{float:right}
.c{clear:both}
.f16{font-size:16px;}
.w265{width:265px;}
.ml62{margin-left:62px;}
当然,如果网站本身的架构不是每个侧栏内容进行模块化处理的话,说实话,这里标题的分离还是有点危险的。想想看,如果哪天产品经理说底部padding值要改成10 像素,如果你的网站架构不合理,含这类标题的模块到处是,会改到你急活攻心,兔血三升而亡
千万不要对网站通用的元素进行分离
精简高效css命名之“三五原则”
- 无ID
- 无标签
- 无辈分层级
- css的命名就应该最简单、最直接,直捣黄龙,没有html标签,没有层级,这些通通滚蛋,
原因解释
1.限制重用
我们会使用层级(#test .test)(ul .test)可能是习惯没有多想,或是为了避免冲突。但是,这些的写法以后都不要用
如果你限制的越多的话,越会使css 的重用性降低。例如#test .test{}这种写法,里面的css 的重用性多大,完全被限死在id为test中了,没有重用性可言了, ul .test 这个ul标签 如果想要体改css优先级,把那个字母长的让人发毛的!important干掉的
降低渲染效率
现在要给ul这个标签一个样式,比如说padding-left:25px;那么下面四种写法那个渲染的速度比较快
#test .test{}.
ul .test{}
#test ul{}
.test{}
如果单纯的ul,.test PK拿不准哥哥的渲染速度会更快些。但是,一旦牵扯到层级与标签,.test这种最直接的命名方式渲染速度最高的
css渲染速度和使用javascript获取页面元素那是完全不一样的。如果使用javascript获取dom元素,则#test ul速度是最快的,先获取id在tag获取,
这些都是javascript的内置方法。但是,css的渲染方式则是属于外太空的了,《高性能网站进阶指南》中提到css的渲染方式是从右往左渲染的,就拿#test ul 是先渲染页面上所有的ul元素,再去查询id为test元素 ;这种渲染差异最大为200ms(这里的差异不是单纯一个样式发的差异,而是这些写法泛滥的页面的全部渲染)
精简高效的css命名准则的更多相关文章
- [css] 【转载】 精简高效的CSS命名准则/方法
原文链接:http://www.zhangxinxu.com/wordpress/2010/09/%E7%B2%BE%E7%AE%80%E9%AB%98%E6%95%88%E7%9A%84css%E5 ...
- 精简高效的CSS命名准则/方法
/* ---------------------single CSS----------------------- */ /* display */ .dn{display:none;} .di{di ...
- (转)面向属性的CSS命名
原文链接:戳这里 自从开始做前端开发以来,我发现在开发页面的时候,总是有一个问题十分影响自己的开发效率,这个问题就是css的命名,主要是指css类选择器的命名.这个问题主要体现在:第一,有的内容你压根 ...
- 面向属性的CSS命名
自从开始做前端开发以来,我发现在开发页面的时候,总是有一个问题十分影响自己的开发效率,这个问题就是css的命名,主要是指css类选择器的命名.这个问题主要体现在:第一,有的内容你压根想不出用什么名字来 ...
- CSS 命名规范总结
CSS 命名规范总结 BEM 命名给 CSS 以及 html 提供清晰结构,命名空间提供更多信息,模块化提高代码的重用,以达到 CSS 命名语义化.可重用性高.后期维护容易.加载渲染快的要求. 首先, ...
- css命名和书写规范
前言 在项目开发中对于css名字的命名和书写老是感觉很混乱,这对于代码的可读性以及维护提出了挑战,所以在闲暇之余看了一些这方面的内容,现总结如下... 1.命名规则说明 所有的命名最好都小写 属性的值 ...
- 书写高效的CSS
一.使用高效是CSS ①:使用外联样式替代行间样式或内嵌样式. 不推荐使用内联样式:<style></style> 不推荐使用内嵌样式:<p style="&q ...
- 高效的CSS代码(2)
——阅读笔记,欢迎纠错^_^ 内容比较零散..... 1.让浮动元素的父容器根据元素的高度而自适应高度的方法: <div class="clearfix"><di ...
- 如何书写高效的css样式
如何书写高效的css样式? 有以下四个关键要素: 1.高效的css 2.可维护的css 3.组件化的css 4.hack-free css 书写高效的css: 1.使用外联样式替代行间样式或内嵌样式 ...
随机推荐
- kobject.c 添加注释
最近结合<Linux Device Drivers>对kobject的理解,对kobject.c文件添加注释,仅供参考! 1 /** 2 * populate_dir - pop ...
- [WPF系列]-DynamicResource与StaticResource的区别
探讨: 1.当引用资源时,选择StaticResource还是DynamicResource的考虑因素: (1)在哪里创建资源?(资源的范围或层级) a. 资源是在一个Page/Canvas/Wind ...
- Java:类与继承
Java:类与继承 对于面向对象的程序设计语言来说,类毫无疑问是其最重要的基础.抽象.封装.继承.多态这四大特性都离不开类,只有存在类,才能体现面向对象编程的特点,今天我们就来了解一些类与继承的相关知 ...
- [ZZ]From QA to Engineering Productivity
http://googletesting.blogspot.com/2016/03/from-qa-to-engineering-productivity.html In Google’s early ...
- 第5章 软件包管理(1)_RPM包安装
1. 软件包简介 1.1 软件包分类 (1)源码包:如C.C++源码包,脚本安装包执行后可以自动安装. (2)二进制包:Redhat系列(如CentOS):为RPM包,Debian系列(如ubuntu ...
- Child <- many-to-one ->Parent
网上找到个描述的很精妙的例子 Child <- many-to-one ->Parent class Child { private ...
- NPOI导出Excel合并表头写入公式
protected void Btn1_Click(object sender, EventArgs e) { //建立空白工作簿 IWorkbook workbook = new HSSFWorkb ...
- Struts2 token禁止重复提交表单
如果服务器响应慢的情况下,用户会重复提交多个表单,这时候有两种设计思想: 1.在客户端使用JS技术,禁止客户重复提交表单.但是这样会使一些不使用浏览器方式登陆的人比如使用底层通信来攻击你的服务器 2. ...
- js确认删除对话框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jqgrid
官方主页 http://www.jqgrid.com/目前最新版本:jqGrid 3.7 Beta在线文档: http://www.secondpersonplural.ca/jqgriddocs/i ...