html class名字单引号,html：class名命名规范

86 阅读 0 评论 57 点赞

我是靠谱客的博主耍酷大船，最近开发中收集的这篇文章主要介绍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作为命名空间，例如