HTML 和 CSS 的编码规范
-
HTML编码规范
- class 必须单词全字母小写，单词间以 - 分隔
- class 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名
- 标签名必须使用小写字母
- 标签使用必须符合标签嵌套规则
- HTML 标签的使用应该遵循标签的语义
- 属性名必须使用小写字母，属性值必须用双引号包围
- 自定义属性建议以 xxx- 为前缀，推荐使用 data-
- ...
-
CSS 编码规范
- 语法不区分大小写，但建议统一使用小写
- 不使用内联的 style 属性定义样式
- id 和 class 使用有意义的单词，分隔符建议使用 -
- 有可能就是用缩写
- 属性值是 0 的省略单位
- 块内容缩进
- 属性名冒号后面添加一个空格
- ...
CSS 命名技巧
- 语义化
- 语义化标签优先
- 基于功能命名、基于内容命名、基于表现命名
- 简略、明了、无后患
- tips：
- 命名范例
1. 所有命名都使用英文小写
推荐：<div class="main"></div>
不推荐：<div class="Main"></div>
2. 命名用双引号包裹
推荐：<div id="header"></div>
不推荐：<div id=header></div>
3. 用中横线连接
推荐：<div class="mod-modal"></div>
不推荐：<div class="modModal"></div>
4. 命名体现功能，不涉及表现样式（颜色、字体、边框、背景等）
推荐：<div class="text-lesser"></div>
不推荐：<div class="light-grey"></div>
常见命名1
.wrap 或 .wrapper 用于外侧包裹
.container 或 .ct 包裹容器
.header 用于头部
.body 页面 body
.footer 页面尾部
.aside 或 .sidebar 用于侧边栏
.content 和 .header .footer 对应， 用于主要内容
.navigation 导航元素
.pagination 分页
常见命名2
.tabs > .tab tab切换
.breadcrumbs 导航列表、面包屑
.dropdown 下拉菜单
.article 文章
.main 用于主体
.thumbnail 头像、小头像
.media 媒体资源
.panel 面板
.tooltip 鼠标放置上去的提示
.popup 鼠标点击弹出的提示
常见命名3
.button 或 .btn 按钮
.ad 广告
.subnav 二级导航
.menu 菜单
.tag 标签
.message 或 .notice 提示消息
.summary 摘要
.logo logo
.search 搜索框
.login 登陆
常见命名4
.register 注册
.username 用户名
.password 密码
.banner 广告条
.copyright 版权
.modal 或 .dialog 弹窗
常见命名5
var 名字 = {
状态: [
'inverse', 相反的、倒转，可以表示反转的状态（reverse）
'toggled', 拴牢、系紧（绑定 binding）
'switched', 转换的、开关
'original', 原始的、原型
'initial', 最初的
'identified', 被识别的、被认同者（标识符 identifier）
'disabled', 残废的，无法使用的，可以表示禁用的状态
'loading', 载入，可以表示加载的状态
'pending', 在...期间，可以表示阻塞的状态
'syncing', 同时发生
'default' 默认
],
修饰: [
'dark', 黑暗的、深色的
'light', 明亮的、浅色的
'shaded', 色彩较暗的
'flat', 扁平的
'ghost', 幽灵，可以用来表示 根据情况展现或消失
'maroon', 褐红色、孤立的，可以用来表示单独的（孤独 alone）
'pale', 苍白的、屋里的、暗淡的，可以用来表示 失去某种状态的样子（.popup 好像更贴切）
'intense', 强烈的、紧张的、热情的，可以用来表示动效多的元素的样子（.active 好像更贴切）
'twisted', 扭曲的，可以用来表示变形的元素的样子（.transformation 好像更贴切）
'narrow', 狭窄的、勉强的、有限的
'wide', 宽的、广阔的、充分的
'smooth', 顺利的、光滑的
'separate', 分开的、不同的
'clean', 清洁的、干净的，可以用来表示 清除状态
'sharp', 急剧的、锋利的
'aligned' 对齐的、均衡的
],
元素: [
'pagination', 标记页数、页码，用于 分页
'modal', 模式的、情态的，用于 弹窗（对话、回话 dialog）
'popup', 弹出、发射，用于 鼠标点击弹出的提示，也可以用于弹窗
'article', 文章
'story', 故事、小说
'flash',
'status', 状态、情形
'state', 情形
'media', 媒体
'block', 块
'card', 卡片（和 panel 类似）
'teaser', 戏弄者、强求者
'badge', 徽章、标记（符号 sign、标签 label、标记 符号 mark）
'label', 标签
'sheet', 表
'poster', 海报、广告（横幅图片 banner、广告 ad）
'notice', 通知、公告（消息 message）
'record', 记录、录音
'entry', 进入、入口、登记
'item', 条款、项目
'figure', 计算、出现（计算 calculate）
'square', 正方形
'module', 模块、组件
'bar',
'button',
'action', 活动、功能（活跃的 active）
'knob' 鼓起、突出
],
布局: [
'navigation', 导航
'wrapper', 用于外侧包裹（wrap）
'inner', 内部的
'header', 头部、页眉
'footer', 底部、页脚
'aside', 侧边栏（sidebar）
'section', 节
'divider', 除法器、分隔物（使分离 分开 separate）
'content', 用于主要内容
'container', 用于包裹容器
'panel', 面板
'pane', 也可以用于面板
'construct', 构造、建造
'composition', 构成、合成物
'spacing', 调节间隔
'frame' 框架
]
}
CSS 书写规范
- tab 用四个空格表示
- css 的
: 后加个空格， { 前加个空格
- 每条声明后都加上分号
- 换行，而不是放到一行
- 颜色用小写，用缩写，
#fff
- 小数不用写前缀，
0.5s -> .5s；0不用加单位
- 尽量缩写，
margin: 5px 10px 5px 10px; -> margin: 5px 10px;
参考
