css书写规范

在前端领域,CSS(层叠样式表:Cascading Style Sheets)是绕不过的话题。

样式表定义如何显示 HTML 元素,就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

虽然CSS初学者易于上手,且趣味性十足,但是作为一项工程而言,还是需要有一定规范约束的。这里简单介绍下关于css的一些规范。

1. 书写顺序

一般而言css都有一定的书写顺序,而不是想起来什么属性写说明属性。一般css的书写顺序为:

  1. 位置(z-index position top display float ...)
  2. 大小边距(width padding margin ...)
  3. 文字(font line-height letter-spacing color ...)
  4. 背景(background border ...)
  5. 其他(animation transtion ...)

例如:

/* 错误示例 */
.test {
    font-size: 24px;
    background: #f6f6f6;
    color: red;
    padding: 10px 5px 12px;
    display: flex;
    z-index: 999;
}

/* 规范示例 */
.test {
    z-index: 999;
    display: flex;
    padding: 10px 5px 12px;
    color: red;
    font-size: 24px;
    background: #f6f6f6;
}

2. 注意缩写

缩写,就是属性名及属性值,能缩写则缩写。例如属性名、属性值、颜色、去掉小数点前的0等:

/* 错误示例 */
.test{
    padding-top: 0.9rem;
    padding-left: 1.2rem;
    padding-bottom: 0.8rem;
    padding-right: 1.2rem;
    font-family: serif;
    font-size: 100%;
    line-height: 1.2;
    background-color: #ff0000;
}

/* 规范示例 */
.test{
    padding: .9rem 1.2rem .8rem;
    font: 100%/1.2 serif;
    background-color: #f00;
}

3. 命名规范

命名规范两个注意点:

  1. 不要乱使用“id
    这是因为id在js中具有唯一性,防止多次使用而对脚本编写带来影响。而class类则可重复使用。另外id与class权重不同,优先级不同,id得按需使用。
  2. 长命名尽量使用中横线“-”来做短词分割,如main-cont
    用短横线而不用下划线分割有两点:1. 对浏览器解析更加兼容;2. js变量一般使用下划线命名,为做出良好区分,所以使用短横线。

4 常见css命名规则表

一般可用id来命名

4.1 页面结构

css名 表示规则
main 主体
container 容器
header
content 内容
footer
sidebar 侧边栏
nav 导航
column
wrapper 页面外围控制整体布局容器

4.2 导航

css名 表示规则
nav 导航
subnav 子导航
topnav 顶部导航
sidebar 侧边导航
menu 菜单
submenu 子菜单
title 一般指栏目标题
summary 摘要

4.3 功能

css名 表示规则
shop 功能区
loginbar 登录条
logo 标志
banner 广告位
hot 热点
news 新闻
like
download 下载
search 搜索
menu 菜单
submenu 子菜单
friendlink 友情链接
scroll 滚动
tags 标签
article 文章
list 列表
msg 指需要传达的信息
info 承载信息的简讯
copyright 版权
tips 提示
title 标题
joinus 加入我们
guide 指南
service 服务
register 注册
status 状态
vote 投票
partner 合作
btn 按钮
current 当前
icon 图标
note 注释

注意,用id选择器命名时,需要注意以下几点:

  • 使用英文
  • 小写
  • 不添加连接符,如-_
  • 除大众广知的(如:msg、btn)尽量不缩写

5. 常见css文件命名表

css名 表示规则
base.css 基础样式表
common.css 公用
themes.css 主题
reset.css 重设
font.css 文字
layout.css 版面
module.css 模块
column.css 专栏
... 等等

推荐阅读更多精彩内容