1. 首页
  2. 前端
  3. 前端

CSS 样式书写顺序及规范

在项目中,大部分前端程序员都没有按照良好的CSS书写规范来写CSS代码,每次写css样式都是用到什么就在样式表后添加什么,完全没有考虑到样式属性的书写顺序对网页加载代码的影响。后来逐渐才知道正确的样式顺序不仅易于查看,并且也属于css样式优化的一种方式。下面就开始学习吧!!

一、各种类型属性的书写顺序及作用

书写顺序

  1. 优先级第一定位属性:position display float left top right bottom overflow clear z-index
  2. 优先级第二自身属性:width height padding border margin background
  3. 优先级第三文字样式:font-family font-size font-style font-weight font-varient color
  4. 优先级第四文本属性:text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow line-height
  5. 优先级第五css3中新增属性:content box-shadow border-radius transform……

书写顺序的作用

减少浏览器reflow(回流),提升浏览器渲染dom的性能。

  1. 解析html构建dom树,解析css构建css树:将html解析成树形的数据结构,将css解析成树形的数据结构
  2. 构建render树:DOM树和CSS树合并之后形成的render树。
  3. 布局render树:有了render树,浏览器已经知道那些网页中有哪些节点,各个节点的css定义和以及它们的从属关系,从而计算出每个节点在屏幕中的位置。
  4. 绘制render树:按照计算出来的规则,通过显卡把内容画在屏幕上。

css样式解析到显示至浏览器屏幕上就发生在2、3、4步骤,可见浏览器并不是一获取到css样式就立马开始解析而是根据css样式的书写顺序将之按照dom树的结构分布render样式,完成第2步,然后开始遍历每个树结点的css样式进行解析,此时的css样式的遍历顺序完全是按照之前的书写顺序。

这里大家可能不是很理解,但只要记住书写样式时按照上面的书写顺序就会提高程序的性能与网页的流畅度。

未按照属性书写顺序:

按照属性书写顺序:(推荐使用)

二、CSS书写规范

1、使用CS缩写属性

CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。如下:

未缩写之前:

缩写之后:(推荐使用)

简写font属性需要注意以下几点:

  • 按照font-style font-variant font-weight font-size/line-height font-family顺序来写;
  • 先写字体大小在写字体;
  • font-size/line-height作为一组使用,中间用斜杠区分;
  • 多个值之间用空格分开;
  • 多个字体之间用逗号分开;

2、去掉小数点前的“0”

当属性值为小数并且小数点前面为0时,我们可以把0去掉,只需要将小数点与小数点后面的数字写出来就可以了。 如下:

未去0之前:

缩写之后:(推荐使用)

4、连字符CSS选择器命名规范

1)长名称或词组可以使用中横线来为选择器命名。
2)下划线 ‘ _’ 禁止出现在class命名中,全小写,统一使用 ‘-‘ 连字符。原因如下:

  • 浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的)
  • 能良好区分JavaScript变量命名(JS变量命名是用“_”)

正确命名方法如下:

5、不要随意使用Id

id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用。

6、为选择器添加状态前缀

有时候可以给选择器添加一个表示状态的前缀,让语义更明了,比如下图是添加了“.is-”前缀。
未添加了“.is-”前缀之前:

添加了“.is-”前缀之后:(推荐使用)(稍作改动)

7、删除CSS属性值为0的单位。
8、删除无用CSS样式。
9、使用有意义的名称,使用结构化或者作用目标相关的,而不是抽象的名称。
10、尽量不缩写,除非一看就明白的单词。
11、一律小写,不要使用驼峰命名法,例如:className。

三、CSS命名规范(规则)

1、页面结构

 

网页结构CSS命名
header
内容content/container
页面主体main
footer
导航nav
侧栏sidebar
栏目column
页面外围控制整体佈局宽度wrapper
左右中left right center

2、导航

网页结构CSS命名
导航nav
主导航mainbav
子导航subnav
顶导航topnav
边导航sidebar
左导航leftsidebar
右导航rightsidebar
菜单menu
子菜单submenu
标题title
摘要summary

3、功能

网页结构CSS命名
标志logo
广告banner
登陆login
登录条loginbar
注册register
搜索search
功能区shop
标题title
加入joinus
状态status
按钮btn
滚动scroll
标籤页tab
文章列表list
提示信息msg
当前的current
小技巧tips
图标icon
注释note
指南guild
服务service
热点hot
新闻news
下载download
投票vote
合作伙伴partner
友情链接friendlink
版权copyright

4、CSS样式表文件命名

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

5、css的注释方法

6、class的命名:
1)颜色 : 使用颜色的名称或者16进制代码,如下:

2)字体大小 : 直接使用”font+字体大小”作为名称,如下:

3)对齐样式 : 使用对齐目标的英文名称,如下:

4) 标题栏样式,使用”类别+功能”的方式命名,如下:

 

本文来自汪末末,经授权后发布,本文观点不代表爱前端立场,转载请联系原作者。

联系我们

咨    询:点击这里给我发消息

邮    箱:cyt_web@163.com

小程序:AI前端