杭州前端外包

css命名个人规范

在不断的迭代开发过程,由于项目改版频繁,css文件以及css命名非常容易变得混乱,制定了项目css的相关规范

1)reset.css(浏览器样式重置) (不可改)

2)base.css(基本样式)

  //一般如下首字符缩写命名  :

    .w10{width:10px}

    .w_10{width:10%}

    .h10{height:10px}

    .h_10{ height:10%}

  // 其他样式名与参数之间用下划线分开如下:    

      .f_l{float:left} 

      .f_r{float:right}

  // 颜色样式命名 c_xxxxx 以c开头下划线连接 颜色值 如:      

       .c_E5E5E5{color:#E5E5E5;}

   后续添加基本样式,可如上面的样式规则添加(该文件不容许删除,只可进行添加基本样式,添加时请邮件知会下)  

3)common.css(项目中公有样式,基于改版频繁,可能修改的次数也比较多,修改的时候,邮件知会下大家)

4)其他页面,每个页面添加各自的样式文件,一个功能页面只添加一个,如

makeup.jsp页面添加makeup.css样式,样式内容为各自私有样式,如有可以公有的样式,请提取至common.css

命名规则:

每个页面下的样式名,取页面缩写名并用下划线连接你想命名的文字

如makeup.css中

.makeup_insureContent {

    border: 1px solid #BDBDBD;

    background-color: #FFF;

    padding: 5px 0;

    border-top: 0;

    font: 15px/18px "Microsoft Yahei";

    height: 240px;

}

避免后续css若需要合并出现样式覆盖问题

5)css/ plug文件夹下放置框架和插件的相关样式如:

jquery.qtip 的jquery.qtip.min.css样式


笔记原创链接,请看http://www.w3cfuns.com/blog-5442453-5404249.html


什么是css hack




原创文章请注明转载自杭州WEB前端外包网站本文地址:http://hz.35ui.cn/post/30.html,标题:css命名个人规范

【我来说两句】
分享到:

相关文章:


一个电商网站有多少个页面  (2017-7-6 15:17:54)

前端rem单位详解  (2017-6-30 15:21:53)

CSS hack  (2015-6-11 14:34:46)

css清除浮动  (2014-11-25 10:46:26)

CSS3 圆角(border-radius)  (2014-10-22 16:1:2)

实例详解CSS中position的fixed属性使用  (2014-9-11 15:9:17)

css盒子模型 css margin 外边框合并  (2014-8-21 10:17:19)

css_hack常用效果总结  (2014-7-26 17:52:50)


评论 0

发表评论:

杭州前端外包验证码

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。