コーディング規約

CSS設計の個人メモ。振り返り用。

# ファイル構成

- reset.css
- base.css
- components.css
- themify-icons.css (アイコン)


# コーディング規約
#<font color="Blue">body</font>

```html
<body>
   <div id="top" class="l-wrapper">
     {...ここにコンテンツ入れていく}
   </div>
</body>
```

```css
.l-wrapper {
    position: relative;
    overflow: hidden;
}
```

#<font color="Blue">section</font>
- <strong>ページプレフィックス(home→h)+section名</strong>を<strong>idで管理</strong>
- <strong>***Wrap</strong>でサイト共通でsection間の<strong>上下余白をpaddingで制御</strong>
- section間はぴったりとくっつけるイメージ。そのため、<strong>section内(=padding)で見た目の余白を作る</strong>
- bodyにサイト共通colorをあてるように、sectionを小さなサイトと捉え<strong>h-companyWrapでcolorを制御</strong>


```html
<section id="h-company"> <!-- 基本何もcssプロパティを当てない -->
    <div class="h-companyWrap"> <!-- background,color,padding-top(bottom) -->
        <div class="l-container"> <!-- max-width,padding-right(left) -->
            {...ここにコンテンツ入れていく}
        </div>
    </div>
</section>
```

```css
[class*="Wrap"] {
    padding-top: 45px;
    padding-bottom: 45px;
}

.l-container {
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
    padding-right: 15px;
    padding-left: 15px;
    position: relative;
}
```


#<font color="Blue">title</font>
- 基本的に見出しも<strong>layout > component</strong>の2つのセレクタで構成
- <strong>ttl</strong>で<strong>background, color, padding-top (bottom)</strong>

```html
<div class="ttl">
    <h2 class="hdg-2">会社概要</h2>
</div>
```

```css
.ttl-primary {
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: center;
    color: #666;
}
.hdg-2 {font-size: 2.4rem;}
```


#<font color="Blue">button</font>
![スクリーンショット 2021-01-01 22.26.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/825124/30c5c484-0490-2b28-365f-729b8f4e0150.png)

- <strong>wrap-btn (layout) > btn (デザインベース), btn--xxx (パターン)</strong>
- 幅はmin-heightで制御
- アイコンはthemify-iconsを使用、<strong>spanでposition調整 => 擬似要素でアイコン表示</strong>

```html
<div class="row">
    <div class="wrap-btn">
        <a href="#" class="btn btn--prim">
            詳しく見る
            <span class="ti-angle-right"></span>
        </a>
    </div>
</div>
```

```css
.wrap-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
}

.btn {
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-user-select: none;
}

/* btn--prim */
.btn--prim {
    min-width: 20rem;
    height: 5rem;
    border: 2px solid #111;
    color: #111;
    
    /* アイコン */
    & > span {
        position: absolute;
        top: 0;
        bottom: 0;
        right: .7rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-size: 1.2rem;
    }
}
```
[themify-icons](https://themify.me/themify-icons)から以下DLし設置

- themify-icons.css(必要に応じてscssにファイル名変更)
- fontsフォルダ

```css
@font-face {
    font-family: 'themify';
    src:url('../fonts/themify.eot?-fvbane');
    src:url('../fonts/themify.eot?#iefix-fvbane') format('embedded-opentype'),
    url('../fonts/themify.woff?-fvbane') format('woff'),
    url('../fonts/themify.ttf?-fvbane') format('truetype'),
    url('../fonts/themify.svg?-fvbane#themify') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="ti-"], [class*=" ti-"] {
    font-family: 'themify';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ti-angle-right:before {
    content: "\e649";
}
```


#<font color="Blue">card</font>
![スクリーンショット 2021-01-01 19.49.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/825124/22d46e2e-137c-189d-5ca4-9fd15dba89bd.png)
- <strong>row>col>crdの階層必須</strong>
- padding-topのパターンを予め用意
- crd__ttlは、通常のttlと同様、レイアウト(親要素)とフォントサイズ(小要素)と２階層で記述

```html
<div class="row">
    <div class="col-12 col-md-3 col-sm-6">
        <a href="#" class="crd">
            <div class="crd__img" style="background-image: url(./images/photo--1.jpg);"></div>
            <div class="crd__content">
                <div class="crd__ttl">
                    <h3 class="hdg-5">サンプル見出し</h3>
                </div>
                <p class="crd__txt">テキストが入ります。テキストが入りますテキストが入ります。</p>
            </div>
        </a>
    </div>
    <!-- col 3つ省略... -->
    
</div>
```

```css
.crd {
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    margin-bottom: 1.5rem;
    height: calc(100% - 15px);
    background-color: #fff;
    border: 3px solid #f1f1f1;
}

.crd__img {
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #000;
}

.crd__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem;
}

.crd__img {
    /*padding-top: 33.3333%;*/
    /* 3:1 */
    /*padding-top: 40%;*/
    /* 5:2 */
    /*padding-top: 50%;*/
    /* 2:1 */
    /*padding-top: 56.25%;*/
    /* 16:9; */
    padding-top: 66.66667%;
    /* 3:2 */
    /*padding-top: 75%;*/
    /* 4:3 */
    /*padding-top: 200%;*/
    /* 1:2 */
}

.crd__ttl {
    margin-bottom: .8rem;
}

.crd__txt {
    margin-bottom:1.5rem;
}


@media (max-width: $bp-sm) {
    .crd__img {
        /*padding-top: 33.3333%;*/
        /* 3:1 */
        padding-top: 40%;
        /* 5:2 */
        /*padding-top: 50%;*/
        /* 2:1 */
        /*padding-top: 56.25%;*/
        /* 16:9; */
        /*padding-top: 66.66667%;*/
        /* 3:2 */
        /*padding-top: 75%;*/
        /* 4:3 */
        /*padding-top: 200%;*/
        /* 1:2 */
    }
}
```


#<font color="Blue">link</font>
![スクリーンショット 2021-01-13 19.22.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/825124/5b260f88-7cdb-a615-d4b9-024b470361a5.png)

- aタグの親要素(lnk-txt)： 文字部分のみリンク範囲にするため、display: inline-block
- lnk-txt > a を右寄せする場合は、ヘルパークラス(u-ta-r)で要素を囲って制御
- aタグ：width:100%を設定しリンク範囲を親要素幅いっぱいにすることもあるので、常に display:block

```html
<!-- ノーマル -->
<div class="ttl"><h2 class="hdg-4">lnk-txt</h1></div>

<div class="lnk-txt">
    <a href="#">詳しく見る
        <span class="ti-angle-right"></span>
    </a>
</div>

<!-- ノーマル(右寄せ) -->
<div class="ttl"><h2 class="hdg-4">u-ta-r > lnk-txt</h1></div>

<div class="u-ta-r">
    <div class="lnk-txt">
        <a href="#">詳しく見る
            <span class="ti-angle-right"></span>
        </a>
    </div>
</div>

<!-- width100%で、下線あり -->
<div class="ttl"><h2 class="hdg-4">lnk-txt--bdr</h1></div>

<div class="lnk-txt lnk-txt--bdr">
    <a href="#">詳しく見る
        <span class="ti-angle-right"></span>
    </a>
</div>
```

```css
/* textLink + > icon  */
.lnk-txt {
    display: inline-block;
    color: #cf1800;
    
    & > a {
        display: block;
        color: inherit;
    }
    
    & [class*="ti-"] {
        margin-left: 5px;
        font-size: 1.1rem;
        color: inherit;
    }
}

/* --border-bottom */
.lnk-txt--bdr{
    width: 100%;
    text-align: right;
    border-bottom: 1px solid #7c0aff;
}
```