html:class名命名规范
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……
html:class名命名规范的更多相关文章
- Github库名命名规范
必要性说明 由于迁移到Github上的项目越来越多,对项目的管理越来越困难.由于各项目命名具有随意性,用之代表git仓库名后就很难快速回忆起这个项目的相关细节,通常需要不断打开某个库才能有所了解.因此 ...
- java中变量和标识符名命名规范
变量存放的是内存地址,当定义一个变量后,我们可以通过变量名找到该内存地址,可以修改该内存区间的值. 标识符的命名规范:首字母:字母,下划线,$符号:其余部分:数字,字母,下划线,$. 标识符应该避开j ...
- java包名命名规范
Java的包名都有小写单词组成,类名首字母大写:包的路径符合所开发的 系统模块的 定义,比如生产对生产,物资对物资,基础类对基础类.以便看了包名就明白是哪个模块,从而直接到对应包里找相应的实现. 由于 ...
- java中包名命名规范
在idea中创建package遇到的问题 发现一个问题,当我创建一个lesson-02的package时,输入这个包名后,package自动变成了文件夹 在网上搜索发下java包名一般是小写字母进行命 ...
- java包名命名规范[【转】
indi : 个体项目,指个人发起,但非自己独自完成的项目,可公开或私有项目,copyright主要属于发起者. 包名为“indi.发起者名.项目名.模块名.……”. pers : 个人项目,指个人发 ...
- 【学习笔记】Shell-1 变量:命名规范、变量赋值/取值/取消、局部变量/全局变量、预设环境变量
1.Shell变量 从变量的实质上来说,变量名是指向一片用于存储数据的内存空间. Shell变量是一种弱类型的变量,即声明变量时不需要指定其变量类型,也不需求遵循“先声明再使用”的规定,想用即可用. ...
- 10分钟了解代码命名规范(Java、Python)
前言 关于代码命名,我相信是经常困扰很多小伙伴的一个问题,尤其是对于强迫症晚期患者.怎么说呢,每次小编在写代码之前,总会在想啊想啊,用什么命名法好呢?对于经常在C++.Java.Python等主流语言 ...
- Java语言基本语法(一)————关键字&标识符(Java语言标识符命名规范&Java语言的包名、类名、接口名、变量名、函数名、常量名命名规则 )
一.关键字 关键字的定义和特点 定义:被Java语言赋予特殊含义,用做专门用途的字符串(单词). 特点:关键字中所有字母均为小写 下面列举一些常用的关键字. 用于定义数据类型的关键字:byte.sho ...
- Android命名规范(重点讲解:包名)
Android程序开发中,使用规范的命名有益于程序的开发和后期阅读.本文主要对Android程序包名的定义做详细介绍,并附带一些简单的命名规则. 一.标识符命名方法1 .小驼峰命名法,除首单词外,其余 ...
随机推荐
- 疑问:VS在调试的过程中,总是会提示正在加载picface.dll的符号,然后卡死在那
环境: 硬件环境: PC 软件环境: Windows7 VS2012 MFC程序调试 现象: 调试的过程中,提示“正在从以下目录加载picface.dll的符号:C:\windows\dll”,然后就 ...
- java基础(3)java常用API
1 ArrayList集合 01 创建 import java.util.ArrayList; /* 泛型:装在集合中的元素,全都是统一的一种类型.泛型必须是引用类型,不能是基本数据类型 */ pub ...
- Web Server和Application Server之间的区别?
An "application server" is a fuzzy concept. Really, it just means software that hosts plug ...
- python------Socket网络编程(二)粘包问题
一.socket网络编程 粘包:服务端两次发送指令在一起,它会把两次发送内容合在一起发送,称为粘包,从而出现错误. 解决方法:(比较low的方法) 有些需要实时更新的,用sleep有延迟,不能这样解决 ...
- ANSYS耦合
目录 定义 如何生成耦合自由度集 1.在给定节点处生成并修改耦合自由度集 2.耦合重合节点. 3.迫使节点有相同的表现方式 生成更多的耦合集 1. CPLGEN 2.CPSGEN 使用耦合注意事项 约 ...
- WebSocket是什么原理?为什么可以实现持久连接?
作者:Ovear 链接:https://www.zhihu.com/question/20215561/answer/40316953来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...
- phpStudy2018 在win7下切换php7不成功解决办法
phpstudy 由2016升级到2018后,在切换版本时,php5.6及以下版本可以正常切换,切换7.0以上的版本时访问页面报 0xc000007b 错误,网上找了很多方法都没能解决,最后发现是没装 ...
- 由override 和 overload 引发的学习感悟
工作已三年的我,竟然面试的时候去裸考了.想当然的认为有很多东西会在工作中不知不觉积累下来,现在想想,真是扯淡... 我的三年的工作经验是开发测试的工作,主要负责测试用例的自动化实现,稍深一些的是自动化 ...
- forward reference前向引用,gloal values and local values全局变量和局部变量,recursive function递归函数
1.全局变量与局部变量练习 1 # -*- coding: UTF-8 -*- 2 def bar(): 3 print('from bar') 4 def foo(): 5 print('from ...
- 如何在同一主机中添加多个homestead并行开发
参考源 https://blog.csdn.net/smm188/article/details/79356150 1,在项目目录 git clone homestead 后(见上面流程中的第四步), ...