前言:最近在做微信小程序,因为公司小,就我一个人弄前端的东西,js和页面都是我来弄,结果那天后台的人看到我的js代码,说我的代码写得不规范,函数什么的都很乱,弄得我羞愧难当,幸亏没看我的css,其实我的css命名也很随意==!一直觉得自己css其实还是可以的,但是突然发现自己到现在的css还没有很规范,很多名称什么的还很随意,有的地方用驼峰命名,有的又用横杠,有的还会用下划线,真的太随意了,所以就上网搜了搜命名规范,改了两天终于把样式全改过来了。因此做个小结:

意义:感觉规范css代码是非常有意义的,早点有一套自己的规范的话在以后的编写css的时候就可以省去很多想应该怎么命名的时间,从长远的角度还是非常有好处的,其次别人看你的css时就可以一眼知道它代表的是什么意思,最后可以装b,哈哈。

规范:其实我是直接百度“css代码规范”,然后就搜到好多信息,看到知乎里人推荐网易1的一套前端规范,然后看了看确实不错,就以它为基础整理了自己的css编写规范。

  分类及命名:

  一、大体分下面几大类,分别以g-、m- 、u-、f-、s-、z-及自定义x-来命名第一个字母,表明 作用

  1. 布局(grid)(.g-):将页面分割为几个大块,通常有头部、主体、主栏、侧栏、尾部等!
  2. 模块(module)(.m-):通常是一个语义化的可以重复使用的较大的整体!比如导航、登录、注册、各种列表、评论、搜索等!
  3. 元件(unit)(.u-):通常是一个不可再分的较为小巧的个体,通常被重复用于各种模块中!比如按钮、输入框、loading、图标等!
  4. 功能(function)(.f-):为方便一些常用样式的使用,我们将这些使用率较高的样式剥离出来,按需使用,通常这些选择器具有固定样式表现,比如清除浮动等!不可滥用!
  5. 皮肤(skin)(.s-):如果你需要把皮肤型的样式抽离出来,通常为文字色、背景色(图)、边框色等,非换肤型网站通常只提取文字色!非换肤型网站不可滥用此类!
  6. 状态(.z-):为状态类样式加入前缀

    ps:为什么要用连字符还是有一些讨论的:CSS样式名中的下划线与连字符

  二、选择器属性和属性值一律用小写

  三、每个属性值后面都加分号结尾,即使是最后一个

  四、省略值为0时的单位 即:0px,0em,0% -> 0

  五、一律使用单引号

  六、使用16进制表示颜色(除了透明度用rgba)

  七、属性与值之间有一个半角空格的间距

  八、书写顺序2

    1.  位置属性(position, top, right, z-index, display, float等)
    2.  大小(width, height, padding, margin)
    3.  文字系列(font, line-height, letter-spacing, color- text-align等)
    4.  背景(background, border等)
    5.  其他(animation, transition等)

    ps:其实这里面的height和line-heightde位置我是很纠结的,因为其实很多时候我都是直接省略height直接用line-height来撑起来的高度,自己实际上还是没太搞懂line-height 这个属性,需要注意去研究一下!!

  九、其他:

    一般写css的时候都需要重置一些浏览器默认的css,这里有个优化阅读体验的文章,还可以,里面的把#000纯黑的颜色改成#333这个小技巧很多网站都在用,自己也没在意,因此特地记一下。

缩略词:其实我在改写我的那些css的时候很多时候我都在思考应该怎么缩写那些单词,虽然网易前端规范也写了一些缩略,但是挺少的,正好找了一篇文章,可以在这里查查,实在找不到就百度去吧。常用缩略词:http://blog.csdn.net/yfh1985sdq/article/details/17260429

参考地址:

1 网易前端规范:http://www.shejidaren.com/css-written-specifications.html

2 css书写顺序讨论:http://www.cnblogs.com/wybie/p/3689867.html

3 css编写规范,有例子,界面也很好看,我大体就是参考这个网站个网易前端规范来的:http://nec.netease.com/standard/css-practice.html

最后,写博客也是挺累的,,,真的很佩服网上那些大神,既能写的那么精简,又能幽默风趣,真的让人羡慕呀,没错,我说的就是张鑫旭张大神,任重而道远啊~

个人css编写规范的更多相关文章

  1. HTML+CSS编写规范

    在任何一个项目或者系统开发之前都需要定制一个开发约定和规则,这样有利于项目的整体风格统一.代码维护和扩展.由于Web项目开发的分散性.独立性.整合的交互性等,所以定制一套完整的约定和规则显得尤为重要. ...

  2. css编写规范最佳实践

    最初,在编写CSS的时候,我们往往想到哪儿就写到哪儿,它们之间的关联性和有序性并不在考虑之中.但随着代码量的增加,亦或是多人共同开发,CSS的编写规范变得重要起来了.本文通过三个方面,总结出CSS编写 ...

  3. css编写规范

    一.注释规范 1.文件顶部注释(推荐使用) /* * @description: 中文说明 * @author: name * @update: name (2013-04-13 18:32) */ ...

  4. html css 编写规范

    html 规范 一 语法 1.用两个空格带她tab, 2.嵌套的元素应该缩进一次,即两个空格是最好 3.属性定义,全部使用双引号,尽量避免单引号. 4.不要在自闭和标签尾部添加闭合标签. 5.可选得结 ...

  5. 关于HTML与CSS编写规范

    之前一直没有注意到这一点,因为当看到一些优秀的网站的源代码的时候,打开他们引用的css文件格式看起来也并非规范.但幸运的昨天偶然间看到的通过增强CSS规范可读性可优化页面性能,于是下决心痛改前非. 我 ...

  6. 高质量CSS编写规范

    ①id和class的命名在保持语义性的同时尽可能的短.不推荐的写法:#navigation {} .atr {}推荐的写法  : #nav {} .author {}可以缩写单词,但缩写后务必能让人明 ...

  7. web(五)CSS引入方式,编写规范及调试

    CSS (Cascading Style Sheets)层叠样式表 ,是由万维网联盟(W3C)制定的标准 CSS的主要作用: 美化html元素的外观,例如设定背景颜色.字体等. 对网页元素进行布局.以 ...

  8. CSS编写指导规范和建议

    在参与规模庞大.历时漫长且参与人数众多的项目时,所有开发者遵守如下规则极为重要: 保持 CSS 易于维护 保持代码清晰易懂 保持 CSS 的可拓展性 为了实现这一目标,我们要采用诸多方法. 本文档第一 ...

  9. CSS的编写规范

    一.前言 如上图,页面在渲染和画图时,耗时还是比较多的,这就对我们的编写要求愈加严格. 我们有很多方法来减少上图所示的页面加载耗时的,比如 但是更多的还是在于平时的编写规范,我们需要了解浏览器,让他更 ...

随机推荐

  1. What are the differences between struct and class in C++?

    Question: This question was already asked in the context of C#/.Net. Now I'd like to learn the diffe ...

  2. LVOOP设计模式在路上(二)-- 策略模式

    前言 最近工作还挺忙的,连着好些周都是单休了,今天休息在家就来写写关于策略模式的理解和labivew的实现. 正文 1.什么是策略模式 定义是这样描述的:它定义了算法家族,分别封装起来,让它们之间可以 ...

  3. Python 函数的作用域

    python中的作用域有4种: 名称 介绍 L local,局部作用域,函数中定义的变量: E enclosing,嵌套的父级函数的局部作用域,即包含此函数的上级函数的局部作用域,但不是全局的: B ...

  4. JS中的三种循环

    三种循环1.while 2.do while 3.for 1.while: 语法结构:while(条件){代码块:改变条件} 步骤:1.初始化变量   2.判断条件  3.执行代码块  4.改变初始条 ...

  5. 【读书笔记】iOS-UDID

    UIDevice类可以返回当前iOS设备的UDID,以前开发者通常使用UDID作为识别每台设备的唯一标识,然后从iOS5开始,苹果公司将这一功能标记为废止并不推荐使用,苹果公司在iOS6之后将这个功能 ...

  6. 【读书笔记】iOS-如何选择本地化应用

    早在2007年发布iPhone的时候 ,苹果并没有一同发布本地化SDK,苹果公司声称不需要本地SDK,鼓励大家使用JavaScript,CSS和HTML开发Web应用.但接下来剧情并没有按照苹果设计的 ...

  7. IDEA项目搭建十——使用slf4j和logback进行日志记录

    .简介 java里面日志分为两部分一个门面.一个实现,我们所熟知的SLF4j.Log4j.Log4j2.Logback的日志组件slf4j是门面提供的统一的入口,具体实现由log4j.log4j2.l ...

  8. python 提取linux的硬件信息

    1.代码实现目的 注:代码可以直接粘贴使用 为了实现对主机的整体有明确的了解,实现了下面的代码功能 代码主要功能是: 提取到主机的内存.硬盘.CPU.型号等信息 插入到mysql的数据库中 2.代码具 ...

  9. Kotlin入门(6)条件分支的实现

    上一篇文章介绍了字符串的相关操作,其中示例代码用到了if和for语句,表面上看,Kotlin对控制语句的处理与Java很像,可实际上,Kotlin在这方面做了不少的改进,所以本篇和下一篇文章就分别介绍 ...

  10. Kotlin入门(15)独门秘笈之特殊类

    上一篇文章介绍了Kotlin的几种开放性修饰符,以及如何从基类派生出子类,其中提到了被abstract修饰的抽象类.除了与Java共有的抽象类,Kotlin还新增了好几种特殊类,这些特殊类分别适应不同 ...