フロントエンドコードガイド(一)
3898 ワード
本文はbendcの《Frontend Guidelines》から訳して、紙幅が長すぎるため、ここで私は3編に分けて、それぞれHTML、CSS、Javascriptで、主にHTML/CSS/Javascriptのコードガイドを紹介して、文章の中で提出したガイドも絶対ではありませんて、すべて実際から出発して、みんなは自分の必要に応じて取捨選択することができます.正直に言うと、英語が本当に下手です.許してください.間違いを訂正してください.Thanks.
フロントエンドコードガイド(一)フロントエンドコードガイド(二)フロントエンドコードガイド(三)
HTML 5は、コンテンツを正確に記述できる多くの意味化ラベルを提供していますので、これらの意味化ラベルを使用してください.
しかし、あなたが使用している意味化ラベルを知っていることを確認してください.誤って意味化ラベルを使うなら使わないほうがいい.
コードを簡潔に保ち、XHTMLの古い習慣を忘れます.
アクセス性は後で解決されるものではありません.WCAGの専門家になる必要はありません.Webサイトのアクセス性を向上させるには、小さな詳細を修復することで実現できます.たとえば、次のようにします.はalt属性を正しく使用することを学ぶ. あなたのハイパーリンクとボタンがマークされていることを確認します(つまり、その場所がハイパーリンクまたはボタンであることを他の人に見せることができます) 色だけで意味を伝える(主に視力障害者を考慮) .明示的にマーク(label)フィールド(labelラベルを使用)
宣言言語と文字コードはオプションですが、HTTPヘッダで指定されている場合でも、ドキュメント内で宣言することを強くお勧めします.符号化フォーマットはutf-8を優先することを推奨する.
スクリプトがコンテンツの前にロードされる必要がない限り、jsにページの表示をブロックさせないでください.cssファイルが大きい場合は、このcssファイルを2つのcssファイル(
もし本文が悪くないと感じたら、下の推荐をクリックしてください>>>クリックして原文を読みます
フロントエンドコードガイド(一)フロントエンドコードガイド(二)フロントエンドコードガイド(三)
HTML
意味化
HTML 5は、コンテンツを正確に記述できる多くの意味化ラベルを提供していますので、これらの意味化ラベルを使用してください.
<!-- -->
<div id="main">
<div class="article">
<div class="header">
<h1>Blog post</h1>
<p>Published: <span>21st Feb, 2015</span></p>
</div>
<p>…</p>
</div>
</div>
<!-- -->
<main>
<article>
<header>
<h1>Blog post</h1>
<p>Published: <time datetime="2015-02-21">21st Feb, 2015</time></p>
</header>
<p>…</p>
</article>
</main>
しかし、あなたが使用している意味化ラベルを知っていることを確認してください.誤って意味化ラベルを使うなら使わないほうがいい.
<!-- -->
<h1>
<figure>
<img alt=Company src=logo.png>
</figure>
</h1>
<!-- -->
<h1>
<img alt=Company src=logo.png>
</h1>簡潔
コードを簡潔に保ち、XHTMLの古い習慣を忘れます.
<!-- -->
<!doctype html>
<html lang=en>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<title>Contact</title>
<link rel=stylesheet href=style.css type=text/css />
</head>
<body>
<h1>Contact me</h1>
<label>
Email address:
<input type=email [email protected] required=required />
</label>
<script src=main.js type=text/javascript></script>
</body>
</html>
<!-- -->
<!doctype html>
<html lang=en>
<meta charset=utf-8>
<title>Contact</title>
<link rel=stylesheet href=style.css>
<h1>Contact me</h1>
<label>
Email address:
<input type=email [email protected] required>
</label>
<script src=main.js></script>
</html>アクセス性
アクセス性は後で解決されるものではありません.WCAGの専門家になる必要はありません.Webサイトのアクセス性を向上させるには、小さな詳細を修復することで実現できます.たとえば、次のようにします.
<!-- -->
<h1><img alt="Logo" src="logo.png"></h1>
<!-- -->
<h1><img alt="My Company, Inc." src="logo.png"></h1>言語
宣言言語と文字コードはオプションですが、HTTPヘッダで指定されている場合でも、ドキュメント内で宣言することを強くお勧めします.符号化フォーマットはutf-8を優先することを推奨する.
<!-- -->
<!doctype html>
<title>Hello, world.</title>
<!-- -->
<!doctype html>
<html lang=en>
<meta charset=utf-8>
<title>Hello, world.</title>
</html>パフォーマンス
スクリプトがコンテンツの前にロードされる必要がない限り、jsにページの表示をブロックさせないでください.cssファイルが大きい場合は、このcssファイルを2つのcssファイル(
と )に分離してください.2つのhttpリクエストは1つよりずっと遅いが、「感覚的なスピード」が最も重要な要素だ.<!-- -->
<!doctype html>
<meta charset=utf-8>
<script src=analytics.js></script>
<title>Hello, world.</title>
<p>...</p>
<!-- -->
<!doctype html>
<meta charset=utf-8>
<title>Hello, world.</title>
<p>...</p>
<script src=analytics.js></script>もし本文が悪くないと感じたら、下の推荐をクリックしてください>>>クリックして原文を読みます