CSS書き方仕様書_html/css_WEB-ITnose

1. コメントの仕様

1. ファイルの先頭にコメント (推奨)

CSS コード

1. /*
2. * @description: 中国語の説明
3. * @ author: name
4. * @update: name (2013-04-13 18:32)
5. */

2. モジュールのコメント

モジュールのコメントは別の行に記述する必要があります

CSS コード

1. /* モジュール: module1 by Zhang San */
2. …
3. /* module: module2 by Zhang San */

3.コメントと複数行のコメント

単一行のコメントは、別の行または行の末尾に記述できます。コメントの各行の長さは、中国語で 40 文字または英語で 80 文字を超えてはなりません。

CSS コード

1. /* これは短いコメントです */

複数行のコメントは別の行に記述する必要があります

CSS コード

1. / *
2. * これはコメント行 1 です。
3. * これはコメント行 2 です。
4. */

4. 特別なコメント

は、変更と保留中の Office 情報をマークするために使用されます。

CSS コード

1. /* TODO: 名前で xxxx 2013-04-13 18:32 */
2. /* バグ修正: 名前で xxxx 2012-04-13 18:32 */

5. ブロックコメント

コードブロックをコメントし (オプション)、スタイルステートメントをブロックに分割し、新しい行でコメントします。

CSS コード

1. /* ヘッダー */
2. /* フッター */
3. /* ギャラリー */

2.コーディング仕様

1 Tab キーを 4 つのスペース (必須)

に置き換えます。圧縮ツールによる「文の分割」を容易にするために、各スタイル属性の後に「;」 (必須) を追加します。

3. クラス名に大文字を使用することは (許可されていません)、クラス内で文字を区切るには「-」を使用する必要があります:

 /* 正确的写法 */ .hotel-title {     font-weight: bold; } /* 不推荐的写法 */ .hotelTitle {     font-weight: bold; }

「-」で区切るのは詳細ですキャメルケースを使用するよりもクリアです。

製品ライン - 製品 - モジュール - サブモジュール、名前を付けるときにもこのメソッドを使用できます (@Artwl)

4. スペースの使用については、次のルールを実装する必要があります:

 .hotel-content {     font-weight: bold; }

Select { の前にスペースが必要です (必須)

属性名 :

の後にスペースが必要です

属性名 : (許可されていません)

の前にスペースがあります

理由の 1 つは見た目の美しさ、もう 1 つは IE にバグがあります6, poke bug

5. (必須) 複数のセレクター ルール間の改行

スタイルが複数のセレクターを対象とする場合、各セレクターは 1 行を占めます

 /* 推荐的写法 */ a.btn, input.btn, input[type="button"] {     ...... }

6. (禁止) を変更します。 style

.hotel-content {margin: 10px; background-color: #efefef;}

1行でコメントやコメントするのは難しいです〜

の後に単位を追加します。 0、たとえば:

.obj {    left: 0px;}

統一のためだけ。緑色の単語は強制ではなく強調を意味することを忘れないでください。

8. (禁止) css ネイティブ インポートの使用

css ネイティブ インポートを使用すると、リクエストの数が増えるなど、多くのデメリットがあります...

9.
ドンサイト全体の CSS および共通 CSS ライブラリを簡単に変更できます。変更を行った後は、徹底的にテストする必要があります。

8. フィルターの使用を避ける

10. 避免在CSS中使用expression

11. 避免过小的背景图片平铺，小图片（必须）sprite 合并

12. 层级(z-index)必须清晰明确，页面弹窗、气泡为最高级（最高级为999），不同弹窗气泡之间可在三位数之间调整；普通区块为10-90内10的倍数；区块展开、弹出为当前父层级上个位增加，禁止层级间盲目攀比。

13. 背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按照模块、业务、页面来划分均可。

 

 

14. （推荐）属性的书写顺序, 举个例子:

.hotel-content {     /* 定位 */     display: block;     position: absolute;     left: 0;     top: 0;     /* 盒模型 */     width: 50px;     height: 50px;     margin: 10px;     border: 1px solid black;     / *其他* /     color: #efefef; }

定位相关, 常见的有：display position left top float 等

盒模型相关, 常见的有：width height margin padding border 等

其他属性

 　  按照这样的顺序书写可见提升浏览器渲染dom的性能

 

15. （推荐）当编写针对特定html结构的样式时，使用元素名 + 类名

/* 所有的nav都是针对ul编写的 */ ul.nav {     ...... }

".a div"和".a div.b"，为什么后者好？如果需求有所变化，在".a"下有多加了一个div，试问，开始的样式是不是会影响后来的div啊~

 

16. （推荐）IE Hack List

 /* 针对ie的hack */ selector {     property: value;     /* 所有浏览器 */      property: value\9;   /* 所有IE浏览器 */      property: value\0;   /* IE8 */     +property: value;    /* IE7 */     _property: value;    /* IE6 */     *property: value;    /* IE6-7 */ }

当使用hack的时候想想能不能用更好的样式代替

 

17. （不推荐）ie使用filter,（ 禁止）使用expression

这里主要是效率问题，应该当格外注意，咱们要少用烧CPU的东西~ 

18. （禁止）使用行内（inline）样式

<p style="font-size: 12px; color: #FFFFFF">靖鸣君</p>

像这样的行内样式，最好用一个class代替。又如要隐藏某个元素，可以给他加一个class

.hide {    display: none;}

尽量做到样式和结构分离~

 

19. （推荐）reset.css样式

推荐网站：http://www.cssreset.com/

 

20.（禁止）使用"*"来选择元素

/*别这样写*/* {    margin: 0;    padding: 0;}

这样写是没有必要的，一些元素在浏览器中默认有margin或padding值，但是只是部分元素，没有必要将所有元素的margin、padding值都置为0。

21. 链接的样式，（务必）按照这个顺序来书写

a:link -> a:visited -> a:hover -> a:active