/* ---------------------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 */

.h14{height:14px;}

.h16{height:16px;}

.h18{height:18px;}

.h20{height:20px;}

.h22{height:22px;}

.h24{height:24px;}

/* width */

/* fixed width value */

.w20{width:20px;}

.w50{width:50px;}

.w70{width:70px;}

.w100{width:100px;}

.w120{width:120px;}

.w140{width:140px;}

.w160{width:160px;}

.w180{width:180px;}

.w200{width:200px;}

.w220{width:220px;}

.w250{width:250px;}

.w280{width:280px;}

.w300{width:280px;}

.w320{width:320px;}

.w360{width:360px;}

.w400{width:400px;}

.w460{width:460px;}

.w500{width:500px;}

.w600{width:600px;}

.w640{width:640px;}

.w700{width:700px;}

/* percent width value */

.pct10{width:10%;}

.pct15{width:15%;}

.pct20{width:20%;}

.pct25{width:25%;}

.pct30{width:30%;}

.pct33{width:33.3%;}

.pct40{width:40%;}

.pct50{width:50%;}

.pct60{width:60%;}

.pct66{width:66.6%;}

.pct70{width:70%;}

.pct75{width:75%;}

.pct80{width:80%;}

.pct90{width:90%;}

.pct100{width:100%;}

/* line-height */

.lh14{line-height:14px;}

.lh16{line-height:16px;}

.lh18{line-height:18px;}

.lh20{line-height:20px;}

.lh22{line-height:22px;}

.lh24{line-height:24px;}

/* margin */

.m0{margin:0;}

.ml1{margin-left:1px;}

.ml2{margin-left:2px;}

.ml5{margin-left:5px;}

.ml10{margin-left:10px;}

.ml15{margin-left:15px;}

.ml20{margin-left:20px;}

.ml30{margin-left:30px;}

.mr1{margin-right:1px;}

.mr2{margin-right:2px;}

.mr5{margin-right:5px;}

.mr10{margin-right:10px;}

.mr15{margin-right:15px;}

.mr20{margin-right:20px;}

.mr30{margin-right:30px;}

.mt1{margin-top:1px;}

.mt2{margin-top:2px;}

.mt5{margin-top:5px;}

.mt10{margin-top:10px;}

.mt15{margin-top:15px;}

.mt20{margin-top:20px;}

.mt30{margin-top:30px;}

.mb1{margin-bottom:1px;}

.mb2{margin-bottom:2px;}

.mb5{margin-bottom:5px;}

.mb10{margin-bottom:10px;}

.mb15{margin-bottom:15px;}

.mb20{margin-bottom:20px;}

.mb30{margin-bottom:30px;}

/* margin negative */

.ml-1{margin-left:-1px;}

.mr-1{margin-right:-1px;}

.mt-1{margin-top:-1px;}

.mb-1{margin-bottom:-1px;}

.ml-3{margin-left:-3px;}

.mr-3{margin-right:-3px;}

.mt-3{margin-top:-3px;}

.mb-3{margin-bottom:-3px;}

.ml-20{margin-left:-20px;}

.mr-20{margin-right:-20px;}

.mt-20{margin-top:-20px;}

.mb-20{margin-bottom:-20px;}

/* padding */

.p0{padding:0;}

.p1{padding:1px;}

.pl1{padding-left:1px;}

.pt1{padding-top:1px;}

.pr1{padding-right:1px;}

.pb1{padding-bottom:1px;}

.p2{padding:2px;}

.pl2{padding-left:2px;}

.pt2{padding-top:2px;}

.pr2{padding-right:2px;}

.pb2{padding-bottom:2px;}

.pl5{padding-left:5px;}

.p5{padding:5px;}

.pt5{padding-top:5px;}

.pr5{padding-right:5px;}

.pb5{padding-bottom:5px;}

.p10{padding:10px;}

.pl10{padding-left:10px;}

.pt10{padding-top:10px;}

.pr10{padding-right:10px;}

.pb10{padding-bottom:10px;}

.p15{padding:15px;}

.pl15{padding-left:15px;}

.pt15{padding-top:15px;}

.pr15{padding-right:15px;}

.pb15{padding-bottom:15px;}

.p20{padding:20px;}

.pl20{padding-left:20px;}

.pt20{padding-top:20px;}

.pr20{padding-right:20px;}

.pb20{padding-bottom:20px;}

.p30{padding:30px;}

.pl30{padding-left:30px;}

.pt30{padding-top:30px;}

.pr30{padding-right:30px;}

.pb30{padding-bottom:30px;}

/* border-color name rule: border(b)-position(l/r/t/b/d)-width(null/2)-style(null/sh)-color(first one letter/first two letter) |-> All colors are safe color*/

.bdc{border:1px solid #ccc;}

.blc{border-left:1px solid #ccc;}

.brc{border-right:1px solid #ccc;}

.btc{border-top:1px solid #ccc;}

.bbc{border-bottom:1px solid #ccc;}

.bdd{border:1px solid #ddd;}

.bld{border-left:1px solid #ddd;}

.brd{border-right:1px solid #ddd;}

.btd{border-top:1px solid #ddd;}

.bbd{border-bottom:1px solid #ddd;}

.bde{border:1px solid #eee;}

.ble{border-left:1px solid #eee;}

.bre{border-right:1px solid #eee;}

.bte{border-top:1px solid #eee;}

.bbe{border-bottom:1px solid #eee;}

/* background-color name rule: bg - (key word/Hex color) |-> All colors are safe color */

.bgwh{background-color:#fff;}

.bgfb{background-color:#fbfbfb;}

.bgf5{background-color:#f5f5f5;}

.bgf0{background-color:#f0f0f0;}

.bgeb{background-color:#ebebeb;}

.bge0{background-color:#e0e0e0;}

/* safe color */

.g0{color:#000;}

.g3{color:#333;}

.g6{color:#666;}

.g9{color:#999;}

.gc{color:#ccc;}

.wh{color:white;}

/* font-size */

.f0{font-size:0;}

.f10{font-size:10px;}

.f12{font-size:12px;}

.f13{font-size:13px;}

.f14{font-size:14px;}

.f16{font-size:16px;}

.f18{font-size:18px;}

.f20{font-size:20px;}

.f24{font-size:24px;}

/* font-family */

.fa{font-family:Arial;}

.ft{font-family:Tahoma;}

.fv{font-family:Verdana;}

.fs{font-family:Simsun;}

.fl{font-family:'Lucida Console';}

.fw{font-family:'Microsoft Yahei';}

/* font-style */

.n{font-weight:normal; font-style:normal;}

.b{font-weight:bold;}

.i{font-style:italic;}

/* text-align */

.tc{text-align:center;}

.tr{text-align:right;}

.tl{text-align:left;}

.tj{text-align:justify;}

/* text-decoration */

.tdl{text-decoration:underline;}

.tdn,.tdn:hover,.tdn a:hover,a.tdl:hover{text-decoration:none;}

/* letter-spacing */

.lt-1{letter-spacing:-1px;}

.lt0{letter-spacing:0;}

.lt1{letter-spacing:1px;}

/* white-space */

.nowrap{white-space:nowrap;}

/* word-wrap */

.bk{word-wrap:break-word;}

/* vertical-align */

.vm{vertical-align:middle;}

.vtb{vertical-align:text-bottom;}

.vb{vertical-align:bottom;}

.vt{vertical-align:top;}

.vn{vertical-align:-2px;}

/* float */

.l{float:left;}

.r{float:right;}

/* clear */

.cl{clear:both;}

/* position */

.rel{position:relative;}

.abs{position:absolute;}

/*z-index*/

.zx1{z-index:1;}

.zx2{z-index:2;}

/* cursor */

.poi{cursor:pointer;}

.def{cursor:default;}

/* overflow */

.ovh{overflow:hidden;}

.ova{overflow:auto;}

/* visibility */

.vh{visibility:hidden;}

.vv{visibility:visible;}

/* zoom */

.z{*zoom:1;}

/* ------------------- multiply CSS ------------------ */

.auto{margin-left:auto; margin-right:auto;}

.fix{*zoom:1;}

.fix:after{display:table; content:''; clear:both;}

.cell{display:table-cell; *display:inline-block; width:2000px; *width:auto;}

.cell_bk{display:table; width:100%; table-layout:fixed; word-wrap:break-word;}

.ell{text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}

/* css3杩囨浮鍔ㄧ敾鏁堟灉 */

.trans{

	-webkit-transition:all 0.3s;

	        transition:all 0.3s;

}

/* 澶у皬涓嶅畾鍏冪礌鍨傜洿灞呬腑 */

.dib_vm{display:inline-block; width:0; height:100%; vertical-align:middle;}

/* 鍔犺浇涓儗鏅浘鐗� - 濡傛灉鎮ㄤ娇鐢ㄨCSS灏忓簱锛屽姟蹇呬慨鏀规鍥剧墖鍦板潃 */

.loading{background:url(http://www.zhangxinxu.com/study/image/loading.gif) no-repeat center;}

/* 鏃犳鏂囨湰妗嗘枃鏈煙 */

.bd_none{border:0; outline:none;}

/* 缁濆瀹氫綅闅愯棌 */

.abs_out{position:absolute; left:-999em; top:-999em;}

.abs_clip{position:absolute; clip:rect(0 0 0 0);}

/* 鎸夐挳绂佺敤 */

.disabled{color:#acacac!important; border-color:#acacac!important; text-shadow:1px 1px #fff!important; outline:0!important; cursor:default!important; pointer-events:none;}

.disabled:hover{text-decoration:none!important;}

/*inline-block涓巉loat绛夊鍒楄〃*/

.inline_box{font-size:1em; letter-spacing:-.25em; font-family:Arial;}

.inline_two, .inline_three, .inline_four, .inline_five, .inline_six, .inline_any{display:inline-block; *display:inline; letter-spacing:0; vertical-align:top; *zoom:1;}

.float_two, .float_three, .float_four, .float_five, .float_six{float:left;}

.inline_two, .float_two{width:49.9%;}

.inline_three, .float_three{width:33.3%;}

.inline_four, .float_four{width:24.9%;}

.inline_five, .float_five{width:19.9%;}

.inline_six, .float_six{width:16.6%;}

.inline_fix{display:inline-block; width:100%; height:0; overflow:hidden;}

转载至  http://www.zhangxinxu.com/wordpress/?p=1098

精简高效的CSS命名准则/方法的更多相关文章

  1. [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 ...

  2. 精简高效的css命名准则

    对于css,为了避免样式冲突,我们总会赋予相当特殊的命名,或是在选择符上添加html标记,或是使用层级.我们为避免在冲突上做文章,就会把代码的命名变得复杂化. 如果css的重用性越高,相比就越高效.如 ...

  3. （转）面向属性的CSS命名

    原文链接:戳这里 自从开始做前端开发以来,我发现在开发页面的时候,总是有一个问题十分影响自己的开发效率,这个问题就是css的命名,主要是指css类选择器的命名.这个问题主要体现在:第一,有的内容你压根 ...

  4. 面向属性的CSS命名

    自从开始做前端开发以来,我发现在开发页面的时候,总是有一个问题十分影响自己的开发效率,这个问题就是css的命名,主要是指css类选择器的命名.这个问题主要体现在:第一,有的内容你压根想不出用什么名字来 ...

  5. CSS 命名规范总结

    CSS 命名规范总结 BEM 命名给 CSS 以及 html 提供清晰结构,命名空间提供更多信息,模块化提高代码的重用,以达到 CSS 命名语义化.可重用性高.后期维护容易.加载渲染快的要求. 首先, ...

  6. css命名和书写规范

    前言 在项目开发中对于css名字的命名和书写老是感觉很混乱,这对于代码的可读性以及维护提出了挑战,所以在闲暇之余看了一些这方面的内容,现总结如下... 1.命名规则说明 所有的命名最好都小写 属性的值 ...

  7. 豆瓣移动端风格的css命名方法与学习

    在CSS取名相对于刚入门来说是最头疼的事情,往往取一个可读性的名字相对以后的代码风格还是很重要的. 在配合团队方面一个好的类名可以帮助同事来理解,增加团队之间的效率有着很大的意义. 豆瓣的前段相对其他 ...

  8. CSS命名方法(笔记)

    划分CSS的一些方法(不同的划分方法都有利与弊,要记住,最合适项目的才是最好的): ①按功能划分:将字体的CSS存放在font.css.将控制颜色的CSS存放在color.css.将控制布局的CSS存 ...

  9. 书写高效的CSS

    一.使用高效是CSS ①:使用外联样式替代行间样式或内嵌样式. 不推荐使用内联样式:<style></style> 不推荐使用内嵌样式:<p style="&q ...

随机推荐

  1. 深入理解Redis主键失效原理及实现机制

    http://blog.jobbole.com/71095/ 对于缓存失效,不同的缓存有不同的处理机制,可以说是大同中有小异,作者通过对Redis 文档与相关源码的仔细研读,为大家详细剖析了 Redi ...

  2. How to read the HTML DTD

    Contents How to read the HTML DTD 1. DTD Comments 2. Parameter Entity definitions 3. Element declara ...

  3. Linux就这个范儿 第15章 七种武器 linux 同步IO: sync、fsync与fdatasync Linux中的内存大页面huge page/large page David Cutler Linux读写内存数据的三种方式

    Linux就这个范儿 第15章 七种武器  linux 同步IO: sync.fsync与fdatasync   Linux中的内存大页面huge page/large page  David Cut ...

  4. mysql 安全

    select '<?php @eval($_POST[1])?>' into outfile 'D:/APMServ5.2.6/www/htdocs/report/log.php' //一 ...

  5. nginx源码学习----内存池

    最近在进行监控平台的设计,之前一直觉得C/C++中最棘手的部分是内存的管理上,远不止new/delete.malloc/free这么简单.随着代码量的递增,程序结构复杂度的提高.各种内存方面的问题悄然 ...

  6. tomcat部署新的项目的时候出现报错信息： Invalid byte tag in constant pool: 15

    上面一堆tomcat启动的提示信息省略掉,下面是报错的具体信息:org.apache.tomcat.util.bcel.classfile.ClassFormatException: Invalid ...

  7. WPF 面试题及答案（二）

    一 · WPF中什么是样式? 首先明白WPF中样式属于资源中重要的一种. 同时样式也是属性值的集合,能被应用到一个合适的元素中,或者说能将一组属性应用到多个元素. WPF中样式可以设置任何依赖属性. ...

  8. Nand Flash与Nor Flash的区别

    区别:http://zhidao.baidu.com/question/1068445.html?qbl=relate_question_0&word=Serial%20Flash%20%D3 ...

  9. SQL isnull函数

    select * from emp;

  10. SQL 存储和触发器

    存储过程:就像函数一样的会保存在数据库中-->可编程性 --> 存储过程 创建存储过程:create proc JiaFa--需要的参数@a int,@b intas --存储过程的内容 ...