INFO:

CSSを書くのってどこから、
どのように設計するの？という疑問があったので、

職場で先輩がたが工夫しているところ、
気をつけていることをコードから学び取っていこうという記事です。

今回の記事では、
あ、ここ良いなというsnippetを集めていき
次回で組み立ての順序をさらって、

最終的には3、4時間でLPを
作れるようになるのが目的です。

WARNING:

■あくまでも自分のメモとして書いているので、
タイポ多いと思います。

■基本的に自分の知らないことだけメモってます。

備考:

■Bootstrap4とscss使います。

高速でlpを作るために~①tips収集~

OOCSS

Object-oriented CSS

使い回しの効く設計を心がける。

**Separate container and content**
(コンテナとコンテンツを分離する)

.text-heading {
  font-wight: bold;
  color: red; 
}

**Separate structure and skin**
(構造とスキンを分離する)

.btn {
}

.btn-red {
  backgroud-color: red;
}

.btn-gray {
  backgroud-color: gray;
}

個人的に、

.text-
.btn-
.bg-
*バックグランド

などは別途ファイル作成して定義するのが
よいかんじだと思います。

いい感じにまとまってるやつ
■すぐに実践できるCSS設計 OOCSSの基本を理解しよう | ブログ | SINAP
■CSS設計における3大メソッド[OOCSS][BEM][SMACSS]

■最初にbodyとhtmlの設定をする

全体で使うフォントやテキストカラーなどを設定する。

メモ:

◯フォントサイズは
pcだと20px
タブレット端末だと18px
スマホだと16pxが良い感じ

Bootstrapのカスタマイズ

定数管理をしっかり行う。

Bootstrap variable
をダウンロードして、他に色など付け足す。

すべて読み込まないようにする。

[_bootstrap.scss]
(https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/_bootstrap.scss)

ここが詳しい。
RailsにBootstrapをカスタマイズ可能な形で導入する

■sectionごとに切り分けるのが便利

section
  トップ画像
section
  導入
section
  特徴

メモ:

◯ブロック要素
padding top bottom をつけていいかんいじに。
margin right left autoに。

■breakpointの設定

よく見かける形は

@media (min-widht: 554px) {}

ただし、これだと毎回数値を書かないといけなくて面倒臭い。
よって変数管理できるように

@include media-breakpoint-down(sm)

とかく。

smはvariables.scssで別途に定義する。

自分の悪い習慣

学んで自分の良くなかった書き方をまとめます。

####■btnのwidth


***自分の悪いコード
(Rails表記あり)
slim:
= link_to 'hoge', #, class: 'btn btn-hoge'

css:
.btn-hoge {
  width: 220px;
}

***OOCSSを考慮した良いコード
slim:
.hoge
  = link_to 'hoge', #, class: 'btn'

css:
.hoge {
  width: 220px;
}

ブロック要素の中のインライン要素になるから、
.btnには.btn-blockを使って
margin: 0 auto;を使用。

終わりに:

また随時見つけたら更新していこうと思います。

ひとまず自分のしらないところは
抑えたので模写→見ないで作成。

そして手順のアウトプットして、

他のサイトで模写したいものを
2,3ピックアップ。

そしてまたアウトプットを繰り返そうと思います。

それでは、また。