css/less书写规范

魅影
2022-01-18 / 0 评论 / 206 阅读 / 正在检测是否收录...

**一.属性规范
1.属性书写顺序**

(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等)。

总结:建议遵循 布局定位属性-->自身属性-->文本属性-->其他属性。

/推荐顺序/

.example {

       position: absolute;

       width: 100px;

       font-size: 20px;

       background-color: #ccc;

}

/不推荐顺序/

.example {

       width: 100px;

       background-color: #ccc;

       position: absolute;

       font-size: 20px;

}

2.属性用法规范

(1)缩进:建议使用4个空格做为一个缩进层级。

(2)非特殊场景尽量少使用!important,如果使用须添加必要的注释。

(3)属性定义必须另起一行,且属性定义后以分号结尾。

(4)选择器与"{"之间必须包含空格;属性名与之后的":"之间不允许包含空格;":"与属性值之间必须包含空格。

(5)尽量少使用将样式的定义写在标签中(如内联样式:style="color:red;"),也不要用js为元素添加内联样式。

3.属性简写

属性可以简写时,强制采用简写方式,可以精简代码且提高阅读体验。

(1)如padding,margin,font,color等等

/推荐写法/

.example {

     padding: 5px 10px;

}

/不推荐写法/

.example {

       padding-top: 5px;

       padding-bottom: 5px;

       padding-left: 10px;

       padding-right: 10px;

}
(2)小数点前面的'0'建议去除

/推荐写法/

.example {

 font-size: .8rem;

}

/不推荐写法/
.example {

 font-size: 0.8rem;

}
(3)使用十六进制表示颜色值

css 中的颜色值可以使用十六进制来表示,在可能的情况下,可以进行缩写,比如:#abf,#ccc。

4.嵌套规则:

(1)嵌套层级不超过四个层级。

(2) 在css,less中可以嵌套选择器,可以提升代码的简洁性和可读性,但是应该尽量避免使用没有任何内容的选择器。

应遵循css/less嵌套顺序:
a.当前选择器的@extend和@include

b.当前选择器的样式属性

c.父级选择器的伪类选择器(:first-child,:active等)

d.伪类元素(:before,:after)

e.父级选择器的声明样式

f.用 css 的上下文媒体查询

g.子选择器

二.命名规范
1.文件名称命名

不得包含汉字空格和特殊字符,全部采用小写方式,多个单词组成时,以中划线分割。

2.样式命名

采用相应样式效果、功能描述的单词或缩写,不得包含汉字空格和特殊字符。

(1)id命名:驼峰式命名法。建议尽量避免使用id作为样式控制。

(2)class命名:小写英文&数字&-(中划线)来组合命名。

(3)常规命名:命名中除众所周知的缩写外,尽量不采用缩写。

网页外层重要部分CSS样式命名:

外套: wrap

头部: header

主要内容: main

左侧: main-left

右侧: main-right

导航条: nav

内容 :content

底部: footer

常用的CSS命名规则

侧栏:sidebar

栏目:column

左右中:left right center

登录条:loginbar

标志:logo

广告:banner

页面主体:main

热点:hot

新闻:news

下载:download

子导航:subnav

菜单:menu

子菜单:submenu

搜索:search

友情链接:friendlink

页脚:footer

版权:copyright

滚动:scroll

内容:content

标签:tags

文章列表:list

提示信息:msg

小技巧:tips

栏目标题:title

加入:joinus

指南:guide

服务:service

注册:regsiter

状态:status

投票:vote

合作伙伴:partner

3.其他

(1)使用的类名应区别于用于js操作或其它用途的类名。

(2)建议每行不得超过120个字符,除非单行不可分割。

三.注释规范
1.统一采用 /**/,具体参照下方的写法。

2.缩进与下一行的代码保持一致;可位于一个代码行的末尾,与代码间隔一个空格。

3.css文件必须书写顶部注释,标明该文件隶属模块。

一个规则中有多条声明时,每条声明应独占一行;只有一条声明,整个规则可以写为一行。
四.使用规范

引用规范:不要使用@import,在使用less时除外,less使用@import,需避免在css中生成@import代码
五.图片

1.使用PNG格式时,使用场景为单色背景、图中主要颜色不超过3种的,应采用PNG-8编码保存。其它场合下,采用PNG-24保存。

2.推荐单个图片体积在10kb以下时,应考虑在css中以base64编码内联提供,不单独提供图片文件。

0

评论 (0)

取消