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

参考及扩展阅读

【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

时间: 2024-10-27 09:41:22

HTML和CSS的代码编写规范的相关文章

前端代码编写规范

规范的目的 前端编程人员书写前端代码遵循一定的规范.按照规范编写代码可以使代码具有统一的风格,既可以提高团队协作效率,规范文件管理,可以减小一些错误风险,也有利于项目的代码维护和后期扩展. 规范的内容 前端代码主要包括html.css和JavaScript代码,分别负责页面的结构.表现和行为,严格保证三者的分离,尽量让三者没有太多的交互和联系,这样有利于代码的维护. 前端代码编写规范主要是对这三者进行,也就是html代码编写规范.css代码编写规范和JavaScript代码编写规范.这三个编写规

为什么谷歌要执行严格的代码编写规范(转)

我们在谷歌所做事情中另外一个让我感到异常有效.有用的制度是严格的编码规范. 在到Google工作之前,我一直认为编码规范没有什么用处.我坚信这些规范都是官僚制度下产生的浪费大家的编程时间.影响人们开发效率的东西. 我是大错特错了. 在谷歌,我可以查看任何的代码,进入所有谷歌的代码库,我有权查看它们.事实上,这种权限是很少人能拥有的.但是,让我感到惊讶的却是,如此多的编码规范-缩进,命名,文件结构,注释风格-这一切让我出乎意料的轻松的阅读任意一段代码,并轻易的看懂它们.这让我震惊-因为我以为这些规

代码规范的重要性之-为什么谷歌要执行严格的代码编写规范

我们在谷歌所做事情中另外一个让我感到异常有效.有用的制度是严格的编码规范. 在到Google工作之前,我一直认为编码规范没有什么用处.我坚信这些规范都是官僚制度下产生的浪费大家的编程时间.影响人们开发效率的东西. 我是大错特错了. 在谷歌,我可以查看任何的代码,进入所有谷歌的代码库,我有权查看它们.事实上,这种权限是很少人能拥有的.但是,让我感到惊讶的却是,如此多的编码规范-缩进,命名,文件结构,注释风格-这一切让我出乎意料的轻松的阅读任意一段代码,并轻易的看懂它们.这让我震惊-因为我以为这些规

Java学习---Java代码编写规范

编码规范 1 前言为确保系统源程序可读性,从而增强系统可维护性,java编程人员应具有基本类似的编程风格,兹制定下述Java编程规范,以规范系统Java部分编程.系统继承的其它资源中的源程序也应按此规范作相应修改. 2 适用范围本文档将作为java编程人员软件开发的编程格式规范.在项目Java部分的编码.测试及维护过程中,要求严格遵守. 3 命名规范定义这个规范的目的是让项目中所有的文档都看起来像一个人写的,增加可读性,减少项目组中因为换人而带来的损失. 3.1 Package 的命名Packa

php 代码编写规范

1 编写目的为了更好的提高技术部的工作效率,保证开发的有效性和合理性,并可最大程度的提高程序代码的可读性和可重复利用性,指定此规范.开发团队根据自己的实际情况,可以对本规范进行补充或裁减. 2 整体要求技术部php开发规范将参照PEAR的规范,基本采用PEAR指定的规范,在其基础上增加.修改或删除部分适合具体开发环境的规范.本规范只针对PHP开发过程中编码的规范,对于PHP开发项目中文件.目录.数据库等方面的规范,将不重点涉及.本规范包含了PHP开发时程序编码中命名规范.代码缩进规则.控制结构.

正确理解Java代码编写规范

本文从Java代码编写的初期到结尾,做了一次整体的总结,希望对初学者有帮助. 1.命名很重要 一个错误的命名会很误导人,不良的命名,对于阅读代码的人来说很纠结.一个良好的命名对自己也有很大的帮助. 我个人命名的变量都比较长,一般是单词的全称,这样代码读起来易懂,有些缩写你根本不知道它代表的单词是什么,除了像id代表identifier,org代表organization这些大家常见的缩写命名. 命名一个方法时候,最好能让大家见名知意,看到名字就能猜出你的功能,而不需要去看方法的注释,甚至是读源码

Python代码编写规范,你真的会吗?

前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:yangjiajia123456  最近两年的工作都是和运维相关,有时运维人员也会写一些python程序,但基本上都没有遵循相应的代码规范,一向粗暴,能用就行,既不考虑可读性也不考虑可维护性,作为一个开发人员有时候看他们写代码就很不舒服,今天就谈谈python写代码时的一些规范.如果你刚学python.不久遇到问题多,建议可以来小编的Python交流.裙 :一久武其而

前端开发 css、less编写规范

壹 ? 引 早在大半年前,我在负责整理定义了前端组JavaScript开发规范与less.css样式开发规范.一直想将两个规范整理成文章,但在整理了JavaScript规范后,我花了较多的时间在学习JavaScript基础知识,所以对于样式规范一直处于放置状态.直到上周我收到了一条关于JavaScript规范的评论,提醒了我样式规范不能再拖了,那么在放假前花点时间整理一遍作为复习也算不错. 说在前面,本文虽然作为规范但对于less与css写法也给出了部分建议,所以在阅读本规范前建议读者先掌握le

C#入门基础语法知识点总结(.NET开发环境及代码编写规范)

C#基础语法 一..net开发环境的搭建和使用 1.菜单栏 [文件]-->新建项目-->找到我们需要的项目类型 在新建窗口中,我们新建的项目要求可以在这里选择: (1)版本的选择:建议选择4或者4.6 (2)选择开发语言:一般都是C# (3)项目类型:初学阶段一般都用"控制台"程序.仅仅是学习资源. (4)项目的名称.要有意义. (5)位置:项目所有文件的保存位置.建议不要使用中文目录. (6)解决方案名称:默认和项目名称一致. [视图]-->可以显示各种窗口. [调