【[css] 【转载】 精简高效的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%91%BD%E5%90%8D%E5%87%86%E5%88%99%E6%96%B9%E6%B3%95/ 一.“无”的哲学 佛家讲究“因果报应”,有果必有应.此段看似与主题没有血缘关系,实际讲的是“因”. 我个人比较喜欢老子的道家思想,并喜欢以其思想解释学习与工作中遇到的一些问题.例如我之前写过的“…

精简高效的css命名准则

对于css,为了避免样式冲突,我们总会赋予相当特殊的命名,或是在选择符上添加html标记,或是使用层级.我们为避免在冲突上做文章,就会把代码的命名变得复杂化. 如果css的重用性越高,相比就越高效.如果名字越普通就越没有含义,越容易被重用,所以css想要重用性高,就需要命名简单.但是,简单的命名越容易造成冲突 面向属性的命名方法 我们习惯在css命名的时候掺杂语义,这样可以让代码更易懂.例如淘宝中免费注册:help-guest-regist .l{float:left} .r{float:rig…

精简高效的CSS命名准则/方法

/* ---------------------single CSS----------------------- */ /* display */ .dn{display:none;} .di{display:inline;} .db{display:block;} .dib{display:inline-block;} /* if the element is block level(eg. div, li), using 'inline_any' instead */ /* height…

弄清楚CSS的匹配原理让你写出高效的CSS

用了这么多年的CSS,现在才明白CSS的真正匹配原理,不知道你是否也跟我一样?看1个简单的CSS: DIV#divBox p span.red{color:red;} 按习惯我们对这个CSS 的理解是,浏览器先查找id为divBox的DIV元素,当找到后,再找其下的所有p元素,然后再查找所有span元素,当发现有span的class为red的时候,就应用该style.多么简单易懂的原理,可是这个理解却是完完全全相反.错误的. 浏览器CSS匹配不是从左到右进行查找,而是从右到左进行查找.比如之前说…

Gulp学习指南之CSS合并、压缩与MD5命名及路径替换(转载)

本文转载自: Gulp学习指南之CSS合并.压缩与MD5命名及路径替换…

精简高效CSS系列之二——浮动float

一.浮动基础知识 假如一个页面上有3个div块,如下排列: 图1:不使用浮动 图2:向右浮动 图2说明了框1脱离了文档流向右移动,直到它的右边缘碰到包含框的右边缘为止. 图3:向左浮动 图3说明了框1向左浮动,脱离文档流向左移动,直到它的左边缘碰到框2的左边缘为止,由于框1脱离了文档流,不占据空间,框2处于文本流中,所以框1覆盖了框2.       上面3个图说明了,浮动既可以向左也可以向右,直到它的外边缘碰到包含框或者另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流中的块…

书写高效的CSS

一.使用高效是CSS ①:使用外联样式替代行间样式或内嵌样式. 不推荐使用内联样式:<style></style> 不推荐使用内嵌样式:<p style=""></p> 推荐使用外联样式:<link href=""> ②:为了兼容老版本的浏览器,建议使用link引入外部样式表的方式替代@import导入样式的方式.@import是css2.1提出来的,所以老的浏览器不支持. 不推荐@import导入方法:&…

转载：详解CSS选择器、优先级与匹配原

转载网址:http://polaris1119.javaeye.com/blog/764428 文章就CSS选择器的优先级问题做了一些总结,严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和ID选择器. 作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通过Firebug查看,发现没有起作用的属性被覆盖了.这个时候突然意识到了CSS选择器的…

CSS书写规范、顺序和命名规则

写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考   这些是参考了国外一些文章以及我的个人经验总结出来,我想对写CSS的前端用户来说是值得学习的. 一.CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-he…

高效的CSS代码(2)

——阅读笔记,欢迎纠错^_^ 内容比较零散..... 1.让浮动元素的父容器根据元素的高度而自适应高度的方法: <div class="clearfix"><div class="fl"></div></div> /*意思就是最外面的一层<div></div>是父容器,给他加上清除浮动的功能,clearfix的代码再高效的CSS代码(1)中有*/ 2.再写代码前不是要先分析一下页面的模块吗,模块…