CSS规范--春风十里不如写好CSS

先吟几句:

最近看了看春风十里不如你,本来很少看剧的,暑假有点闲就看了,感觉不错,挺喜欢这部剧,就套了个名字,嘿嘿嘿。剧里面印象深刻的是《致橡树》这首诗,念几句:

我如果爱你,绝不像攀援的凌霄花,借你的高枝炫耀自己;
我如果爱你,绝不学痴情的鸟儿,为绿荫重复单调的歌曲;
也不止像险峰,增加你的高度,衬托你的威仪。

不骚了,回到正题,写css也一样需要爱,你爱一门技术就要用心付出,对知识寸土必争,寸草必得。写css容易,写好就需要下功夫了。如果我爱你,就会去研究怎么去写好你,下面先说说怎么规范的写css。


css语法规范:

  • 每条属性声明占一行,增加易读性
 /*bad*/
 body{margin: 0;padding: 0;}
 /*good*/
 body{
     margin: 0;
     padding: 0;
 }
  • 颜色采用十六进制写法(不使用颜色名),并且能够简写的进行简写:
/*bad*/
.example{
    color: #ffaabb;
}
/*good*/
.example{
    color: #fab;
}
  • 0值的单位进行省略,如将margin:0px,写成margin:0:
/*bad*/
.example{
    margin: 0px;
}
/*good*/
.example{
    margin: 0;
}
  • 有选择器组时,每个选择器占一行:
  body,
  html,
  p{
      margin: 0;
      padding: 0;
  }
  • 连字符使用-,而不使用_,因为能少按一个shift就少按,还有和js变量命名区分开。
/*bad*/
.index_list {}
/*good*/
.index-list {}
  • 选择器避免使用标签名。(首先可能使得一些不必要的标签带上样式,其次会对选择器寻找上也会在一定程度上浪费时间)
/*bad*/
.index-list li{}
/*good*/
.index-list .item{}
  • 媒体查询,不要写在文档最后或分开到另外文档,应该写在相应规则的附近,这样有利于修改和阅读
.index-nav{
    margin-top: 10px;
}
/*和相关的规则一起放*/
@media (min-width: 480px){
    .index-nav{
        margin-top: 5px;
    }
}
  • 前缀,css3的一些属性要注意带上前缀:
.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
  • 引号方面,使用双引号而不使用单引号,url不用使用引号:
/*no good*/
.example{
    font-family: 'Times New Roman',Georgia,Serif;
    background: url("../images/icon.png");
}
/*good*/
.example{
    font-family: "Times New Roman",Georgia,Serif;
    background: url(../images/icon.png);
}
  • 每条属性声明语句结束后加上分号,最后一条声明可省略分号,但不建议
  • 每个属性声明的冒号(:)后添加一个空格
  • 小于1的小数点的值,省略0,如0.5px,可写成.5px
  • 避免使用@ import指令。应使用link标签来引入css文件
  • 避免使用!important,这个优先级最高,滥用会使得维护困难,代码混乱
  • Less,Sass等预处理言的嵌套不超过3层
  • 避免使用id:(因为id优先级高,且具有唯一性,复用性差,而且id是html与js的挂钩,class是HTML与css的挂钩,这样能够让代码更为的清晰,不用说看到一个id,既要到js里查查有没有什么用,又到css里看看有什么样式,确实麻烦。)
  • 注释需要全面易懂,不要只写一点

css属性声明顺序规范:

css属性的书写顺序大致分为4组,从上到下依次书写:

  1. Positioning Model(定位的相关属性):
    • 有position,display,TRBL,z-index,float,overflow等
  2. Box Model (盒子模型的属性):
    • 有margin,padding,border,width,height等
  3. Typographic (文本,排版)
    • 有font,line-height,text-align
  4. Visual (视觉方面的)
    • 有background,color,transition,list-style

例子:

.example{
    content: "hello";
    /*positioning*/
    position: absolute;
    top: 10px;
    left: 12px;
    /*box model*/
    margin-top: 20px;
    width: 100px;
    heith: 100px;
    /*typographic*/
    text-align: center;
    font-size: 12px;
    /*visual*/
    color: #f00;
    background-color: #0f0;
}

特别的:如果有content属性时,需要把其放到最前面


css的文件分类:

文件分类这不会有什么标准,分好,适合自己开发和维护便可。比如:可以有公共的css,某个页面的css,重置的css,皮肤的css,部件的css等,可根据自己的需求,习惯等分类。不必太过拘束。

  • common.css(通用)
  • main.css(主要)
  • reset.css(重置)
  • skin.css(皮肤)
    ……

css选择器命名:

命名这东西可以说让每个前端开发的人员苦恼的东西,有时得想半天去想一个名字,煎熬啊。老是想,到底怎么样的命名才比较好呢?我这样命名接着会不会重复?等等。。。
到底怎样命名才比较规范,参考一下NEC规范或者是BEM规范。个人比较喜欢NEC,因为其比较简约些,详细的可以到NEC官网上看看。
看看NEC的分类:

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

我们参考NEC的分类命名的规范,学习学习它的命名,可以照着使用,也可以有自己不同的命名,可以根据团队的习惯等。规矩是死的,人是活的,能灵活去变通才是最好的,能够写出清晰易懂的代码就ok。


css命名常用单词:

  • 头:header
  • 尾:footer
  • 导航:nav
  • 侧栏:sidebar
  • 栏目:column
  • 外围容器:wrapper
  • 登录条:loginbar
  • 标志:logo
  • 广告:banner
  • 页面主体:main
  • 热点:hot
  • 新闻:news
  • 下载:download
  • 子导航:subnav
  • 菜单:menu
  • 子菜单:submenu
  • 搜索:search
  • 友情链接:friendlink
  • 页脚:footer
  • 版权:copyright
  • 滚动:scroll
  • 内容:content
  • 标签页:tab
  • 文章列表:list
  • 信息:msg
  • 小技巧:tips
  • 标题:title
  • 加入:joinus
  • 指南:guild
  • 服务:service
  • 注册:regsiter
  • 状态:status
  • 投票:vote
  • 合作伙伴:partner
  • 容器:container
  • 按钮:button

单词这方面能看懂就好,英语也要学号才行啊,有时候不懂怎么命名,就查查英文单词怎么写,看得出英语还是很重要啊。css的命名单词长度不要太长太冗余,看懂就好,有些单词过长可以适当的缩写一下。

最后说说:

如果想学好一门技术,就想要从各个方面研究他,本文也是,了解css也要css的规范,这对于强迫症的人就是很好的疗药,我就是这样,总觉得自己的css写得太不规范,也不容易维护,想要去修饰好,所以写写博客来强迫自己去改正,博客是个好东西,写给自己看看同时也写给别人看,所以这会有约束,从而不断的修饰改正错误,从中自己也会学到很多东西,可谓春风十里不如写博客。

posted @ 2017-08-18 07:20  渊源远愿  阅读(2388)  评论(9编辑  收藏  举报