リニューアルを行う際に やったcssのルール作り@megurocss

Transcript

1. リニューアルを行う際に やったcssのルール作り
2. 江原一博（@yakiniku040220） nana music株式会社（2017年5月入社） サーバーサイドエンジニアだけどフロント好き 最近はもっぱらフロント書いてます Vue.js core staff Vue.js/Nuxt.js/Django/Firebase
4. 現在絶賛Webリニューアル中
5. Webリニューアルする理由
6. ・現状のサイトがSEOにかなり弱い ・使っているPythonのサポートが今年終わる ・コードの改修が辛い
7. ・現状のサイトがSEOにかなり弱い ・使っているPythonのサポートが今年終わる ・コードの改修が辛い
8. ・HTML、CSSのコードが乱雑
9. 例えばこのようなデザイン
11. 赤枠は背景なので、cssでbackgroundを設定 青枠はflexboxなどで中央に配置する
12. でも実際は？
13. 赤枠、青枠両方ともposition: absolute; を使っ て無理やり配置していた
14. まじか。。。 やべぇ。。。
15. ・reset.cssが存在しない
16. そもそもreset.cssとは リセット CSS とは、 Google ChromeやSafariなど ブラウザ があらかじめ 持っているデフォルトの CSSを、リセットするための手法・設定です。
17. 実際は？
18. ページごとのcssで同じような処理が書かれている ├── hoge.scss ├── hogehoge.scss ├── hogehogehoge.scss html { font-size: 16px; } body { font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Yu Gothic', 'メイリ オ', 'ＭＳ Ｐゴシック', 'MS PGothic'; } .wrap { overflow: hidden; }
19. ほんとやべぇ。。。
20. なぜこのようなことが起 こっているのか？
21. 僕が入社するまでフロント をちゃんと書ける人がいなかった。
22. 実際にやったルール作り
23. ・CSSのコーディングガイド作成 ・週1のレビュー会
24. ・CSSのコーディングガイド作成 ・週1のレビュー会
25. Qiitaにある「CSSとSassのコーディングスタイルガ イドを作ってみた」の記事を参考に作成
26. ・CSSのコーディングガイド作成 ・週1のレビュー会
27. 週1でデザイナー（css書ける）に修正点を上げても らい、レビュー書いを行う
28. ご静聴ありがとうございました