Html开发常用习惯之(二)_html/css_WEB-ITnose

Html开发常用习惯：

引入CSS, JS

根据HTML5规范, 通常在引入CSS和JS时不需要指明 type，因为 text/css 和 text/javascript 分别是他们的默认值。

HTML5 规范链接
?使用link
?使用style
?使用script

<!-- External CSS --><link rel="stylesheet" href="code_guide.css"><!-- In-document CSS --><style> ... </style><!-- External JS --><script src="code_guide.js"></script><!-- In-document JS --><script> ... </script>

属性顺序

属性应该按照特定的顺序出现以保证易读性；
?class
?id
?name
?data-*
?src, for, type, href, value , max-length, max, min, pattern
?placeholder, title, alt
?aria-*, role
?required, readonly, disabled

class是为高可复用组件设计的，所以应处在第一位；

id更加具体且应该尽量少使用，所以将它放在第二位。

<a class="..." id="..." data-modal="toggle" href="#">Example link</a><input class="form-control" type="text"><img src="/static/imghwm/default1.png"  data-src="..."  class="lazy" alt="...">

boolean属性

boolean属性指不需要声明取值的属性，XHTML需要每个属性声明取值，但是HTML5并不需要；

更多内容可以参考 WhatWG section on boolean attributes：

boolean属性的存在表示取值为true，不存在则表示取值为false。

<input type="text" disabled><input type="checkbox" value="1" checked><select>    <option value="1" selected>1</option></select>

JS生成标签

在JS文件中生成标签让内容变得更难查找，更难编辑，性能更差。应该尽量避免这种情况的出现。

减少标签数量

在编写HTML代码时，需要尽量避免多余的父节点；

很多时候，需要通过迭代和重构来使HTML变得更少。

<!-- Not well --><span class="avatar">    <img  src="/static/imghwm/default1.png"  data-src="..."  class="lazy" alt="Html开发常用习惯之(二)_html/css_WEB-ITnose" ></span><!-- Better --><img  class="avatar lazy"  src="/static/imghwm/default1.png"  data-src="..."  alt="Html开发常用习惯之(二)_html/css_WEB-ITnose" >

上一篇：前端开发常用命名规范`
下一篇:Html开发常用习惯之(一)

该文本人以上希望对初学朋友有些帮助同时自己笔记留用，谢谢！
更多关注付义方技术博客：
或者直接用手机扫描二维码查看更多博文：

版权声明：本文为博主原创文章，未经博主允许不得转载， 更多关注付义方技术博客：http://blog.csdn.net/fuyifang