通用的 CSS 命名惯例

前端开发 Dec 18, 2020

在参与规模庞大、历时漫长、且参与人数众多的项目时,要确保每一行代码都像是同一个人编写的;这就要求所有开发者,都遵守相同的代码规范。在先前的文章前端项目开发规范意见,从宏观角度,对前端开发提出了些许建议。本问就 “CSS 命名“这一普遍性难题,做下探讨。

通用规则

  • 保持 CSS 易于维护;
  • 保持代码清晰易懂;
  • 保持 CSS 的可拓展性;

为实现这一目标,无数仁人志士,贡献了大量的方案,如 CSS 预处理、CSS Framework(tailwindcss)、Postcsscss-modules、以及 CSS 命名规范(BEM)等等;但是否能达成目标,还是得取决于写代码的人;有挑选性整理一些 CSS 代码规范,以供参考:

通用 CSS 命名

文本命名规范

名称 描述
index.css 一般用于首页建立样式
head.css 头部样式,当多个页面头部设计风格相同时使用
base.css 共用样。
style.css 独立页面所使用的样式文件
global.css 页面样式基础,全局公用样式,页面中必须包含
layout.css 布局、版面样式,公用类型较多时使用
module.css 模块,用于产品类页,也可与其它样式配合使用
master.css 主要的样式表
columns.css 专栏样式
themes.css 主体样式
forms.css 表单样式
mend.css 补丁,基于以上样式进行的私有化修补

页面结构命名

名称 描述
page 代表整个页面,用于最外层
wrap 外套,将所有元素包在一起的一个外围包,用于最外层
wrapper 页面外围控制整体布局宽度,用于最外层
container 一个整体容器,用于最外层
head,header 页头区域,用于头部
nav 导航条
content 内容,网站中最重要的内容区域,用于网页中部主体
main 网站中的主要区域(表示最重要的一块位置),用于中部主体内容
column 栏目
sidebar 侧栏
foot,footer 页尾、页脚。网站一些附加信息放置区域

功能命名

名称 描述
logo 标记网站logo标志
banner 标语、广告条、顶部广告条
login 登录
loginbar 登录条
register 注册
tool, toolbar 工具条
search 搜索
searchbar 搜索条
searchlnput 搜索输入框
shop 功能区,表示现在的
icon 小图标
label 商标
homepage 首页
subpage 二级页面子页面
hot 热门热点
list 文章列表
scroll 滚动
tab 标签
sitemap 网站地图
msg 或 message 提示信息
current 当前的
joinus 加入
status 状态
btn 按钮
tips 小技巧
note 注释
guild 指南
arr, arrow 标记箭头
service 服务
breadcrumb 即页面所处位置导航提示
download 下载
vote 投票
siteinfo 网站信息
partner 合作伙伴
link, friendlink 友情链接
copyright 版权信息
siteinfoCredits 信誉
siteinfoLegal 法律信息

导航命名

名称 描述
nav, navbar, navigation 导航条或导航包
topnav 顶部导航
mainbav 主导航
subnav 子导航
sidebar 边导航
leftsidebar 左导航
rightsidebar 右导航
title 标题
summary 摘要
menu 菜单
submenu 子菜单
drop 下拉
dorpmenu 下拉菜单
links 链接菜单

您可能喜欢的文章

Tags

nicejade

倾城之链城主;晚晴幽草轩轩主;天意人间舫舫主;静轩之别苑阁主;悠然宜想亭主持。

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.