编程大白话之—— CSS命名规范及推荐
css命名看似简单，但常常困扰着编程人员，特别是初入编程行业的小白，在遇到没接触过的领域或大的项目时，更是无从下手，今天我就带大家一起来熟悉一些常用或不常用、常见及不常见的一些命名规范及推荐，希望通过今天的编程大白话，让你对CSS命名有更多的了解。
还记得刚接触前端编程时，对于开始书写div的时候，给它们取名字就犯难，从简单的a,b,c组合或拼音开始，慢慢发现大家都是用一些简短的字母表达一些常用的名字，那么各种常见的div一般都是如何取名字的呢？下面归纳总结以及借鉴了部分内容，由于时间较急，后续注释备注会陆续更新补充请笑纳~~
常见class关键词
布局类：header, footer, container, main, content, aside, page, section
包裹类：wrap, inner
区块类：region, block, box
结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
列表类：list, item, field
主次类：primary, secondary, sub, minor
大小类：s, m, l, xl, large, small
状态类：active, current, checked, hover, fail, success, warn, error, on, off
导航类：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last
交互类：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay
星级类：rate, star
分割类：group, seperate, divider
等分类：full, half, third, quarter
表格类：table, tr, td, cell, row
图片类：img, thumbnail, original, album, gallery
语言类：cn, en
论坛类：forum, bbs, topic, post
方向类：up, down, left, right
其他语义类：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading...
常用的CSS命名
头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar
栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center
登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点：hot
新闻：news 下载：download 子导航：subnav 菜单：menu
子菜单：submenu 搜索：search 友情链接：friendlink 页脚：footer
版权：copyright 滚动：scroll 内容：content 标签页：tab
文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title
加入：joinus 指南：guild 服务：service 注册：regsiter
状态：status 投票：vote 合作伙伴：partner
(1)页面结构
容器: container 页头：header 内容：content/container
页面主体：main 页尾：footer 导航：nav
侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper
左右中：left right center
(2)导航
导航：nav 主导航：mainbav 子导航：subnav
顶导航：topnav 边导航：sidebar 左导航：leftsidebar
右导航：rightsidebar 菜单：menu 子菜单：submenu
标题: title 摘要: summary
(3)功能
标志：logo 广告：banner 登陆：login 登录条：loginbar
注册：regsiter 搜索：search 功能区：shop
标题：title 加入：joinus 状态：status 按钮：btn
滚动：scroll 标签页：tab 文章列表：list 提示信息：msg
当前的: current 小技巧：tips 图标: icon 注释：note
指南：guild 服务：service 热点：hot 新闻：news
下载：download 投票：vote 合作伙伴：partner
友情链接：link 版权：copyright
注意事项::
1.一律小写;
2.尽量用英文;
3.不加中槓和下划线;
4.尽量不缩写，除非一看就明白的单词。
CSS样式表文件命名
主要的 master.css
模块 module.css
基本共用 base.css
布局、版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css
修改类名-取名规范
(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字体大小,直接使用’font+字体大小’作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐目标的英文名称,如
.left { float:left; }
.bottom { float:bottom; }
(4)标题栏样式,使用’类别+功能’的方式命名,如
.barnews { }
.barproduct { }
驼峰式命名法介绍
Pascal Case 大驼峰式命名法：首字母大写。eg：StudentInfo、UserInfo、ProductInfo
Camel Case 小驼峰式命名法：首字母小写。eg：studentInfo、userInfo、productInfo
文件资源命名
文件名不得含有空格
文件名建议只使用小写字母，不使用大写字母。( 为了醒目，某些说明文件的文件名，可以使用大写字母，比如README、LICENSE。 )
文件名包含多个单词时，单词之间建议使用半角的连词线 ( - ) 分隔。
引入资源使用相对路径，不要指定资源所带的具体协议 ( http:,https: ) ，除非这两者协议都不可用。
变量命名
命名方式 : 小驼峰式命名方法
命名规范 : 类型+对象描述的方式，如果没有明确的类型，就可以使前缀为名词
函数
命名方式 : 小驼峰方式 ( 构造函数使用大驼峰命名法 )
命名规则 : 前缀为动词
can 判断是否可执行某个动作 ( 权限 ) 函数返回一个布尔值。true：可执行；false：不可执行
has 判断是否含有某个值 函数返回一个布尔值。true：含有此值；false：不含有此值
is 判断是否为某个值 函数返回一个布尔值。true：为某个值；false：不为某个值
get 获取某个值 函数返回一个非布尔值
set 设置某个值 无返回值、返回是否设置成功或者返回链式对象
常量
命名方法 : 全部大写
命名规范 : 使用大写字母和下划线来组合命名，下划线用以分割单词。
类的成员
公共属性和方法 : 同变量命名方式
私有属性和方法 : 前缀为下划线(_)后面跟公共属性和方法一样的命名方式
注释规范
单行注释 ( // )
单独一行：//(双斜线)与注释文字之间保留一个空格
在代码后面添加注释：//(双斜线)与代码之间保留一个空格，并且//(双斜线)与注释文字之间保留一个空格。
注释代码：//(双斜线)与代码之间保留一个空格。
多行注释 ( /* 注释说明 */ )
若开始(/*和结束(*/)都在一行，推荐采用单行注释
若至少三行注释时，第一行为/*，最后行为*/，其他行以*开始，并且注释文字与*保留一个空格。
HTML规范
文档规范
使用 HTML5 的文档声明类型 :
DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。
使用文档声明类型的作用是为了防止开启浏览器的怪异模式。
没有DOCTYPE文档类型声明会开启浏览器的怪异模式，浏览器会按照自己的解析方式渲染页面，在不同的浏览器下面会有不同的样式。
如果你的页面添加了
脚本加载
说到js和css的位置，大家应该都知道js放在下面，css放在上面。
但是，如果你的项目只需要兼容ie10+或者只是在移动端访问，那么可以使用HTML5的新属性async，将脚本文件放在
内兼容老旧浏览器(IE9-)时：
脚本引用写在 body 结束标签之前，并带上 async 属性。这虽然在老旧浏览器中不会异步加载脚本，但它只阻塞了 body 结束标签之前的 DOM 解析，这就大大降低了其阻塞影响。
而在现代浏览器中：
脚本将在 DOM 解析器发现 body 尾部的 script 标签才进行加载，此时加载属于异步加载，不会阻塞 CSSOM（但其执行仍发生在 CSSOM 之后）。
语义化
我们一直都在说语义化编程，语义化编程，但是在代码中很少有人完全使用正确的元素。使用语义化标签也是有理由SEO的。
关于语义化的一些建议:
在开始之前，我想推荐两种简单的编写较好的CSS代码的指导方针:
1、为CSS类名定义的时候，尽量使用小写字母，如果有两个以上的单词，在每个单词之间使用”-”符或单词首字母大写(第一个单词除外)。如:”main-content”或”mainContent”。
2、优化CSS代码，仅创建关键主要的CSS类并重新为子元素使用符合HTML标准的标签(h1, h2, p, ul, li, blockquote,…)，例如,
…
…
alt标签不为空
标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。
假设由于下列原因用户无法查看图像，alt 属性可以为图像提供替代的信息：
网速太慢
src 属性中的错误
浏览器禁用图像
用户使用的是屏幕阅读器
从SEO角度考虑，浏览器的爬虫爬不到图片的内容，所以我们要有文字告诉爬虫图片的内容
结构、表现、行为三者分离
尽量在文档和模板中只包含结构性的 HTML；而将所有表现代码，移入样式表中；将所有动作行为，移入脚本之中。
在此之外，为使得它们之间的联系尽可能的小，在文档和模板中也尽量少地引入样式和脚本文件。
建议：
不使用超过一到两张样式表
不使用超过一到两个脚本（学会用合并脚本）
不使用行内样式（）
不在元素上使用 style 属性（
）
不使用行内脚本（）
不使用表象元素（i.e. , ,
不使用表象 class 名（i.e. red, left, center）
HTML只关注内容
HTML只显示展示内容信息
不要引入一些特定的 HTML 结构来解决一些视觉设计问题
不要将img元素当做专门用来做视觉设计的元素
样式上的问题应该使用css解决
严格模式
ECMAScript 5 严格模式可在整个脚本或独个方法内被激活。它对应不同的 javascript 语境会做更加严格的错误检查。严格模式也确保了 javascript 代码更加的健壮，运行的也更加快速。
严格模式会阻止使用在未来很可能被引入的预留关键字。
你应该在你的脚本中启用严格模式，最好是在独立的 IIFE 中应用它。避免在你的脚本第一行使用它而导致你的所有脚本都启动了严格模式，这有可能会引发一些第三方类库的问题。
变量声明
总是使用 var 来声明变量。如不指定 var，变量将被隐式地声明为全局变量
采用严格模式带来的好处是，当你手误输入错误的变量名时，它可以通过报错信息来帮助你定位错误出处。
js声明提前
javascript会自动将函数作用域内的变量和方法的定义提前（只是提前声明，赋值还是在原处）
使用严格等
总是使用 === 精确的比较操作符，避免在判断的过程中，由 JavaScript 的强制类型转换所造成的困扰
等同== 和严格等===的区别
==， 两边值类型不同的时候，要先进行类型转换，再比较。
===，不做类型转换，类型不同的一定不等。
==等同操作符
- 如果两个值具有相同类型，会进行===比较，返回===的比较值
- 如果两个值不具有相同类型，也有可能返回true
- 如果一个值是null另一个值是undefined，返回true
- 如果一个值是string另个是number，会把string转换成number再进行比较
- 如果一个值是true，会把它转成1再比较，false会转成0
false 除了和自身比较为 true 外，和 0，”” 比较也为 true
null 只和 undefined 比较时为 true， 反过来 undefined 也仅和 null 比较为 true，没有第二个
0 除了和 false 比较为 true，还有空字符串 ”” 和空数组 []
空字符串 ” 除了和 false 比较为 true，还有一个数字 0
===操作符：
要是两个值类型不同，返回false
要是两个值都是number类型，并且数值相同，返回true
要是两个值都是stirng，并且两个值的String内容相同，返回true
要是两个值都是true或者都是false，返回true
要是两个值都是指向相同的Object，Arraya或者function，返回true
要是两个值都是null或者都是undefined，返回true
真假判断
js中以下内容为假：
false
null
undefined
0
” (空字符串)
NaN
属性格式
为了保证一致性和可扩展性，每个声明应该用分号结束，每个声明换行。
属性名的冒号后使用一个空格。出于一致性的原因，
属性和值（但属性和冒号之间没有空格）的之间始终使用一个空格。
每个选择器和属性声明总是使用新的一行。
属性选择器或属性值用双引号（””），而不是单引号（”）括起来。
URI值（url()）不要使用引号。