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

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

江原一博（@yakiniku040220） nana music株式会社（2017年5月入社）サーバーサイドエンジニアだけどフロント好き最近はもっぱらフロント書いてます Vue.js core staff Vue.js/Nuxt.js/Django/Firebase

現在絶賛Webリニューアル中

Webリニューアルする理由

・現状のサイトがSEOにかなり弱い・使っているPythonのサポートが今年終わる・コードの改修が辛い

・HTML、CSSのコードが乱雑

例えばこのようなデザイン

赤枠は背景なので、cssでbackgroundを設定青枠はflexboxなどで中央に配置する

でも実際は？

赤枠、青枠両方ともposition: absolute; を使って無理やり配置していた

まじか。。。やべぇ。。。

・reset.cssが存在しない

そもそもreset.cssとはリセット CSS とは、 Google ChromeやSafariなどブラウザがあらかじめ持っているデフォルトの CSSを、リセットするための手法・設定です。

実際は？

ページごとの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; }

ほんとやべぇ。。。

なぜこのようなことが起こっているのか？

僕が入社するまでフロントをちゃんと書ける人がいなかった。

実際にやったルール作り

・CSSのコーディングガイド作成・週1のレビュー会

Qiitaにある「CSSとSassのコーディングスタイルガイドを作ってみた」の記事を参考に作成

・CSSのコーディングガイド作成・週1のレビュー会

週1でデザイナー（css書ける）に修正点を上げてもらい、レビュー書いを行う

ご静聴ありがとうございました

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

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

Kazuhiro Ebara

More Decks by Kazuhiro Ebara

Other Decks in Programming

Featured

Transcript