HTML & CSSスタイルガイド

22293 ワード
html tutorial beginners css テキストリンク
午前10時半ばに私はStartup Institute , 個人がスタートアップで入場レベルの仕事を得るのを援助するためにいくつかの異なるコースを提供したブートキャンプ・プログラム.私は学生がHTMLとCSSを学ぶのを助けるためにこのスタイルガイドを書きました:

目次

  • Preface

  • Project
  • Naming Convention
  • Organization

  • HTML
  • Syntax
  • HTML5 Doctype
  • Character Encoding
  • Including Stylesheets
  • Attributes
  • Naming
  • Order
  • Reducing Markup

  • CSS
  • Syntax
  • Selectors
  • Declarations
  • Single Declarations
  • Multiple Declarations
  • Order
  • Organization
  • References

    • 序文


    このスタイルのガイドは、スタートアップ研究所のRampupのWebデザインクラスに登録された学生のためのものですが、HTML＆CSSを学ぶ誰にとっても便利です.このドキュメントは、クリーンなメンテナンス可能なHTML & CSSファイルを書くためのガイドライン、ベストプラクティス、および一般的なアプローチを概説します.

    プロジェクト


    命名規則


    プロジェクト、ファイル、およびフォルダの名前は、ショート、小文字、およびスペースの代わりにダッシュを使用する必要があります.これにより、コードの内外の読みやすさが向上します.
    \\ Incorrect
My Really Awesome Project
Facebook Profile Picture.jpg

\\ Not Ideal
my-really-awesome-project
facebook-profile-picture.jpg

\\ Ideal
my-project
avatar.jpg

    組織


    あなたのファイルは、自分のタイプによって整理してください.ファイルを次のフォルダに保存します.
    パス
    ファイルの種類
    ファイルタイプmy-project/HTMLドキュメント.html my-project/cssスタイルシート.css my-project/fontsWebフォント.wotff my-project/imgイメージ.jpg .gif .png .svg my-project/jsスクリプト.js

    HTML


    構文


    ネストされた子要素は、新しい行から開始し、親要素内でインデントされます.
    <!-- Incorrect -->
<div><p>Foo</p></div>

<!-- Incorrect -->
<div>
<p>Foo</p>
</div>

<!-- Correct -->
<div>
    <p>Foo</p>
</div>
    常に、2重引用符を使用します.
    <!-- Incorrect -->
<div class='single-quote'></div>

<!-- Correct -->
<div class="double-quote"></div>
    自己終了要素に末尾のスラッシュを含める
    <!-- Incorrect -->
<img src="foo.jpg" class="bar" >

<!-- Correct -->
<img src="foo.jpg" class="bar" />
    オプションの終了タグを省略しない
    <!-- Incorrect -->
<ul>
    <li>Foo
    <li>Bar
    <li>Baz
</ul>

<!-- Correct -->
<ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
</ul>

    HTML 5タイプ


    すべてのHTMLドキュメントはdoctypeタグから始めるべきです.
    <!-- Incorrect -->
<html>
    <head>...</head>
    <body>...</body>
<html>

<!-- Correct -->
<!DOCTYPE html>
<html>
    <head>...</head>
    <body>...</body>
<html>

    文字符号化


    迅速かつ容易に明示的な文字エンコーディングを宣言して、コンテンツの適切なレンダリングを確認します.そうするとき、あなたのHTMLのキャラクタ実体を使用しないでください.
    <head>
  <meta charset="UTF-8">
</head>

    スタイルシートを含む


    スタイルシートは<head> HTMLドキュメントのセクション.
    <!-- Incorrect -->
<!DOCTYPE html>
<html>
    <head>...</head>
    <body>
        <link rel="stylesheet" href="css/style.css">
    </body>
<html>

<!-- Correct -->
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>...</body>
<html>

    属性


    命名


    のようなユニークな属性id & name に従うcamelCasing コンベンション.
    <!-- Incorrect -->
<section id="foo-bar">...</section>

<!-- Correct -->
<section id="fooBar">...</section>
    クラス名は、Kababケースを使用してフォーマットされるべきです.
    <!-- Incorrect -->
<img class="fooBar" src="img/baz.jpg" />

<!-- Incorrect -->
<img class="foo_bar" src="img/baz.jpg" />

<!-- Correct -->
<img class="foo-bar" src="img/baz.jpg" />

    順序


    HTML属性は、コードを読みやすくするためにこの特定の順序で来るはずです.
  • id , name
  • class
  • data-*
  • src , for , type , href , value
  • title , alt
  • role , aria-*
    • 要素を一意に識別する属性id , name ) 読みやすさのために最初に来なければなりません.そして、クラスに続きます.そして、それは一般的にHTMLドキュメントのすべての要素の向こう側に見られる最も一般的な属性です.
    <!-- Incorrect -->
<img src="img/foo.jpg" id="foo" class="bar baz" />

<!-- Correct -->
<img id="foo" class="bar baz" src="img/foo.jpg" />

    マークアップの削減


    可能であれば、HTMLを書く際に、親要素を過剰に回避する.何度もこれは反復とリファクタリングを必要とするが、より少ないHTMLを生成する.
    <!-- Not so great -->
<section>
    <div class="row">
        <div class="col-left category">...</div>
        <div class="col-right category">...</div>
    </div>
    <div class="row">
        <div class="col-left category">...</div>
        <div class="col-right category">...</div>
    </div>
</section>

<!-- Better -->
<section>
    <div class="row">
        <div class="col-left category">...</div>
        <div class="col-right category">...</div>
        <div class="col-left category">...</div>
        <div class="col-right category">...</div>
    </div>
</section>

    CSS


    構文


    読みやすさのために宣言ブロックの開始ブレースの前に1つのスペースを含めてください.
    // Incorrect
.foo{display: block;}

// Correct
.foo {display: block;}
    宣言ブロック内の各宣言について
  • 後に1つのスペースを含める: 各宣言
  • つ前のスペースを含みません: 各宣言
  • セミコロンで全ての宣言を終了する
    • // Incorrect
.foo {display:block;}

// Incorrect
.foo {display : block;}

// Incorrect
.foo {display: block}

// Correct
.foo {display: block;}
    複数のプロパティ値を持つ宣言は、各コンマの後にスペースを含める必要があります
    // Incorrect
.foo {box-shadow: 0 1px 2px #ccc,inset 0 1px 0 #fff;}

// Correct
.foo {box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;}
    値の単位を指定しない
    // Overkill
.foo {margin: 0px;}

// Better
.foo {margin: 0;}

    セレクタ


    セレクタを短くして、各セレクタの要素の数を3に制限するよう努めます.
    // Incorrect
section ul.nav li a {text-decoration: none;}

// Correct
ul.nav a {text-decoration: none;}

    宣言


    単一の宣言


    単一の宣言を持つセレクタを1行に保持できます.
    // Less ideal
.foo {
    margin: 0px;
}

// More ideal
.foo {margin: 0;}

    複数の宣言


    複数の宣言を持つセレクタの場合:
  • それぞれの宣言はそれ自身の行に現れるべきです
  • 宣言ブロック内で宣言を入れ子にする
  • 新しい行に宣言ブロックの括弧を閉じる
    • // Incorrect
.foo {display: block; position: relative;}

// Incorrect
.foo {
display: block;
position: relative;
}

// Incorrect
.foo {
    display: block;
    position: relative;}

// Correct
.foo {
    display: block;
    position: relative;
}

    順序


    ブラウザ開発者ツールでこのように宣言をリストするので、宣言はアルファベット順にセレクタの中に配置されるべきです.
    // Incorrect
.foo {
    position: relative;
    top: 0;
    left: 12px;
    display: block;
}

// Correct
.foo {
    display: block;
    left: 0;
    position: relative;
    top: 0;
}

    組織


    コンポーネントのコードのセクションを整理します.
    // Incorrect
header {
    background-color: #034f80;
    display: block;
}

footer {
    background-color: #000000;
}

header nav ul {list-style: none;}

// Correct
header {
    background-color: #034f80;
    display: block;
}

header nav ul {list-style: none;}

footer {
    background-color: #000000;
}

    クレジットとライセンス


    強く鼓舞される@mdo's Code Guide . シカゴで< 3 >で作られます.
    MITの下のオープンソース.著作権2015ジョーmainwaring.

    参考文献

  • Code Guide by @mdo
    • Activity間ジャンプ
    MVCモード2