/* ---------------------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. jQuery中的bind() live() delegate()之间区别分析

    jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click', ...

  2. Oracle本地网络分表模拟分区裁剪

    来自讨论贴 http://www.itpub.net/thread-1877111-1-1.html 准备数据表 2014-07-20 01:38:10>create table tb_1 as ...

  3. 程序设计: 猫大叫一声，所有的老鼠都开始逃跑，主人被惊醒。(C#语言)

    要求:  1.要有联动性,老鼠和主人的行为是被动的.  2.考虑可扩展性,猫的叫声可能引起其他联动效应. 我么能事件来一步一步来实现: 将要执行的老鼠逃跑,和主人惊醒的行为注册到事件中,猫叫之后引发事 ...

  4. tomcat的部署

    零.服务器.Servlet容器.web容器 Servlet容器:能够运行Servlet的环境叫做Servlet容器 web容器:能够运行web应用的环境就叫做web容器 weblogic websph ...

  5. you need to upgrade the working copy first

    is too old (format 29) to work with client version '1.9.4 (r1740329)' (expects format 31) 2016年09月18 ...

  6. bash变量操作

    1.条件变量替换: Bash Shell可以进行变量的条件替换,既只有某种条件发生时才进行替换,替换 条件放在{}中. (1) ${value:-word} 当变量未定义或者值为空时,返回值为word ...

  7. Android之Handler，举例说明如何更新UI

    方法一:(java习惯,在android不推荐使用) 刚刚开始接触android线程编程的时候,习惯好像java一样,试图用下面的代码解决问题 new Thread( new Runnable() { ...

  8. Java基础之处理事件——添加工具提示（Sketcher 9 with tooltips）

    控制台程序. 在Java中实现对工具提示的支持是非常简单的,秘诀仍在我们一直使用的Action对象中.Action对象拥有存储工具提示文本的内置功能因为文本是通过SHORT_DESCRIPTION键提 ...

  9. SignalR实时聊天功能

    使用vs2013新建一个空的asp.net 工程 添加SignalR集线器类MyHub.cs using System; using System.Collections.Generic; using ...

  10. PostgreSQL/bin

    pg_receivexlog pg_receivexlog—以流的方式从一个PostgreSQL集簇得到事务日志 pg_receivexlog被用来从一个运行着的PostgreSQL集簇以流的方式得到 ...