CSSコードの書式設定のさまざまな表現方法の紹介

この記事では、CSS をフォーマットするさまざまな方法に焦点を当てます。これは CSS を整理する方法とは異なります。単に関連する概念です。整理は物事のグループ化と順序付けに関係しており、フォーマットはスペースと配置に関係があると思います。インデント。

書式設定は CSS の機能とは何の関係もありません。これらはプログラマー自身の選択に過ぎませんが、これは CSS にとって書式設定が重要ではないという意味ではありません。これは、ペインターにとって書式設定が CSS の作成感に影響を与えるのと同じです。読みやすさ、操作のしやすさ、以前に作成した CSS に戻って慣れるのがいかに簡単か。

CSS 書式設定のオプションが非常に多い理由は、スペースや改行に関して厳密な構文規則がないためです。例:

div      {                width:             50px             }

は、次の 2 つのコードと同じです。

div{width:50px}

div 

{ 
      width: 50px 
      
}

複数行形式

.navigation_rss_icon {
position: absolute;
left: 940px;
bottom: 0px;
}
#navigation_rss {
position: absolute;
left: 720px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #897567;
line-height: 2.5em;
}
#navigation_rss li {
display: inline;
}
#navigation_rss li a:link, #navigation_rss li a:visited {
color: #fffffe;
text-decoration: none;
padding: 0px 2px;
letter-spacing: -0.05em;
}
#navigation_rss li a:hover {
color: #eed2a1;
text-decoration: none;
}

あえて言えば、コードの短いスニペットに関してはこれが最も一般的で読みやすいため、書かれたチュートリアルではこの形式が最もよく使用されます。上の例には、閉じ中括弧と次のセレクターの間に空行がありませんが、これも一般的です。

インデントを使用した複数行の書式設定

.navigation_rss_icon {
    position: absolute;
    left: 940px;
    bottom: 0px;
}
#navigation_rss {
    position: absolute;
    left: 720px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color: #897567;
    line-height: 2.5em;
    }
    #navigation_rss li {
        display: inline;
    }
        #navigation_rss li a:link, #navigation_rss li a:visited {
            color: #fffffe;
            text-decoration: none;
            padding: 0px 2px;
            letter-spacing: -0.05em;
        }
        #navigation_rss li a:hover {
            color: #eed2a1;
            text-decoration: none;
        }

インデントされたブロックは、セレクターがその上にあることを示します。親要素を指定し、上記のセレクターの子要素を指します。

単一行形式

div.wrapper { margin:0 auto; padding:200px 0 0 0; width:960px; z-index:2 }
ul.nav { position:absolute; top:0; left:430px; padding:120px 0 0 0 }
ul.nav li { display:inline; margin:0 10px 0 0 }
div.column { float:left; margin:0 70px 0 0; padding:0 0 0 70px; width:340px }
div.post_wrapper { background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_long.png) bottom center no-repeat; margin:0 0 40px 0; padding:0 0 40px 0 }
div.wrapper img, div.wrapper a img, div.article_illustration_mini { background:#d3d4cb; padding:10px; border:1px solid #999 }
div.wrapper a:hover img { background:#fff }

これは、すべてのスペースと改行を削除する完全な圧縮を行わず、おそらく最もスペースとサイズの効率が高くなります。この手法では、CSS を作成および編集するときに最小限の垂直スクロールと水平スクロールが必要ですが、見た目が煩雑で、探しているものを見つけて移動するのがやや困難になる可能性があります。

タブ キーを使用した単一行形式

h1, h2, h3                            { font: 24px Helvetica, Sans-Serif; margin: 0 0 10px 0; }
h2 a, h2 a:visited                    { color: #2e2e2e; }
h2 a:hover                            { color: #fe4902; border-bottom: 1px dotted #2e2e2e; }
p, li, dd                             { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; margin: 0 0 15px 0; color: #5e5d5d; }
td, th                                { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; text-align: left; }

インデントを使用した単一行形式

#content-area ol                    { margin: 15px 0 0 25px; list-style: decimal; }
    #content-area ol ol             { list-style: lower-alpha; }
#content-area ul                    { margin: 0 0 0 5px; list-style: none; }
    #content-area ul li             { padding: 0 0 0 20px; background: url(/images/bullet.png) 0 3px no-repeat; }
    #content-area ul ul             { margin: 15px 0 0 25px; list-style: disc; }
         #content-area ul ul li     { background: none; padding: 0; }

インデントされたセレクターは、セレクターがその上のセレクターの子要素をターゲットにします。

#主に単一行フォーマット

テキスト エディターで使用するため、私のお気に入りは単一行フォーマットです。 -ラップ、長い線が永遠に続かず、ウィンドウの端に回り込みます。そのため、多数のセレクターを含む非常に長い行の場合は、新しい属性行にハードリターンとタブを追加しました。

h1, h2, h3                            { font: 24px Helvetica, Sans-Serif; margin: 0 0 10px 0; }
h1                                    { font-size: 36px; }
h2                                    { font-size: 30px; }
h2 a, h2 a:visited                    { color: #2e2e2e; }
h2 a:hover                            { color: #fe4902; border-bottom: 1px dotted #2e2e2e; }
p, li, dd                             { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif;
                                        margin: 0 0 15px 0; color: #5e5d5d; }
td, th                                { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif;
                                        text-align: left; }

バリエーション

単一行の書式設定は、開始括弧をその行に移動することでさらに実現できます。これは、PHP でよく見てきたことです。

div
{
    padding: 10px;
}

タグを含む複数行の形式では、中かっこが分割壁として使用されています。

#content-area ol                 {       margin: 15px 0 0 25px; list-style: decimal; }
    #content-area ol ol          {       list-style: lower-alpha; }
#content-area ul                 {       margin: 0 0 0 5px; list-style: none; }
    #content-area ul li          {       padding: 0 0 0 20px; background: url(/images/bullet.png) 0 3px no-repeat; }
    #content-area ul ul          {       margin: 15px 0 0 25px; list-style: disc; }
         #content-area ul ul li  {       background: none; padding: 0; }

Combined

単一行と複数行の組み合わせにより、関連するプロパティをグループ化できます。

.navigation_rss_icon {
    position: absolute;
    top: 10px; left: 10px; bottom: 10px; right: 10px;
    font-size: 12px; font-weight: bold;
}

選択する形式は、結局は読みやすさを重視します。 CSS をすばやく移動して、探しているものを見つけて、すぐに変更できる必要があります。探している属性を見つけるのが難しいため、単一行形式が難しいと感じる場合は、その使用を避けるべきです。

個人的には、複数行形式は読みやすいと思いますが、長さ (実際の行数) が 5 ～ 8 倍になります。実際、これにより、垂直スクロールが発生するため、文書全体が読みにくくなります。モニターが少し狭い場合、単一行形式により水平スクロールが発生し、場合によってはさらに悪化する可能性があります。

完璧な書式設定とは、スクロールを最小限に抑えながら、読みやすさを最大限に高めるものです。さらに、より抽象的な意味で言えば、それが正しく感じられればよいのです。

以上がCSSコードの書式設定のさまざまな表現方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。