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
をダウンロードして、他に色など付け足す。
すべて読み込まないようにする。
ここが詳しい。
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ピックアップ。
そしてまたアウトプットを繰り返そうと思います。
それでは、また。