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; }

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

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

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

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

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

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

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

の後に単位を追加します。 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; }

　 按照这样的顺序书写可见提升浏览器渲染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