Douban フロントエンド開発仕様書 - CSS 開発仕様書_html/css_WEB-ITnose

1. CSS ブラウザは標準

Chrome 3BBBFirefox4C CCFirefox3.6AAAFirefox3.5CCFirefox3CCサファリBBBオペラCCC

(注: 2010 年 11 月 10 日のデータに基づいて編集されています)

レベル A - インタラクションとビジュアルが完全なデザインの要件を完全に満たしています

レベル B - ページ全体の効果を損なうことなく視覚的な差異が許容されます

レベルC - 視覚的な問題は無視できますが、使用に支障はありません

2. 可能な限り継承とカスケードを通じて既存のスタイルを再利用します

3. 新しいスタイルの適用範囲に従って、3 つのレベルに分けられます。 : 完全なサイト レベル、製品レベル、およびページ レベル

3-1. 現在、サイト全体の CSS ファイルは core.css と douban.css のみです (サイト全体の CSS ファイルにルールを追加するには、4 と 5 を参照してください)。 。

3-2. 製品レベルの CSS は、特定の垂直製品 (音楽、読書、ラジオなど) に作用することを指し、ファイルは css/ の下の対応するディレクトリに配置されます。

ページ レベルとは、1 つまたはいくつかのページでのみ使用されることを指します。 1 ページのみで使用される場合は、ページの先頭にインラインで埋め込まれます。2 ページ以上で使用される場合は、外部 CSS ファイルに配置され、そのファイルは対応する製品ディレクトリに配置されます。

4. core.css はサイト全体の基本的なスタイルです。すべての CSS 参照の前に配置する必要があります。これには、ラベルのリセット、共通ルール (リンク、フォント、非表示、クリアフローティングなど)、レイアウト、さまざまなモジュールの基本スタイルなどが含まれます。

参照: http://img3.douban.com/css/packed_core1。 css

5 . サイト全体の CSS を簡単に変更しないでください。変更後は十分にテストする必要があります

6. 単一の CSS ルールの記述形式要件

6-1. 属性は 1 行で記述する必要があります。 「{」と「}」の前後にスペースを追加する必要があります。

.selector { property:value;property:value; }

6-2. 複数 (>2) のセレクターがそれぞれ 1 行を占有します:

.selector1,

.selector2,

.selector3 { property: value ;property:value; }

6-3. 複数のブラウザと互換性がある場合は、次のような標準プロパティを最後に記述します。 -radius: 4px;

7. 異なるモジュールに適用される CSS ルールをまとめてコメントで説明します

コメントの形式:

/* mod: doulist */

一般的なルールもまとめて分類します。一般ルールは特定のモジュールルールよりも優先されます。例:

/* ボタン */

…

/* mod */

…

/* ナビ */

…

/* mod: イベント アルバム */

8.ネーミング。名前を付けるときは略語を使用しないでください。単語間のコネクタとして「-」を使用します

8-1. ID は特定のモジュールを識別するために使用され、名前はプレフィックスと名前で構成される固有かつ一意である必要があります。 IDを悪用しないでください。例: #db-video-list。

8-2. クラスは特定の種類の要素を識別するために使用され、名前は簡潔かつ明確である必要があります。例: .list。

8-3. 命名例:

悪い:

#rec

.gray-link

.broadsmr

.pl
良い:

#db-nav-main

.infobox

。 item

8-4. 推奨されるクラス名:

はステータスを意味します

	WinXP	Win7	OS
	IE8	A	あ
	IE7	A	A
	IE6	A	A
Chrome7	C	C	C
Chrome6	A	A	A

.on、.active、.selected、.hili.first、.last、.main、 を意味します。 は構造を表します.hd、.bd、.ft、.col、.section相違属性:

	は位置
一般要素	.tb、.frm、.nav、.list、.item、.tag、. , .info
9. CSS Hack の使用を避けるようにしてください	以下を使用することをお勧めします:

IE6

_property:value

相違点ルール:

IE6 /7	* property:value
IE6/7/8/9	property:value9
非IE6	property//:value

IE6	* html セレクター { … }
IE7	*:first-child+html セレクター { … }
非 IE6	html& gt;ボディセレクター { … }
firefox のみ	@-moz-document url-prefix() { … }
saf3+/chrome1+	@media all and (-webkit-min-device-pixel-ratio:0) { … }
opera のみ	@media すべておよび (-webkit-min-device-pixel-ratio:10000)、すべてではなく、および (-webkit-min-device-pixel-ratio:0) { … }
iPhone/mobile webkit	@media screen and (max-device-width: 480px) { … }

10. フロートをクリアするには after または overflow を使用します

11。ページの先頭に配置されます。順序は、サイト全体の CSS、製品レベルの CSS、ページ レベル (外部) CSS、ページ レベル (インライン) CSS、インライン CSS です

12:

body > ; などの非効率なセレクターの使用は避けてください。 * {…}

ul > li > a {…}

#footer > h3 {…}

#searbar span.submit a { … }

13.フィルターの使用を避けるため

14. タグのスタイルを直接変更しないでください

例: div { … }

15. タグにスタイルを直接記述しないでください

例:

16. CSS で式を使用しないでください

18. 「*」を使用しないでください。 CSS のセレクター

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。