在很多开发人员眼里,编码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中的嵌套 【表示...不曾用过】
避免非必要的嵌套:你可以使用,但并不意味这应该使用
什么时候用嵌套:限制在父元素内(即后代选择器)+ 多个需要嵌套时才用
参考及扩展阅读
【1】编码规范 by @mdo
【2】关于shorthand properties 的文章,对于不太熟悉简写属性声明及其行为的用户很有用。
【3】HTML5规范
【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的代码编写规范,布布扣,bubuko.com