html class名字单引号,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……

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 ...