スタイルライブラリデザインガイド

前言

1、分析Class

Classは単純なjsオブジェクトに似ており、キー値ペア(property&value)で構成されています.
Cascading Stylesheet(CSSと略称)は、ブラウザが指定した特性でページ要素(色、位置、装飾など)を描画することを基本としています.CSSの構文はこの目標を反映しており、次の2つの部分から構築されています.

プロパティ(property)は、そのプロパティを読み取り可能な名前で表す識別子です.

値(value)は、ブラウザエンジンがこの特性をどのように処理するかを記述する.各プロパティには、ブラウザエンジンによって実装される正式な構文と意味定義の有効な値のセットが含まれています.

Classが持つpropertyは、Classが持つスタイル属性を示し、valueはClassが持つスタイル属性の具体的な表現を表します.

.Class {
    property: value;
}

CSSスタイルには上書きされたルールがあり、デフォルトでは後者が上位になります.

.Class1 {
    width: 100px;
    width: 50px;
}

.Class2 {
    width: 100px;
}

.Class2 {
    width: 50px;
}

このとき,Class 1とClass 2が実際に表現した様式はいずれもwidth: 50px;である.
しかし、何事にも特別な状況があります.

.Class1 {
    width: 100px !important;
    width: 50px;
}

.Class2 {
    width: 100px !important;
}

.Class2 {
    width: 50px;
}

この場合,Class 1とClass 2が実際に表現した様式はいずれもwidth: 100px;である.!importantの圧倒的な実力とCSSスタイルへの破壊性のため、!importantを勝手に使ってはいけません.

Neverは、全局範囲のcss上で!important

を使用しないでください.

Onlyは、全局または外部css(例えば参照されるExtJsまたはYUI)を上書きする必要がある特定のページでのみ、!important

を使用する.

Neverは、あなたのプラグインで!important

を使用しないでください.

Always

ではなく、スタイルルールの使用を考慮した優先度を最適化する.

2、分析property&value

まず、いくつかの概念を明確にする必要があります:初期値、継承、計算値、適用値.
参照MDN

Property

TODO

Value

jsには、!importantタイプ、Stringタイプ、Objectタイプ、Numberタイプなど、多くのデータ型があります.
CSSにおいても同様にデータ型があり、通常はデータフォーマット、すなわちData typesと呼ばれる.
よく使われるCSSデータフォーマットは、以下のようなものがあります.は、数値、整数または小数を表します.

10, 0.5, -1

は距離寸法を表す.

100vw, 100vh, 16px, 1em, 1rem

は色を表します.

#f03, #F03, #f03f03, #F03F03

rgb(255,0,0), rgba(255,0,0,1)

hsl(0,100%,50%), hsla(0,100%,50%,1)

その他は列挙せず、MDN参照

コンポーネントスタイルライブラリの設計

1、どのように構成部品を解体するか、どのように構成部品を計画するか、どのように構成部品を分析するか）

HTMLタグの観点から考えると、コンポーネントは2つに分けることができます.それぞれ、マルチタグコンポーネントと単一タグコンポーネントです.

単一ラベルコンポーネントにとって、構造は実際には、コンポーネントのスタイル構成を指すことが多い.

マルチタグコンポーネントの場合、構造はHTMLタグ構造を指すことが多い.

単一ラベルコンポーネント

I am primary button
I am outline primary button

/*      .block */
.btn {
    /* ... */
    color: black;
    /* ... */
}

/*      .block-modifier */
.btn-primary {
    /* ... */
    color: blue;
    /* ... */
}

/*      .block-modifier */
.btn-outline-primary {
    /* ... */
    color: blue;
    background-color: transparent;
    /* ... */
}

マルチタブコンポーネント

    

        nav1
    
    

        nav2
    
    

        nav3
    
    

        nav4
    

コンポーネントの直感的な表現から見ると、コンポーネントは、構造、配色、寸法、状態の4つの部分に従って解くことができる.
a)構造
構造はコンポーネントの基礎であり、コンポーネントの骨格である.しかし、単一ラベルコンポーネントとマルチラベルコンポーネントは、構造の表現においていくつかの違いがある.

*          ，          ，        。
*          ，         HTML      。

b)配色
コンポーネントは異なる配色を有することができ、配色はコンポーネントの形態と理解することができる.

style1 is my style

style2 is my style too

style3 is my style too

c)寸法
人は背が高いか低いかで、コンポーネントは異なるサイズになります.

I am a button

I become a small button

I become a medium button

I become large button

d)状態
ステータスは、ユーザがコンポーネントとインタラクティブになり、コンポーネントが生成されるステータスと理解できる.
状態は大きく2種類に分けることができる:enable stateとdisabled state.enable stateはelement stateとも呼ばれる

.Class:active { property: value; }
.Class:focus { property: value;  }
.Class:hover { property: value;  }
.Class:visited { property: value; }

enable stateの永続化状態を表すには、次のようにしてもよい.

.Class.active { property: value; }
.Class.focus { property: value;  }
.Class.hover { property: value;  }
.Class.visited { property: value; }

disabled stateはspecial stateとも呼ばれる

.Class.disabled { property: value; }
.Class.loading { property: value; }

2、コンポーネントの設計方法

コンポーネントスタイルのClassネーミングはBEM方式、すなわちBlock&Element&Modifierに基づいて命名されます.
書き方は2種類あり、以下のようになります.
以下.block & .block-element & .block-element-modifierはすべて代指です.

/*       */
.block {}
.block--modifier {}
.block__element {}
.block__element--modifier {}

/*       */
.block {}
.block-modifier {}
.block-element {}
.block-element-modifier {}

1つ目の書き方は標準的な書き方で、2つ目の書き方は簡潔な書き方です.2つ目の書き方で詳しく説明します.
BEM方式で書かれたClassは、単一のラベルコンポーネントとマルチラベルコンポーネントでは、代表される意味の大部分が同じで、小さな部分に違いがあります.

BEM之block

単一ラベルコンポーネント
単一ラベルアセンブリでは、.blockがベーススタイルとして存在することが多い.

I am component

マルチタブコンポーネント
マルチタグアセンブリでは、.blockは容器としてより多く存在する.

    

        
title
    
    

        

            link
        
    
    

        

            ![](#)
        
    

BEM之block-modifier

単一ラベルコンポーネント
単一ラベルアセンブリでは、.block-modifierと.blockを重ねて使用し、.blockの修飾として使用する.

I am component
I am component


I am component
I am component


I am component
I am component

ここでの.btn-primary-ghostは実際には.block-modifierとして存在するが、これは比較的特殊な場合であり、BEMを簡潔に書くことで遭遇する可能性がある場合でもある.
マルチタブコンポーネント
マルチタグアセンブリでは、.block-modifierは.blockと重ねて使用され、一般にアセンブリの容器.blockにのみ影響を及ぼす.

    

        
title
    
    

        

            link
        
    
    

        

            ![](#)
        
    

BEM之block-element

単一ラベルコンポーネント
単一ラベルアセンブリでは、実際には.block-elementはありません.
マルチタブコンポーネント
マルチタグアセンブリでは、.block-elementは.blockの内側にある.

    

    

        
        

            link
        
    
    

BEM之block-element-modifier

单标签组件

皮之不存毛将焉附。

多标签组件

在多标签组件中，.block-element-modifier 与 .block 叠加使用，类似于 .block-modifier 与 .block 的用法。

---

3、コンポーネントの親コンテナレイアウト

父容器并不是必须的。

组件一般来说，都是会被其他的容器包裹的。用组件的父容器进行页面布局，组件则作为内容填充。

一般通过以下两种方式来设置父容器。

a)コンポーネントの.blockは親の容器としてblock

常用的容器命名有以下几种。

.block-container { property: value; }   /*                 */
.block-list { property: value; }        /*           */
.block-group { property: value; }       /*       inline     */

次に例を示します.

    
    

        

            
title
        
        

            

                link
            
        
        

            

                ![](#)
            
        
    

    
    ![](#)
    ![](#)
    ![](#)

実はここで避けたのは.block-itemの出現です.
場合によっては、親容器として.block、内容体として.block-itemを用いることもできる.

    
nav-a
    
nav-b
    
nav-c

ただし、.block-itemはお勧めしません.

    
nav-a
    
nav-b
    
nav-c

b)専用のレイアウト容器を設置し、レイアウトを行う

コンポーネントを包む専用のレイアウトコンテナを定義します.

/*          */
/* container */
.container { property: value; }

/* list */
.list { property: value; }
.list-item { property:value; }

/* group */
.group { property: value; }
.group-item { property: value; }

    
    
    
        ![](#)
    
    
    
        ![](#)
    
    
    
        ![](#)