摘要：命名规则样式类名全部用小写，首字符必须是字母，禁止数字或其他特殊字符。其他禁止使用在样式表命名中，一律使用命名。什么是命名空间通过统一的命名规范定义命名的范围，成为命名空间。
统一的命名规范，便于多人开发维护时代码统一，减少项目沟通和交接的成本，增加代码的语义化。
样式类名全部用小写，首字符必须是字母，禁止数字或其他特殊字符。由以字母开头的小写字母（a-z）、数字（0-9）、中划线 （-）组成。
可以是单个单词，也可以是组合单词，要求能够描述清楚模块和元素的含义，使其具有语义化。避免使用 123456…,red,blue,left,right之类的（如颜色、字号大小等）矢量命名，如class="left-news"、class="2" ，以避免当状态改变时名称失去意义。尽量用单个单词简单描述class名称。
双单词或多单词组合方式：形容词-名词、命名空间-名次、命名空间-形容词-名词。例如：news-list、mod-feeds、mod-my-feeds、cell-title
把id留给后台开发和JS使用，除此之外页面的page id(如首页的外层需要一个ID id="pageIndex")，页面结构（header main footer）允许用id命名(ID命名建议使用驼峰命名)。其他禁止id使用在样式表CSS命名中，一律使用class命名。
在编码思想上，我们可以将页面拆分成不同的层级（布局、模块、元件）。
什么是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 。
| ID名称 | 命名 | ID名称 | 命名 |
|---|---|---|---|
| 头部 | header | 主体 | main |
| 脚部 | footer | 容器 | wrapper |
| 侧栏 | sideBar | 栏目 | column |
| 布局 | layout |
| Class名称 | 命名 | Class名称 | 命名 |
|---|---|---|---|
| 模块(如：新闻模块) | mod (mod-news) | 标题栏 | title |
| 内容 | content | 次级内容 | sub-content |
| Class名称 | 命名 | Class名称 | 命名 |
|---|---|---|---|
| 导航 | nav | 主导航 | main-nav |
| 子导航 | sub-nav | 顶部导航 | top-nav |
| 菜单 | menu | 子菜单 | sub-menu |
| 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 |
text-c1, text-c2,text-c3……
bg-c1,bg-c2,bg-c3……
border-c1,border-c2,border-c3……
浮动
右浮动 fr 左浮动 fl
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1922.html
摘要：本篇介绍几种命名规范。使用的网站四其他命名规范等减少对结构的依赖增加重复性的使用几种命名规范比较与在命名上相反的点可以放心使用，以为都是在模块内但不推荐当前我们的网站略有思想更概括，中的，相当于的，相当于的，相当于的中文 本篇介绍几种CSS命名规范。 （规范详细请参考底部References) 一、NEC (nice easy css) 网易前端CSS开源项目 1.1 样式分类 重...
摘要：引言最近想将这几个月做过的东西组件化，然后首先想到的是编码规范化本文只涉及命名规范，搬来了造好的轮子。举例对齐样式使用对齐目标的英文名称。举例注意事项一律小写尽量用英文不加中杠和下划线尽量不缩写，除非一看就明白的单词。 引言：最近想将这几个月做过的东西组件化，然后首先想到的是 编码规范化！本文只涉及 CSS 命名规范，搬来了Alloyteam 造好的轮子。可能并不完全适用，在以后...
摘要：简评是一种很耗时的操作，如果有良好的命名规范可以节约很多的时间。一些团队使用连字符分隔符，而其他团队则倾向于使用更加结构化的称为的命名规范。一般来说，命名规范有三个问题要解决能够通过名字就能清楚选择器的功能。 简评：Debug CSS 是一种很耗时的操作，如果有良好的命名规范可以节约很多的 Debug 时间。 使用连字符（-）分隔字符串 你可能习惯了在 Javascript 中使用小驼...
摘要：前言在项目开发中对于名字的命名和书写老是感觉很混乱，这对于代码的可读性以及维护提出了挑战，所以在闲暇之余看了一些这方面的内容，现总结如下命名规则说明所有的命名最好都小写属性的值一定要用双引号括起来，且一定要有值如每个标签都要有开始和结束，且 前言 在项目开发中对于css名字的命名和书写老是感觉很混乱，这对于代码的可读性以及维护提出了挑战，所以在闲暇之余看了一些这方面的内容，现总结如下....
摘要：前言在项目开发中对于名字的命名和书写老是感觉很混乱，这对于代码的可读性以及维护提出了挑战，所以在闲暇之余看了一些这方面的内容，现总结如下命名规则说明所有的命名最好都小写属性的值一定要用双引号括起来，且一定要有值如每个标签都要有开始和结束，且 前言 在项目开发中对于css名字的命名和书写老是感觉很混乱，这对于代码的可读性以及维护提出了挑战，所以在闲暇之余看了一些这方面的内容，现总结如下....
阅读 1235·2021-10-14 09:50
阅读 1526·2019-08-30 15:54
阅读 992·2019-08-30 11:22
阅读 2887·2019-08-30 10:50
阅读 1767·2019-08-29 18:39
阅读 3001·2019-08-29 13:07
阅读 2038·2019-08-28 17:54
阅读 709·2019-08-26 17:44
