虽然我只是刚踏入web前端开发圈子。在一次次任务里头,我发觉每一次的css命名都有所不同和不知所措。脑海就诞生了一个想法——模仿大神的css命名样式。

毕竟日后工作上,是需要多个成员共同协作的。如果没有良好的命名,就会造成许多没必要的耽误和麻烦。

  命名空间的规范:

布局:以 g 为命名空间,例如:.g-wrap 、.g-header、.g-content。
状态:以 s 为命名空间,表示动态的、具有交互性质的状态,例如:.s-current、s-selected。
工具:以 u 为命名空间,表示不耦合业务逻辑的、可复用的的工具,例如:u-clearfix(清除浮动)、u-ellipsis(省略)。
组件:以 m 为命名空间,表示可复用、移植的组件模块,例如:m-slider(滑动)、m-dropMenu(下拉菜单)。
钩子:以 j 为命名空间,表示特定给 JavaScript 调用的类名,例如:j-request、j-open。
                                                                  引用于:大神ChokCoco
 样式属性的规范:
单个样式规则下的属性在书写时,应按功能进行分组,并以
Positioning Model > Box Model > Typographic > Visual 的顺序书写,提高代码的可读性。
如果包含 content 属性,应放在最前面;
Positioning Model 布局方式、位置,相关属性包括:position / top / right / bottom / left / z-index / display / float / ...
Box Model 盒模型,相关属性包括:width / height / padding / margin / border / overflow / ...
Typographic 文本排版,相关属性包括:font / line-height / text-align / word-wrap / ...
Visual 视觉外观,相关属性包括:color / background / list-style / transform / animation / transition / ...
                                                                  引用于:大神ChokCoco
positioning排在第一位,因为它可以使一个元素脱离正常文档流,box决定了一个组件的大小。其他属性只在内部起作用。

面向属性的命名:不要管页面什么位置,什么内容,面向属性的命名”就是针对自身属性的一种命名方式

.tr{text-align:right;}

.pb8{padding-bottom:8px;}

双标签方法&宽度分离原则

.w470{width:470px;}

.inset{padding:20px; border:1px solid #ddd;}

这样padding与border就会自适应width。Width就变成主动了。外层标签就负责宽度或者与之分离的margin属性,以提高CSS的重用性以及页面的容错与自适应能力。

“分离”思想下的命名只针对属性本身, “无分离”思想的命名是针对页面内容,所以上述改为:

.txtw1{width:470px;}

.inset1{padding:20px; border:1px solid #ddd;}

当以后发现其他部分也用到width470px,可以合并为

.txtw1,.w470{width:470px;}

要注意,只有页面要使用到与文本框独立宽度一样宽度的时候才进行分离并合并

精简高效CSS命名之“三无原则”

no id
no 辈分层级

no 标签

                                                                  引用于:大神张鑫旭
还有就是附上一些常用的特殊符号

&nbsp:牛逼(nb)空格(sp - space),容易受影响。


&ensp:恶念(e n-ian)空格占据的宽度正好是1/2个中文宽度,而且基本上不受字体影响。


&emsp:恶魔(e m-o)空格占据的宽度正好是1个中文宽度,而且基本上不受字体影响。


‹&lsaquo ›&rsaquo√&radic×&times


CSS 样式书写规范+特殊符号的更多相关文章

  1. CSS 样式书写规范

    可能不同团队都有各自的规范,又或者很多人在写 CSS 的时候还是想到什么就写什么,不存在太多的约束. 我觉得 CSS 代码规范还是有存在的必要的,尤其是在团队配合,多人协作下,规范就显得尤为重要. 本 ...

  2. css样式书写规范

    在工作当中css样式是非常重要的,但是咋样书写css样式更重要. 一.css书写规范 1.定位属性:position  display  float  left  top  right  bottom ...

  3. 关于CSS的书写规范和顺序

    关于CSS的书写规范和顺序,是大部分前端er都必须要攻克的一门关卡,如果没有按照良好的CSS书写规范来写CSS代码,会影响代码的阅读体验.这里总结了一个CSS书写规范.CSS书写顺序供大家参考,这些是 ...

  4. css样式书写的问题

    经常遇到前端的朋友问及css样式书写的问题,结合自己实际的工作,自己总结了整理了一下,给大家分享: 一.顺序问题:显示属性-位置属性-元素自身属性-文本属性-其他属性 1.显示属性:z-index.d ...

  5. css的书写规范+常用

    格式化: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blo ...

  6. css命名书写规范小结。

    单行形式书写风格的排版约束 1.   每一条规则的大括号 { 前后加空格 2.   多个selector共用一个样式集,则多个selector必须写成多行形式 3.   每一条规则结束的大括号 } 前 ...

  7. css的书写规范,有哪些注意点

    一.框架为先,细节次之. 先写一些浮动,然后高与宽,然后再是细节方面的书写. 比如写一个浮动容器的样式,我们应该先让这个容器的框架被渲染出来,让大家看到基本的 网站框架.然后再再去渲染容器里面的内容. ...

  8. css样式书写顺序

    这里推荐先写显示属性,再写自身属性,再写文字属性:并不代表非得按这个顺序写,但这种写法可以使css结构更清晰易读,修改起来比较方便. 而且在团队项目中能更好地提高效率. //显示属性 display ...

  9. CSS3书写规范

    css样式的书写顺序: 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, marg ...

随机推荐

  1. gulp+browserSync自动刷新页面

    BrowserSync “Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平 ...

  2. go服务端----使用dotweb框架搭建简易服务

    使用dotweb框架搭建简易服务 go语言web框架挺多的,所谓琳琅满目,里面也有很多优秀的,比如echo.beego等,但体验下来,总是觉得哪里有点小疙瘩,后来才明白过来,echo太简单,很多日常使 ...

  3. Quartz源码分析

    先简单介绍一下quartz,Quartz是一个功能丰富的开源作业调度库,可以集成到几乎任何Java应用程序中 - 从最小的独立应用程序到最大的电子商务系统.quartz可用于创建执行数十,数百甚至数十 ...

  4. 原型----------prototype详细解答

    function ren(name,age){ this.name=name; this.age=age; this.fa=function(){ alert('我喜欢吃'); } } var p1= ...

  5. Nginx+Keepalived 主备高可用 安装与配置

    环境说明:操作系统:CentOS6.7 x86_64Nginx版本:nginx-1.9.7Keepalived版本:keepalived-1.2.24 主nginx + Keepalived :10. ...

  6. javascript事件委托机制详解

    以个人前端工作面试经历来看,javascript事件委托是问的最多的一类题目之一,熟悉事件委托能够了解你对于javascript的掌握程度. 面试官可能问一下问题,现在有5个li待办事件,需要实现当点 ...

  7. twisted学习之reactor

    reactor是twisted框架里面一个很重要的抽象,它为我们实现了循环,所以我们不用再去实现循环了. reactor有如下特点: 1.reactor循环会一致运行下去,可以使用Ctrl+C或者相关 ...

  8. IntelliJ IDEA:给web应用提供JSTL支持

    最近在看<Head First Servlet JSP>学习JSP,看到JSTL一章,为了添加JSTL支持折腾了好久. 网上的教程五花八门,而且多数比较旧. 我尝试了各种方法都没有成功,很 ...

  9. flask简单web应用

    推荐一个学习python的网站,个人觉得在这里面收获挺大的,希望对后来学习flask的小伙伴们有帮助.http://www.pythondoc.com/ 用flask框架实现第一个web应用 首先需要 ...

  10. h5之scrollIntoView控制页面元素滚动

    如果滚动页面也是DOM没有解决的一个问题.为了解决这个问题,浏览器实现了一下方法,以方便开发人员如何更好的控制页面的滚动.在各种专有方法中,HTML5选择了scrollIntoView()作为标准方法 ...