効率的でクリーンな CSS コードの原則 (パート 1)

黄舟

リリース： 2016-12-22 16:13:14

オリジナル

1118 人が閲覧しました

CSS を学ぶのは難しくありませんが、大規模なプロジェクトでは、特に人によって CSS の書き方が少しずつ異なる場合、チーム内でのコミュニケーションがより難しくなります。そのために、いくつかの方法をまとめました。効率性とクリーンさを実現するための CSS コードの原則:

1. グローバルリセットではなく、リセットを使用します

ブラウザーの互換性を実現するために、ブラウザー要素の一部のデフォルト属性をリセットするには、リセットを使用します。ただし、グローバルリセットは使用しないでください:

*{margin:0;padding:0; }

これは、遅くて非効率な方法であるだけでなく、いくつかの不要なリセットにつながるためです。マージンとパディング。 YUI Reset と Eric Meyer の実践を参照することをお勧めします。

/**内側と外側の余白を明確にする **/

body, h1, h2, h3, h4, h5, h6, hr, p,

blockquote,/* 構造要素構造要素*/

dl, dt, dd, ul, ol, li,/* リスト要素リスト要素*/

pre,/* テキスト書式設定要素テキスト書式設定要素*/

form, fieldset, legend, button, input, textarea,/* フォーム要素フォーム要素*/

th, td,/* 表要素表要素 */

img/* 画像要素写真要素 */{

border:mediumnone;

margin:0;

padding:0;

}

/**デフォルトのフォントを設定します **/

body,button, input, select, textarea {

font:12px/1.5'宋体',tahoma, Srial,helvetica,sans-serif }

h1, h2, h3; 、h4、h5、h6{font-size:100%;

em{font-style:normal;}

/**リスト要素をリセット **/

ul、ol {list-style:none}

/**ハイパーリンク要素をリセット **/

a {text-decoration:none;color:#333;}

a:hover {text-decoration:underline;color:#F40; }

/**画像要素をリセット **/

img{border:0px;}

/**テーブル要素をリセット **/

table {border-collapse:collapse;border-spacing:0; }

2. 良い名前付けの習慣

間違いなく、乱雑なコードや意味論的でない名前のコードは誰でも気が狂うでしょう。このコードのように:

.aaabb{margin:2px;color:red;}

実際のプロジェクトでは初心者でもこのようなクラス名を付けることはないと思いますが、このようなコードを考えたことはありますか?これも非常に問題があります:

私の名前はWiky

問題は、元の赤色のフォントをすべて青色に変更する必要がある場合に、スタイルは次のようになります:

.red{color:bule;}

このような名前は、.leftBar という名前のサイドバーを右側のサイドバーに変更する必要がある場合、非常に混乱することになります。したがって、要素の特性 (色、位置、サイズなど) をクラスまたは ID の名前に使用しないでください。#navigation{…}、.sidebar{…}、.postwrap などの意味のある名前を選択できます。 {…}

このように、これらのクラスまたは ID を定義するスタイルをどのように変更しても、それらと HTML 要素の間の接続は影響を受けません。

一部の固定スタイルは定義後に変更されないため、

.alignleft{float:left;margin- などの名前を付けるときに前述の状況を気にする必要はありません。 right:20px;}

.alignright{float:right;text-align:right;margin-left:20px;}

.clear{clear:both;text-indent:-9999px;}

そんな段落です

私は段落です！

この段落を元の左揃えから右揃えに変更する必要がある場合は、その className を alignright に変更するだけで済みます。

3. コードの省略

CSS コードの省略により、コードの記述速度が向上し、コードの量が合理化されます。 CSS では、margin、padding、border、font、background、color 値など、省略できるプロパティが多数あります。コードの省略形を学習すると、元のコードは次のようになります。

li{

font-family : Arial、Helvetica、サンセリフ;