长风破浪会有时
直挂云帆济沧海

css新手之常用样式命名规范标准

作为一个从业多年的前端猿,给同行业的小伙伴们提一些建设性的小建议,特别是对于刚入门的前端技术新手,养成规范书写代码的习惯是多么的重要,写的人显示了自我的专业性,看的人清晰也避免了过多的解释…话不多说了,直接进入正题吧,希望整理的这些内容能给你们节省一些到处搜索的时间:

———-类class的命名规范示例———-
(1)页面结构
容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
(2)导航
导航:nav
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submen
标题: title
摘要: summary
(3)功能
标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:regsiter
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright

———-注释的写法———-
/* Header / 这里是内容区 / End Header */

———-注意事项———-
1.一律小写;
2.尽量用英文;
3.不加中横线和下划线;
4.尽量不缩写,除非一看就明白的单词。

———-CSS样式表文件命名———-
主要的 master.css
模块 module.css
基本共用 base.css
布局、版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css

———-html规范———-
1.页面的第一行添加标准模式声明!DOCTYPEhtml;
2.代码缩进:tab键设置四个空格(通常在软件右下角设置相应空格大小);
3.html中除了开头的DOC和’UTF-8’或者head里特殊情况可以大写外,其他都为小写,css类都为小写;
4.建议为html根元素指定lang属性,从而为文档设置正确的语言lang=”zh-CN”;
5.不同doctype在不同浏览器下会触发不同的渲染模式;
6.非特殊情况下样式文件必须外链至…之间;非特殊情况下JavaScript文件必须外链至页面底部;
7.尽可能减少div嵌套;
8.在页面中尽量避免使用style属性,即style=”…”;写在相应的样式文件中;
9.对于属性的定义,确保全部使用双引号,绝不要使用单引号;
10.背景图片请尽可能使用sprite技术,减小http请求;
11.给区块代码及重要功能(比如循环)加上注释,方便后台添加功能;
12.不要使用@import,与标签相比,@import指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。

———-css规范CSS书写顺序———-
1.显示属性:display/list-style/position/float/clear…
2.自身属性(盒模型):width/height/margin/padding/border
3.行高:line-height
4.文本属性:color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…
5.其他:cursor/z-index/zoom/overflow
6.CSS3属性:transform/transition/animation/box-shadow/border-radius;
7.如果使用CSS3的属性,如果有必要加入浏览器前缀,则按照-webkit-/-moz-/-ms-/-o-/std的顺序进行添加,标准属性写在最后;

———-排版规范———-
1.如果是在html中写内联的css,则必须写成单行;
2.每一条规则的大括号{前后加空格;
3.属性名冒号之前不加空格,冒号之后加空格;
4.每一个属性值后必须添加分号;并且分号后空格;
5.多个selector共用一个样式集,则多个selector必须写成多行形式;

———-规则书写规范———-
1.使用单引号,不允许使用双引号;
2.每个声明结束都应该带一个分号,不管是不是最后一个声明;
3.除16进制颜色和字体设置外,CSS文件中的所有的代码都应该小写;
4.除了重置浏览器默认样式外,禁止直接为htmltag添加css样式设置;
5.每一条规则应该确保选择器唯一,禁止直接为全局.nav/.header/.body等类设置属性;

———-class命名———-
1.规则命名中,一律采用小写加中划线的方式,不允许使用大写字母或_;
2.命名避免使用中文拼音,应该采用更简明有语义的英文单词进行组合+;
3.不允许通过1、2、3等序号进行命名;避免class与id重名;
4.class用于标识某一个类型的对象,命名必须言简意赅;
5.尽可能提高代码模块的复用,样式尽量用组合的方式;
6.规则名称中不应该包含颜色(red/blue)、定位(left/right)等与具体显示效果相关的信息。应该用意义命名,而不是样式显示结果命名;

以上就是阿锋哥整理的一些关于css规范的内容了,希望能给大家提供一点小帮助,好事不留名就等于白干,古德拜~

赞(3)
未经允许不得转载:阿锋哥前端开发经验分享 » css新手之常用样式命名规范标准
分享到: 更多 (0)

几百块就能做营销型企业网站?

查看详情