CSS仕様とスタイル再利用のまとめ

18505 ワード
CSS仕様
この仕様の概要
この仕様の策定の目的は、CSSコードのメンテナンスと再利用をより容易にすることであり、この仕様を効率的に実行する際に推奨されるプロセスは、D(esign)C(oding)D(ebug)V(alidate)R(oundup)、すなわちDCDVRのプロセスを使用することを推奨することである.まずスタイルを計画し、共有スタイルとページパーソナライズスタイルに分ける必要があります.それから符号化を開始します.符号化と同時にDebug、Validate、コード断片のまとめを行います.すべてのテンプレートが完了した後ではなく、この3つのステップを行います.
一、スタイルライブラリ構築仕様について
詳細:http://aliceui.com/alice-css-guide/
二、selector命名規範:
  • 命名除.fn-/.ui-/.sl-外、名前をカスタマイズできます.selected current disabled first last success error
    • を慎重に使用してください.
  • 一般的に、currentなどのネーミングが一般的な場合は、対応するコンテキスト環境に限定します.例えば、親ノードIDがparentであるなど比較的一般的なネーミングは、parentと書くことを推奨する.ではなくcurrent{}は,再利用のためでも注意すべきである.他のコンポーネントの作業に影響を及ぼさないことが明確であり、他の人がこのような名前を書かない場合にのみ、グローバルに通用します.
  • JSインタフェースのclassまたはIDとしては、J-プレフィックスで始まる必要があります.JSインタフェースの命名を除いて、その他の命名はすべて小文字の
    • を使います
    三、注釈:
  • コンポーネント注記:
    /**  * @name:      * @overview:       * @require:        * @author:   ([email protected]) */
  • ブロックまたは行内要素は、/*comment*/注釈を使用してください.注釈文字の前後には
    • のスペースが1つずつ保持されています.
  • あなたの体験のために考えて、一目で知っているコードは、注釈しないでください.例えば、「display:none;/*要素が見えない*/」仕事はまだたくさんありますよ.学生、自分の体力のために考えてください.

    • 四、CSSファイル
  • ファイルコードはutf-8(BOMなし)
    • を使用する必要があります.
  • ファイルはすべてlinkリンク(NOT@import)
    • を通じて
  • のに
    • と書くのは、単一ページのみで使用する場合である.
    五、Hackルール
  • 一般的な場合、IE条件コメントを使用しないでください:
  • 汎用Hack 
    .all-IE{property:value\9;} :root .IE-9{property:value\0/;} .gte-IE-8{property:value\0;} .lte-IE-7{*property:value;} .IE-7{+property:value;} .IE-6{_property:value;} .not-IE{property//:value;} @-moz-document url-prefix() { .firefox{property:value;} } @media all and (-webkit-min-device-pixel-ratio:0) { .webkit{property:value;} } @media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { .opera{property:value;} } @media screen and (max-device-width: 480px) { .iphone-or-mobile-s-webkit{property:value;} }
  • もちろん、より優雅なhack方式を使うことを強くお勧めします.それはhackを避けることです.あるいは書く上で、小さなtrickをします.例えば、
    .selector .child{property:value;} /* for ie-6 */ .selector > .child{property:value;} /* except ie-6 */
  • Hackについて:firefoxで書き終わって、IEは問題がありますか?やはり他のブラウザにも出てきました.IE Hackが解決できることを知っています.あなたも知っているかもしれませんが、他の方法でも迂回できると思います.Hackを使わないことをお勧めします.

    • 六、書く規範:
    1.次のように書く.
         ：（    ） /*     -1 */ .tech, .ued{ background:#f60 url(alipay.com/orange.png) no-repeat 0 0; } /*     -2 */ .tech{ width:950px; margin:0 auto; } .tech .wd{ width:620px; float:left; }
         ：（       ，     ） /*     -3 */ .ued{width:100%;padding:30px 50px;} .ued .visual{display:inline-block;font:700 normal 12px/1.5 arial;}

    2.非常に重要なポイント:
  • ゾーンモジュール間を空白行で区切る
  • 複数のセレクタを一緒に書くと、カンマ(,)の後にスペース
    • が続きます.
  • 行内様式は避ける、JSであってもclass/IDを用いて表示を決定すべきであり、行内様式
    • ではない
  • 低効率セレクタの使用を避ける(したがって、classを乱用しないでください.もちろん、IDを乱用しないでください.私はあなたが知っていると信じています)詳細は、次のとおりです.http://code.google.com/speed/page-speed/docs/rendering.html
  • は、font:700 normal 12 px/1.5 arialなどの略語をできるだけ使用します.一般的には
    font-style:normal; font-size:12px; line-height:1.5; font-family:arail;
    と書かないでください.通常、略語規則を使用する必要があります.
    padding: toprightbottomleft; padding: top-bottomright+left; padding: topleft-rightbottom; padding: top-right-bottom-left;
 ：padding:1px 2px3px4px; margin:   

    `red`      ，    ；16        ； 3 ，  6 ，  ： color: red; color;#FFF; color:#ABCABC background: colorimageUrlrepeatattachmentposition;
 ：background:#ddd url(alipay-wd.png) no-repeatscroll10px20px; border: sizestylecolor;
 : border:1px solid#ddd; font: weightvariantstylesize/lineHeightfamily;
  font:700 small-capsitalic12px/1.5 "Courier New"; font-weight    500   normal,   700   bold; list-style: typepositionimage;
 ：list-style: squareinsideurl(alipay-wd.png);  ，          list-style:none;
  • CSS 3書写規範:ブラウザの私有書き方は前、標準書き方は後
    -moz-box-shadow: 1px2px3px#ddd;
-webkit-box-shadow: 1px2px3px#ddd; box-shadow: 1px2px3px#ddd;
  • 1.書く順序は書く順序を強制しない.しかし、コードを見ている人が理解しやすいように、良い習慣を身につけなければなりません.読みやすいことはチームワークにとって非常に重要です:1.フレームワークは、次にフローティングコンテナのスタイルを書くなど、詳細は、まずこのコンテナのフレームワークをレンダリングし、基本的なWebフレームワークを見せる必要があります.そして容器の中身をレンダリングします.最終的にユーザに提示.通常はcolor font paddingとか、後ろに書いてあります.
    .selector{float:left;width:300px;height:200px;font-size:14px;color:#f36;}
  • 2. 例えば「画像置換文字」技術を使用したい場合、通常使用するtext-indent.ラベルがspan:である場合、この文字は画像に置き換えられるまずspanを「ブロックレベル要素」に変えるべきである(display:blockを使用します.彼は永遠にブロックレベルの要素ではありませんが)、文字をindentします.まずindentをブロックレベルに変えるのではありません.
    .thepic{display:block;text-indent:-9999em;}
    また、私たちのように、spanにmarginを使用させたい場合は、span{display:block;margin-bottom:10 px;span{margin-bottom:10 px;display:block;}ではありません.displayがない前に、行内要素にはmarginがないからです.

    • 七、IE私有特性
    1. expression
    いつでも、それを使わないでください.Javascriptを使いましょう.より優雅で、より柔軟です.
    2. filter
  • AlphaImageLoader
    • の使用はできるだけ避けるべきである.
  • は、
    • を投影/発光/グラデーション/消色に好適に用いることができる.
    3. IE bug
    よくあるBUG、詳しくは以下を参照してください.http://sofish.de/1400
    八、どのようにあなたのCSSファイルの構造を計画します
    1.必ずグローバル設定が必要
    グローバル設定は、同じものを繰り返し書くことを避けることができます.たとえば、3人が1つのプロジェクトで、プロジェクトに関連するリンクに10色があると仮定し、グローバルリセットがあれば、色を統一的に設定することができます.ない場合は、それぞれが自分の担当する部分のリンクに対応する色を定義する可能性があります.これにより、複数の定義が定義され、定義が統一されません.これからはいろいろな場所でメンテナンスする必要があります.これは面倒なことだ.またcssファイルも大きくなります.だから、書く前に、まずビジュアル原稿を分析し、グローバル設定を統一しなければならない.
    /* global reset */ body{padding:0;margin:0;font.....} a{color:#07f;} a:hover{color:#555;}

    一般的には、ラベルに直接スタイルを書かないでください.ではclassを使用します.次のような書き方は、あまり適切ではありません.
    h1{font-size:30px} h2{font-size:20px} h3{font-size:10px;}

    もう1つのh 2も10 pxを使用し、他のものも20 pxを使用している場合は困ります.そこで、この方法をお勧めします.
    /* global classes */ .text-size30{font-size:30px;} .text-size20{font-size:20px;} .text-size10{font-size:10px;}

    …

    …
    2.必ずモジュール化する
    コード再利用のモジュール化に注意すること.1つは、ブロックではなくHTML構造のモジュール化に注意することです.
  • 私たちはこのように再利用しています:
    <div id="module-1" class="module"> <h3>TITLE</h3> <p class="module-item"> some text </p> </div> <div id="module-2" class="module"> < h3>TITLE</h3> <p class="module-item"> some text </p> </div>
    /* module, reuse style in module scrope*/ .module{} .module-status{} .module-item{} .module-status .module-1-item{} /* customize */ #module-1 .module-item{} #module-2 .module-item{}
  • HTMLのモジュール化:私たちはこのように書くべきです(彼らの視覚は一体で、コードも一体であるべきです):
    <div id="module-1" class="module"> <h3>TITLE</h3> <p class="module-item"> some text </p> </div> <!-- #module .module -->
    はこのように書くのではありません:
    <h3>TITLE</h3> <!--     --> <div id="module-1" class="module>
    <p class="module-item"> some text </p> </div> <!--     -->
    • 九、注意すべきこと
    1.Background Color:
  • 一般的にbackground:url(path/to/image)no-repeat 0と書きます.
  • 要素の背景が濃い色の場合、例えば2000のように、テキストの色として比較的浅い色を選択します.例えば、fffは、ネットの速度が遅いためにCSSがロードされているのを避けるために、画像がロードされていないか、画像サーバが停止している間にテキストが見えない場合は、CSS定義を加えた背景色をできるだけ使用してください.例えば、background:#e 8 edef url(path/to/image)no-repeat 0;

    • 2. has Layout
    簡単にhackを使わないでください.IEの下の多くの互換性の問題はhas Layoutが引き起こしたのです.要素を追加してみます.
    display: inline-blockheight: (  auto    ) width: (  auto    ) float: (left  right) position: absolutewriting-mode: tb-rlzoom: (  normal    )

    3.コードテスト:
    一般的には、コンピュータ側のA-Gradeブラウザをテストする必要があります.
     
    Win XP
    Win 7
    Mac 10.6.†
    iOS 3.†
    iOS 4.†
    Android 2.2.†
    Safari 5.†
     
     
    A-grade
     
     
     
    Chrome † (latest stable)
    A-grade
     
     
     
     
     
    Firefox 4.†
     
    A-grade (upon GA release)
    A-grade (upon GA release)
     
     
     
    Firefox 3.6.†
    A-grade
    A-grade
    A-grade
     
     
     
    IE 9.0
     
    A-grade (upon GA release)
     
     
     
     
    IE 8.0
    A-grade
    A-grade
     
     
     
     
    IE 7.0
    A-grade
     
     
     
     
     
    IE 6.0
    A-grade
     
     
     
     
     
    Safari for iOS
     
     
     
    A-grade
    A-grade
     
    WebKit for Android OS
     
     
     
     
     
    A-gradea

    php接続kafka
    Python3でbasemapをインストールする際に出力されるエラーへの対処