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……
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变量是一种弱类型的变量,即声明变量时不需要指定其变量类型,也不需求遵循“先声明再使用”的规定,想用即可用. ...
Java语言基本语法(一)————关键字&;标识符(Java语言标识符命名规范&;Java语言的包名、类名、接口名、变量名、函数名、常量名命名规则 )
一.关键字 关键字的定义和特点 定义:被Java语言赋予特殊含义,用做专门用途的字符串(单词). 特点:关键字中所有字母均为小写 下面列举一些常用的关键字. 用于定义数据类型的关键字:byte.sho ...
Android命名规范(重点讲解:包名)
Android程序开发中,使用规范的命名有益于程序的开发和后期阅读.本文主要对Android程序包名的定义做详细介绍,并附带一些简单的命名规则. 一.标识符命名方法1 .小驼峰命名法,除首单词外,其余 ...
JavaScript变量名与函数名的命名规范
JavaScrip变量名与函数名的命名规范严格遵循以下5条: (1)首字符必须是字母.下划线.$,后跟任意的字母.数字.下划线.$ (2)严格区分大小写 (3)不能使用系统的关键字和保留字 (4)命名 ...
随机推荐
Git 简易手册
前言 这里就不介绍 git 了,表一看到命令行就怕怕,常用的命令也就这些,基本满足 99% 以上的项目需求,非常实用. 声明 欢迎转载,但请保留文章原始出处:) 博客园:http://www.cnbl ...
用JAVA写查询一个字符串中是否包含另外一个字符串以及出现的次数
package JAVA; import java.awt.List;import java.util.ArrayList;/** * * @author 梁小鱼 * */public class ...
fast db 学习
见 http://code.google.com/p/mmdbsolution/source/browse/trunk/+mmdbsolution+--username+SiliangDu1987%4 ...
SSIS 学习(3):数据流任务(下)【转】
前一篇文章SSIS 学习(2):数据流任务(上), 介绍了如何创建一个简单的ETL包,如何通过一个简单的数据流任务,将一个文本文件的数据导入到数据库中去.这些数据都保持了它原有的本色,一个字符不 多, ...
volatile之一--volatile不能保证原子性
Java语言是支持多线程的,为了解决线程并发的问题,在语言内部引入了 同步块 和 volatile 关键字机制在java线程并发处理中,有一个关键字volatile的使用目前存在很大的混淆,以为使用这 ...
[AngularJS 2 实践 一]My First Angular App
最近一直在看关于AngularJS 2的资料,查看了网上和官网很多资料,接下来就根据官网教程步骤一步步搭建我的第一个Angular App AngularJS 2说明请参考:http://cnodej ...
<;转>;ASP.NET学习笔记之在ASP.NET MVC中使用DropDownList
看到一篇关于dropdownlist的用法很好的阐述,比较清楚,留着,防止以后自己不记得,还可以瞅瞅. 在ASP.NET MVC中,尽管我们可以直接在页面中编写HTML控件,并绑定控件的属性,但更方便 ...
通过Elasticsearch使用的你的数据
Elasticsearch 系列导航 elasticsearch 与 elasticsearch-head 的安装 ElasticSearch Index API && Mapping ...
Java中的String,StringBuilder,StringBuffer
String被final修饰,不可变,每次更改其实是重新创建了一个对象.StringBuilder,StringBuffer是可变的. StringBuffer是线程安全的,StringBuilder ...