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

Jun 24, 2016 am 11:43 AM

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. /* 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
    ログイン後にコピー

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

    ホットAIツール

    Undresser.AI Undress

    Undresser.AI Undress

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

    AI Clothes Remover

    AI Clothes Remover

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

    Undress AI Tool

    Undress AI Tool

    脱衣画像を無料で

    Clothoff.io

    Clothoff.io

    AI衣類リムーバー

    AI Hentai Generator

    AI Hentai Generator

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

    ホットツール

    メモ帳++7.3.1

    メモ帳++7.3.1

    使いやすく無料のコードエディター

    SublimeText3 中国語版

    SublimeText3 中国語版

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

    ゼンドスタジオ 13.0.1

    ゼンドスタジオ 13.0.1

    強力な PHP 統合開発環境

    ドリームウィーバー CS6

    ドリームウィーバー CS6

    ビジュアル Web 開発ツール

    SublimeText3 Mac版

    SublimeText3 Mac版

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

    公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? 公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? Mar 04, 2025 pm 12:32 PM

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

    HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

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

    HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

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

    WebページのPNG画像にストローク効果を効率的に追加する方法は? WebページのPNG画像にストローク効果を効率的に追加する方法は? Mar 04, 2025 pm 02:39 PM

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

    &lt; datalist&gt;の目的は何ですか 要素? &lt; datalist&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

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

    &lt; Progress&gt;の目的は何ですか 要素? &lt; Progress&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

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

    HTML5&lt; time&gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? HTML5&lt; time&gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? Mar 12, 2025 pm 04:05 PM

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

    &lt; meter&gt;の目的は何ですか 要素? &lt; meter&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

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

    See all articles