CSS書き方仕様書_html/css_WEB-ITnose
1. コメントの仕様
1. ファイルの先頭にコメント (推奨)
CSS コード
- /*
- * @description: 中国語の説明
- * @ author: name
- * @update: name (2013-04-13 18:32)
- */
2. モジュールのコメント
モジュールのコメントは別の行に記述する必要があります
CSS コード
- /* モジュール: module1 by Zhang San */
- …
- /* module: module2 by Zhang San */
3.コメントと複数行のコメント
単一行のコメントは、別の行または行の末尾に記述できます。コメントの各行の長さは、中国語で 40 文字または英語で 80 文字を超えてはなりません。
CSS コード
- /* これは短いコメントです */
複数行のコメントは別の行に記述する必要があります
CSS コード
- / *
- * これはコメント行 1 です。
- * これはコメント行 2 です。
- */
4. 特別なコメント
は、変更と保留中の Office 情報をマークするために使用されます。
CSS コード
- /* TODO: 名前で xxxx 2013-04-13 18:32 */
- /* バグ修正: 名前で xxxx 2012-04-13 18:32 */
5. ブロックコメント
コードブロックをコメントし (オプション)、スタイルステートメントをブロックに分割し、新しい行でコメントします。
CSS コード
- /* ヘッダー */
- /* フッター */
- /* ギャラリー */
2.コーディング仕様
1 Tab キーを 4 つのスペース (必須)
に置き換えます。圧縮ツールによる「文の分割」を容易にするために、各スタイル属性の後に「;」 (必須) を追加します。
3. クラス名に大文字を使用することは (許可されていません)、クラス内で文字を区切るには「-」を使用する必要があります:
/* 正确的写法 */ .hotel-title { font-weight: bold; } /* 不推荐的写法 */ .hotelTitle { font-weight: bold; }
製品ライン - 製品 - モジュール - サブモジュール、名前を付けるときにもこのメソッドを使用できます (@Artwl)
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

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか?この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース(写真、CSS、JSなど)やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています

この記事では、HTML&lt; Datalist&GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

この記事では、HTML&lt; Progress&gt;について説明します。要素、その目的、スタイリング、および&lt; meter&gt;との違い要素。主な焦点は、&lt; Progress&gt;を使用することです。タスクの完了と&lt; Meter&gt; statiの場合

この記事では、html5&lt; time&gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

この記事では、html&lt; meter&gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化&lt; Meter&gt; &lt; Progress&gt;およびex
