HTML和CSS的开发标准总结

前言:为了写出更健壮、易维护的代码,我们需要一套合理的代码标准。
因此在吸取前辈们的一些最佳实践经验后演化出一系列的代码标准,这里可查看Code Guide ,在实践中慢慢朝标准看齐,朝优秀看齐,peace!

博主根据Code Guide筛选并总结出了以下实用性更强的规范,这里主要包括HTML和CSS两大类。

一、有关HTML

1.语法

  • 不要大写标签,包括文档类型
  • 属性上使用双引号,切勿使用单引号
  • 自闭元素中不要包含斜线,HTML5规范认为这条规范是可选的,即可包含可不包含

2.语言属性

HTML5规范:“鼓励作者在html根元素上指定lang属性,以提供文档的语言。这有助于语音合成工具确定使用哪些发音,翻译工具确定使用哪些规则,等等。”

3.IE兼容模式

Internet Explorer支持使用文档兼容性标记来指定页面应呈现为IE的哪个版本。除非情况另有要求,否则指示IE使用最新支持的模式和Edge模式最有用。

<meta http-equiv="x-ua-compatible" content="ie=edge">

如果需要支持IE9或IE8,那么需要使用此标记(X-UA-Compatible标记)。如果您仅支持最新的浏览器(IE11和/或Edge),那么可以完全删除此标签。

  • IE=edge 表示IE应该使用其渲染引擎的最新(边缘)版本

更多理解参考这篇文章

4.CSS和JavaScript

根据HTML5规范,需要将CSS和JavaScript的type设为text/css和text/javascript(即默认值时),无需指定。

<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">

<!-- In-document CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript -->
<script src="code-guide.js"></script>

5.属性顺序

HTML属性应按此特定顺序排列,以便于阅读代码

  • class
  • id, name
  • data-*
  • src,for,type,href,value
  • title, alt
  • role, aria-*

6.布尔属性

布尔属性是不需要声明值的属性,你不需要为它添加任何值

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>

7.减少标记

在编写HTML时,请尽可能避免使用多余的父元素。很多时候,这需要迭代和重构,但是生成的HTML更少。请看以下示例:

<!-- Not so great -->
<span class="avatar">
  <img src="...">
</span>

<!-- Better -->
<img class="avatar" src="...">

8.JavaScript中的标记

在JavaScript文件中编写标记会使内容更难查找,更难编辑且性能降低。尽可能避免它,React框架的js文件也应该尽量。

二、有关CSS

to be continued…

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值