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)

    &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の場合

    HTMLは初心者のために簡単に学ぶことができますか? HTMLは初心者のために簡単に学ぶことができますか? Apr 07, 2025 am 12:11 AM

    HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1)HTMLの学習曲線はスムーズで簡単に開始できます。 2)基本タグをマスターして、Webページの作成を開始します。 3)柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4)豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

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

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

    &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

    ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? Mar 20, 2025 pm 05:56 PM

    この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

    &lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? &lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

    この記事では、&lt; iframe&gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

    HTML、CSS、およびJavaScriptの役割:コアの責任 HTML、CSS、およびJavaScriptの役割:コアの責任 Apr 08, 2025 pm 07:05 PM

    HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

    HTMLでの開始タグの例は何ですか? HTMLでの開始タグの例は何ですか? Apr 06, 2025 am 12:04 AM

    Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

    See all articles