web前端编码规范/编码习惯❤️-CFANZ编程社区

web前端编码规范/编码习惯

一、CSS文件命名规范
二、页面结构命名
三、导航命名
四、功能命名
五、CSS书写规范-性能优化方案
六、HTML书写规范
七、CSS语法
八、CSS声明顺序
九、媒体查询位置
十、前缀属性
十一、属性简写
十二、LESS 和 SASS 中的运算符
十三、Class 命名

一、CSS文件命名规范

全局样式	布局、版面	字体样式	按钮样式	主要的	专栏	主题	模块	基本共用
global.css	layout.css	font.css	button.css	master.css	columns.css	themes.css	module.css	base.css

二、页面结构命名

内容/容器	页头	页面主体	模块头	页尾	栏目	模块	左右中	模块主题内容容器	页面外围控制整体布局宽度
content/container	header	main	hd	footer	column	mod	left right center	md	wrapper

三、导航命名

导航	主导航	子导航	顶导航	边导航	左导航	右导航	菜单	子菜单	摘要
nav	main nav	sub nav	top nav	sidebar	left side bar	right side bar	menu	submenu	summary

四、功能命名

标志	广告	登陆	登录条	注册	搜索	功能区	栏目标题	加入	状态
logo	banner	login	login-bar	register	search	shop	title	join-us	status
按钮	滚动	标签页	文章列表	提示信息	当前的	小技巧	图标	注释	指南
btn	scroll	tab	list	msg	current	tips	icon	note	guild
服务	热点	新闻	下载	投票	合作伙伴	友情链接	版权	活动元素	未活动元素
service	hot	news	download	vote	partner	friend-link	copyright	active	normal

（个人有个人的书写规范，不做强制要求）

五、CSS书写规范-性能优化方案

1、禁止class 与 id重名
2、书写顺序：布局定位属性–>自身属性–>文本属性–>其他属性

.box{
    /* 布局定位类 */
    float:left;
    /* 自身属性 */
    width:100px;
    height:100px;
    /* 文本类 */
    text-align:left;
    /* 其他属性 */
    background:red;
}

六、HTML书写规范

在属性上，使用双引号，不要使用单引号。
HTML 属性应该按照特定的顺序出现以保证易读性。
1. class 2. id, name 3. data-* 4. src, for, type, href, value 5. title, alt 6. role, aria-*Classes 是为高可复用组件设计的，所以他们处在第一位。Ids 更加具体而且应该尽量少使用（例如, 页内书签），所以他们处在第二位。
Boolean 属性指不需要声明取值的属性。XHTML 需要每个属性声明取值，但是 HTML5 并不需要。简而言之，不要为 Boolean 属性添加取值。
在JavaScript文件中生成标签让内容变得更难查找，更难编辑，性能更差。应该尽量避免这种情况的出现。

七、CSS语法

使用组合选择器时，保持每个独立的选择器占用一行。
为了代码的易读性，在每个声明的左括号前增加一个空格。
声明块的右括号应该另起一行。
每条声明应该只占用一行来保证错误报告更加准确。
所有声明应该以分号结尾。虽然最后一条声明后的分号是可选的，但是如果没有他，你的代码会更容易出错。
逗号分隔的取值，都应该在逗号之后增加一个空格。
不要在颜色值 rgb(), rgba(), hsl(), hsla(), 和 rect() 中增加空格
不要在属性取值或者颜色参数前面添加不必要的 0 (比如，使用.5替代 0.5 和 -.5px 替代 0.5px)。
所有的十六进制值都应该使用小写字母，例如 #fff。因为小写字母有更多样的外形，在浏览文档时，他们能够更轻松的被区分开来。
尽可能使用短的十六进制数值，例如使用 #fff 替代 #ffffff。
为选择器中得属性取值添加引号，例如 input[type="text"]。他们只在某些情况下可有可无，所以都使用引号可以增加一致性。
不要为0指明单位，比如使用 margin: 0; 而不是 margin: 0px;。

八、CSS声明顺序

相关的属性声明应该以下面的顺序分组处理：

Positioning
Box model 盒模型
Typographic 排版
Visual 外观

Positioning 处在第一位，因为他可以使一个元素脱离正常文本流，并且覆盖盒模型相关的样式。盒模型紧跟其后，因为他决定了一个组件的大小和位置。其他属性只在组件内部起作用或者不会对前面两种情况的结果产生影响，所以他们排在后面。
例如：

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

九、媒体查询位置

尽量将媒体查询的位置靠近他们相关的规则。不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部。这样做只会让大家以后更容易忘记他们。

十、前缀属性

当使用厂商前缀属性时，通过缩进使取值垂直对齐以便多行编辑。
例如：

/* Prefixed properties */
.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

十一、属性简写

坚持限制属性取值简写的使用，属性简写需要你必须显式设置所有取值。常见的属性简写滥用包括:

padding
margin
font
background
border
border-radius

大多数情况下，我们并不需要设置属性简写中包含的所有值。例如，HTML 头部只设置上下的 margin，所以如果需要，只设置这两个值。过度使用属性简写往往会导致更混乱的代码，其中包含不必要的重写和意想不到的副作用。

十二、LESS 和 SASS 中的运算符

为了提高代码可读性，在数学运算外增加括号，并且在取值，变量和运算符之间增加空格。
例如：

// Bad example
.element {
  margin: 10px 0 @variable*2 10px;
}

// Good example
.element {
  margin: 10px 0 (@variable * 2) 10px;
}

十三、Class 命名

保持 Class 命名为全小写，可以使用短划线（不要使用下划线和 camelCase 命名）。短划线应该作为相关类的自然间断。(例如，.btn 和 .btn-danger)。
避免过度使用简写。.btn 可以很好地描述 button，但是 .s 不能代表任何元素。
Class 的命名应该尽量短，也要尽量明确。
使用有意义的名称；使用结构化或者作用目标相关，而不是抽象的名称。
命名时使用最近的父节点或者父 class 作为前缀。
使用.js-* classes来表示行为(相对于样式)，但是不要在CSS中定义这些 classes。