html：class名命名规范

2024-04-07 12:33| 来源: 网络整理| 查看: 265

1 前端开发命名规范 1.1 为什么要制定CSS命名规范

统一的命名规范，便于多人开发维护时代码统一，减少项目沟通和交接的成本，增加代码的语义化。

1.2 CSS命名规则

样式类名全部用小写，首字符必须是字母，禁止数字或其他特殊字符。由以字母开头的小写字母（a-z）、数字（0-9）、中划线（-）组成。

可以是单个单词，也可以是组合单词，要求能够描述清楚模块和元素的含义，使其具有语义化。避免使用 123456…,red,blue,left,right之类的（如颜色、字号大小等）矢量命名，如class="left-news"、class="2" ，以避免当状态改变时名称失去意义。尽量用单个单词简单描述class名称。

双单词或多单词组合方式：形容词-名词、命名空间-名次、命名空间-形容词-名词。例如：news-list、mod-feeds、mod-my-feeds、cell-title

1.3 Class 和 id的使用方法

把id留给后台开发和JS使用，除此之外页面的page id(如首页的外层需要一个ID id="pageIndex")，页面结构（header main footer）允许用id命名(ID命名建议使用驼峰命名)。其他禁止id使用在样式表CSS命名中，一律使用class命名。

1.4 命名空间

在编码思想上，我们可以将页面拆分成不同的层级（布局、模块、元件）。

什么是CSS命名空间？

通过统一的命名规范定义命名的范围，成为CSS class & id命名空间。

布局: 以语义化的单词layout作为命名空间，例如主栏布局命名 layout-main，只改变layout-命名空间后面的命名，layout始终保留。布局的命名空间为layout-xxx。

模块：页面是由一个或多个模块组成，模块的英文单词是module，规范简写成mod，如新闻模块mod-news，照片展示模块mod-photo-show。模块的命名空间为mod-xxx 。

元件：元件是属于模块内部的，也可以说模块是由元件和它内部的自有元素组成。如用户照片信息元件cell-user-photo。元件的命名空间为cell-xxx 。

1.5 通用命名 (1)页面框架命名，一般具有唯一性，推荐用ID命名 ID名称命名ID名称命名头部header主体main脚部footer容器wrapper侧栏sideBar栏目column布局layout (2)模块结构命名 Class名称命名Class名称命名模块(如：新闻模块)mod (mod-news)标题栏title内容content次级内容sub-content (3)导航结构命名 Class名称命名Class名称命名导航nav主导航main-nav子导航sub-nav顶部导航top-nav菜单menu子菜单sub-menu (4)一般元素命名 Class名称命名Class名称命名二级sub面包屑breadcrumb标志logo广告bner(禁用banner或ad)登陆login注册register/reg搜索search加入join状态status按钮btn滚动scroll标签页tab文章列表list短消息msg/message当前的current提示小技巧tips图标icon注释note指南guide服务service热点hot新闻news下载download投票vote合作伙伴partner友情链接link版权copyright演示demo下拉框select摘要summary翻页pages主题风格themes设置set成功suc按钮btn文本txt颜色color/c背景bg边框border/bor居中center上top/t下bottom/b左left/l右right/r添加add删除del间隔sp段落p弹出层pop公共global/gb操作op密码pwd透明tran信息info重点hit预览pvw单行输入框input首页index日志blog相册photo留言板guestbook用户user确认confirm取消cancel报错error (5)全局皮肤样式文字颜色(命名空间text-xxx)

text-c1, text-c2,text-c3……

背景颜色(命名空间bg -xxx)

bg-c1,bg-c2,bg-c3……

边框颜色(命名空间border-xxx)

border-c1,border-c2,border-c3……

【本文地址】

公司简介

联系我们