HTML和CSS的代码编写规范

在很多开发人员眼里,编码HTML简直容易极了,编写CSS不但简单有时还会显得很繁琐-相同的属性得一个劲不停地写。为此,曾经自己也迷惑过也遇到过不少问题,但随着写&读的前端代码渐渐增多,慢慢体会到,“能写”和“会写”之间还是有一定距离的。很多时候,你可以“这样做”,但并不意味着“你应该”这么做。

合理地编写HTML和CSS,可以让代码看起来更专业。即便是很简单的几行代码,也要写的有性格。嗯~用饱含工匠精神的态度去写码,你一定会在苦逼中作乐的。

以下整理些从别人那读到学到的,同时自己认可的琐碎的点,供实战中践行。

HTML

1、标准模式声明  

     HTML页面第一行,添加标准模式的声明。eg. <!DOCTYPE html>
     原因:可确保在每个浏览器中拥有一致的表现。

2、字符编码

     要明确声明。eg.<meta charset="UTF-8">
     原因:明确声明字符编码,可确保浏览器快速&容易判断用哪种方式去渲染页面内容。

3、引入CSS 和 JavaScript 文件时     

  不需要指定type属性。
  原因:跟据HTML5规范,"text/css"和"text/javascript"分别都是默认值
  eg.<link rel="stylesheet" href="xxx.css">
      <script src="xxx.js"></script>

4、HTML属性的书写顺序

    建议按照以下顺序排列,可读性好。

     (1)class:class用于标识高度可复用组件,所以排首位
     (2)id, name:id用于标识具体组件,所以排第二。
     (3)data-*
     (4)src, for, type, href
     (5)title, alt
     (6)aria-*, role
     eg.
         <a class="xxx" id="xxx" data-index="x" href="#">link</a>
         <img src="xxx" alt="xxx">
         <input class="xxx" type="text">

5、布尔型属性

    布尔型属性在声明时,可以不赋值。
    原因:XHTML规范要求要赋,但是HTML5规范不需要。更多信息查看
    eg.
       <input type="text" disabled>
       <option value="1" selected>1</option>
       <input type="checkbox" value="1" checked>

6、其他细节

(1)自闭元素在尾部不要添加斜线。参见HTML规范。eg.<img src="xxx.jpg">。参考 HTML5规范

(2)成对的标签,结束标签一定要有

(3)定义属性时,建议用双引号,不要用单引号。

(4)尽量减少标签数量:任何时候都要尽量使用最少的标签 & 保持最小的复杂度。

       尽量减少标签数量、尽量避免多余的父元素。
       很多时候,这需要迭代和重构来实现。所以,当写完“实现功能”的代码后,不妨自己再通读下自己的代码(往往这个时候,可发现挺多可优化的点。嗯~因为关注点不同:前者重在功能,后者重在重构。)

(5)尽量不要用js生成标签

       原因:这样会让内容变得不易查找不易编辑,且降低性能。

7、其他:待进一步考证

       只因自己平时没碰到类似的场景,所以不好做判断。。。

(1)强烈建议为html根元素指定lang属性。lang属性,可参考规范

      原因:为文档设置正确的语言,有助于语音合成工具确定该怎么发音,有助于翻译工具确定该用啥规则等等。
      关于lang属性的知识,点击查看规范。

(2)IE兼容模式

       IE支持通过特定的<meta>来确定绘制当前页面所应该采用的IE版本。
       建议设置edge mode,从而通知IE采用其所支持的最新模式。stack overflow上有篇文章谈了这个。

 

CSS

1、尚未注意到的

(1)对于以逗号分隔的属性值:每个逗号后,都应该插个空格。eg. background-image: url(...), url(...);
(2)值内部的多个属性之间:不要加空格
(3)选择器中的属性:建议都加双引号,为了一致性(而且还有其他原因)

2、这么干的-但模棱两可的

(1)避免为0指定单位:margin:0 即可
(2)值小于1的,省略小数前面的0:即 -.5px代替 -0.5px,.5代替0.5
(3)十六进制值-全部小写:扫描文档时,小写字符易于分辩

3、平时就遵守着的

(1)每条声明-最好独行:更准确的错误报告
(2)若有选择器分组,每个单独成行
(3)空格:声明的左花括号之前;属性值前
(4)所有声明语句后,都写分号 <虽然最后一条声明语句后的分号;是可选的>
(5)16进制尽量简写:eg. #fff 而不是#ffffff

 

4、CSS声明顺序

 相关的属性声明归为一组,按照下面的顺序排列:
(1)定位 positioning:可以从正常的文档流中移除元素,还能覆盖盒模型的相关样式,所以首位。
(2)盒模型 box model:决定了组件的尺寸和位置,所以第二位。
(3)排版类 typographic
(4)视觉类 visual

5、简写形式的属性

 在需要显示地设置所有值的情况下,应尽量限制使用简写的属性声明。
 常见的滥用:
 padding, margin, font, background, border, border-radius 【??这不就是我经常简写的么
 
大部分情况下,我们不需要为简写形式的属性声明指定所有值。
例如,HTML 的 heading 元素只需要设置上、下边距(margin)的值,因此,在必要的时候,只需覆盖这两个值就可以。
过度使用简写形式的属性声明会导致代码混乱,并且会对属性值带来不必要的覆盖从而引起意外的副作用。

 

6、class命名

(1)只能出现:小写字符 和 波折号-(破折号应该用于相关的class命名,类似于命名空间) 而不是下划线也不是驼峰
       eg. .btn .btn-danger
(2)避免过多简写,比如 .btn 代表 button,但是 .s 就啥也不是
(3)class应尽可能短 & 意义明确
(4)要有意义:要有组织+有目的,不要用表现形式
(5)class的前缀:基于最近的父或基 作为新class的前缀
(6)用js-的class:来标识行为,与样式相对:且不应用到css中(同理:纯css样式的,也尽量不要用于脚本-不便于维护) 

7、CSS选择器

(1)对于通用的元素,用class:有利于渲染性能的优化
(2)经常出现的组件,避免使用属性选择器:影响浏览器性能 【各个选择器的性能如何??
(3)尽可能短:建议不要超过3个
(4)只有在必要的时候,才将class限制在最近的父元素内(及后代选择器) 【选择器并非越长越好】
 

8、代码组织

(1)以组件为单位组织代码段
(2)如果使用了多个 CSS 文件,将其按照组件而非页面的形式分拆,因为页面会被重组,而组件只会被移动。 【?页面会被重组,而组件只会被移动
(3)制定一致的注释规范。
(4)使用一致的空白符将代码分隔成块,这样利于扫描较大的文档。

9、代码注释

(1)代码要:自描述(嘿嘿,这个时候就可以少点注释了)
(2)好的注释:传达上下文关系、代码目的 (而不是很苍白地重申些废话) 
(3)可以英文注释(长的写完整句子,短的就可以写短语)
 

10、其他

因为用的少,所以。。。仅仅是知道,但还没使用场景。

(1)不要使用@import
       因为:@import指令要比<link>标签慢很多(不光增加了额外的请求次数,还会导致不可预料的问题)
       可替代的方法:
          a.用多个<link>
          b.通过Sass或Less类似的CSS预处理器将多个CSS文件编译成一个文件
          c.将CSS文件合并

(2)媒体查询的位置 【移动开发会较多】
       建议:将放在尽可能相关规则的附近
       不要将它们打包放在一个单一样式文件 or 文档底部

(3)Less和Sass中的嵌套 【表示...不曾用过】
       避免非必要的嵌套:你可以使用,但并不意味这应该使用
       什么时候用嵌套:限制在父元素内(即后代选择器)+ 多个需要嵌套时才用

 

参考及扩展阅读

【2】关于shorthand properties 的文章,对于不太熟悉简写属性声明及其行为的用户很有用。
【4】IE兼容模式<meta http-equiv="X-UA-Compatible" content="IE=Edge">
【5】HTML5规范:html、head、title、base、link、meta、style
【6】HTML5规范:boolean型属性
 
 
 

 

 

HTML和CSS的代码编写规范,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。