CSSおじさん#0に参加したメモ:メンテナンサブルCSS

「CSSおじさん#0」に土曜日参加してきました。セッション内で触れられたものやサービスについてなどをざっとまとめた覚書的記事です。

広告ここから
広告ここまで

目次

    「CSSおじさん#0」に土曜日参加してきました。
    Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法の発売イベントとして開催されたものですが、セッション内で触れられたものやサービスについてなどメモしたものを覚書的に公開します。

    1994.10.10ってなんの日?

    CSSが生まれた年。ー>今年で20周年

    20年間変わらないこと

    CSSは壊れやすいー>syntaxの易しさ。
    簡単に書くことができる。
    その時の流れで書き足しつづけるとtoo Fragileになる。肥大化、わけのわからないことになる。

    • 開発時間kaihatujikan
    • メンバー
    • 技術力

    でクソコードはよく生まれる。

    「壊れない設計ではなく、壊れた時に勇気を持って修復できる設計をする」ことが重要

    OOCSS

    オブジェクト志向CSS

    • SMACSS
    • BEM
    • FLOCSS
    • などなど

    CSS設計のポイント

    セレクタは浅く、命名規則を持つ

    • Emmet/Zen-codingのAliasを参考にするというのはアリ!
      .u-vam{ vertical-align: middle;}みたいな。
    • ガイドラインも作っとくといい

    3回繰り返したらコンポーネントの再設計

    Rule of 3

    JSのターゲットにスタイルを持たせない

    $(‘.profile .button’).hide();みたいなスクリプト。OOCSSが崩れる。
    .js-Classで役割をわけてしまおう。
    もしくはカスタムデータ属性使う。

    直接記述は絶対しない

    マジで後悔する。

    コードの再利用が全てではない

    再利用したセレクタ名が使用用途にあっているか?

    デザイナーとのコミュニケーション

    角丸のサイズや色の濃淡など微妙な差なら、デザインを統合させた方が良い。

    CSSプリプロセッサは銀の弾丸か?

    NO

    例えばSass

    スマートに処理する方法はある・・・が扱いが難しい。
    Sassのファイルを触れる人はどれくらいいる?

    Sassがコンパイルした後のコードはなかなか凄い・・・
    CSSファイルやのに440kb(gzip後やけん960kbくらい?)

    やっていいこと・ダメなことを決める

    • extend/複雑なmixin/Nestしすぎ・・・ダメ!
    • 変数・浅いネスト・importなど・・・OK!
      • 色の一元管理のmixin
      • hoverの記述を効率化

    まとめ

    完璧なCSSは壊れると大変
    ヘミングウェイ「最初の原稿はクソ(the first draft of anything is shit)」

    これからCSSを触るという方必見です

    Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

    ちなみにKindle版もあって、そちらのほうがちょっとお得です。

    Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark