CSS記述仕様-htmlチュートリアル-php.cn

CSS記述仕様

巴扎黑

リリース： 2017-07-21 17:48:14

オリジナル

1434 人が閲覧しました

1. オブジェクト指向 CSS (OOCSSS)

OOCSS ルール 1: 構造とスキンの分離

.btn、.btn-info、.btn-warning など

.btn {
                display: inline-block;
                margin-bottom: 0;
                font-weight: normal;
                text-align: center;
                vertical-align: middle;
                -ms-touch-action: manipulation;
                touch-action: manipulation;
                cursor: pointer;
                background-image: none;
                border: 1px solid transparent;
                white-space: nowrap;
                padding: 6px 12px;
                font-size: 14px;
                line-height: 1.42857143;
                border-radius: 4px;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
            
            .btn-info {
                color: #ffffff;
                background-color: #5bc0de;
                border-color: #46b8da;
            }
            
            .btn-warning {
                color: #ffffff;
                background-color: #f0ad4e;
                border-color: #eea236;
            }

ログイン後にコピー

OOCSS ルール 2: コンテナとコンテンツの分離 (推奨されません)

.header .btn{
                display: inline-block;
                margin-bottom: 0;
            }

ログイン後にコピー

2. 単一責任の原則

(1)、可能な限り独立して再利用可能なコンポーネントに分割します

( 2) 複数のコンポーネント

を組み合わせて実現: ボタン(btn)やページングなどの小さなコンポーネントをオブジェクト指向CSSと同じように実装できます。

3. 開閉原則

(1) 拡張機能を公開する

(2) 変更を禁止する

.box{
                display: block;
                padding: 10px;
            }
            /*不好的写法*/
            .content .box{
                padding: 20px;
            }
            /*较好的写法  扩展*/
            .box-large{
                padding: 20px;
            }

ログイン後にコピー

4. 命名原則

(1)使用に基づいて優先順位を付ける関数上の命名 (btn など)

(2) コンテンツベースの命名 (ヘッダーコンテンツなど)

以上がCSS記述仕様の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。