HTML 開発でよくある習慣 (2)_html/css_WEB-ITnose

HTML 開発の一般的な習慣:

CSS、JS を導入する

HTML5 仕様によれば、text/css および text/javascript がデフォルトであるため、CSS と JS を導入するときに通常タイプを指定する必要はありません。それぞれの値。

HTML5 仕様リンク
? リンクを使用する
? スタイルを使用する
? スクリプトを使用する

<!-- 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
? *
?src, for, type, href, value , max-length, max, min, pattern
?placeholder, title, alt
?aria-*, role
?required, readonly,disabled

class は for です再利用性の高いコンポーネント用に設計されているため、最初に配置する必要があります。

id はより具体的であり、できるだけ使用しないようにする必要があるため、2 番目に配置する必要があります。

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

boolean 属性

boolean 属性は、値を宣言する必要のない属性を指します。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="..."></span><!-- Better --><img class="avatar" src="...">

前の記事: フロントエンド開発の一般的な命名規則`

次の記事: HTML 開発のよくある習慣 (1)

この記事が初心者に役立つことを願っており、今後の参考のためにメモを残しておきます、ありがとう！

Fu Yifang Technology Blog にもっと注目してください:
または、携帯電話で QR コードを直接スキャンして、他のブログ投稿を表示してください:

著作権表示: この記事はブロガーによるオリジナルの記事であり、無断で複製することはできません。ブロガーの許可さらに注目してください Fu Yifang Technology Blog: http://blog.csdn.net/fuyifang