class: center, middle # Maintainable CSS ## Kobayashi Kazuhiro --- # Agenda - Maintainable and scaleble CSS - MindBEMding - MaintainableCSS --- class: center, middle # Maintainable and scaleble CSS --- # Maintainable CSS - Readability - Semantic class names - Nested - Cascade - Modules - Don't create modules related to other modules --- ## Semantic class names #### Bad 👎 ```:scss .searchList-item-red { color: red; } ``` #### Good 👍 ```:scss .searchList-item-attention { color: red; } ``` ??? -redの意味は？ background-color? color? border-color? 極端な具体化、抽象化は避ける。 --- ## 抽象化と具体化 - harukiMurakamiAmazonKindleList ❌ - amazonKindleList - amazonList - bookList - shopItemList - itemList ❌ - list ❌ --- ## Nested #### Bad 👎 ```:scss .searchList { .title { .caption { font-size: 14px; } } } .searchList { .caption { font-size: 10px; } } ``` #### Good 👍 ```:css .searchList-titleCaption { font-size: 14px; } .searchList-caption { font-size: 10px; } ``` ??? ネストを多用するとセレクター間で複雑なプライオリティが形成されてしまう。 運用上の問題がない場合は、ネストは極力使用しない。 --- ## Cascade #### Bad 👎 ```scss .title { color: red; font-size: 14px; } .title { color: blue; } ``` #### Good 👍 ```scss .title { font-size: 14px; } .title-priority { color: red; } .title-secondary { color: blue; } ``` --- ## Modules #### Bad 👎 ```scss .searchList-title { font-size: 20px; } .pager + .searchList-title { font-size: 14px; } .shopInfo { .searchList-title { font-size: 32px; } } ``` #### Good 👍 ```scss .searchList-title { font-size: 20px; } .searchList-title-small { font-size: 14px; } ``` --- class: center, middle # Scalable CSS --- ## Scalable CSS - 修正コスト - 追加コスト - 削除コスト --- ## 追加コスト #### Bad 👎 ```scss .productionList p { font-size: 14px; } ``` #### Good 👍 ```scss .productionList-description { font-size: 14px; } ``` ??? 影響範囲が広すぎる。 別スタイルの要素を追加するときに修正コストが高い。 --- ## 削除コスト [DRY CSS(Don't repeat your CSS)](http://vanseodesign.com/css/dry-principles/)な記述方法はメンテナンス性が落ちる。 #### Bad 👎 ```scss .producitonList-cartButton, .searchList-description { font-size: 14px; line-height: 1.4; } ``` #### Good 👍 ```scss %defaultText { font-size: 14px; line-height: 1.4; } .producitonList-cartButton { @extend %defaultText; } .searchList-description { @extend %defaultText; } ``` ??? スタイル変更時にクラスセレクターの連結を解消する必要がある。 DRY CSS(Don't repeat your CSS)な記述方法はメンテナンス性が落ちる。 別で記述をしておくか、Sassのplaceholderを使ってスタイルを継承する。 --- ## Maintainable and scalable CSS CSS Selectorの極端な具体化/抽象化は避ける。 運用中にスケールするのでCSS Selectorの具体化と抽象化をよく考えて決定する。 プロパティの追加と削除が行われた際に、どの程度のコストが発生するか考える。 --- class: center, middle # MindBEMding --- ## MindBEMding BEMをベースにしたCSS classの命名規則。 - B: Block - E: Element - M: Modifier --- ## BEM モスクワのIT会社Yandexが提案するフロントエンド開発のフレームワーク - [BEM](https://en.bem.info/) - [Key concepts / Methodology / BEM](https://en.bem.info/methodology/key-concepts/) - [History / Methodology / BEM](https://en.bem.info/methodology/history/) --- ## Naming Convention Pattern ```scss .block {} .block__element {} .block--modifier {} ``` ```scss .person {} .person__hand {} .person--female {} .person--female__hand {} .person__hand--left {} ``` ```scss .media {} .media__img {} .media__img--rev {} .media__body {} ``` --- class: center, middle # Uuuuuuuuuugly 😱😱😱 --- ## Other aproach to writing CSS - [SMACSS](https://smacss.com/) - [SuitCSS](http://suitcss.github.io/) - [MCSS](http://operatino.github.io/MCSS/ja/) - [FLOCSS](https://github.com/hiloki/flocss) - [ECSS (Enduring CSS)](http://ecss.io/) - [MaintainableCSS](http://maintainablecss.com/) ??? - SuitCSS: マルチクラスパターン - MCSS: マルチクラスパターン、ネスト（カスケーディング）許容 - FLOCSS: BEM + OOCSS - ECSS: BEM + OOCSS。ディレクトリ構造、アクセシビリティにも言及。 - MaintainableCSS: BEM --- class: center, middle # MaintainableCSS ??? ロンドンのフロントエンドエンジニア、アダム・シルバーの考案したCSS設計。 Webサイト構築の経験則からつくられたCSS設計思想。BEMやECSSがベースになっている。 --- ## MaintainableCSS These guides are the result of building many different types of websites and have been influenced by many experiences and the many people I have worked with. With that said, I think it bares most resemblance to BEM and ECSS. [FAQs | MaintainableCSS](http://maintainablecss.com/chapters/faqs/#isnt-this-the-same-as-insert-methodology-here) --- class: center, middle # I would say it’s very easy to learn. You can read the entire book in under 20 minutes and apply the rules in minutes. --- class: center, middle # Semantics --- ## Semantics HTMLファイルのclassプロパティを見てすぐにスタイルが理解できるようにする。 セマンティックなclassは理解がしやすく、HTMLファイル内から探し出すのも容易になる。 text, button, linkなどのclass名を調べて機械的に作業をすることも可能になる。 セマンティックではない便利クラス（mt10, tar）はデバッグの妨げになるから避ける。 セマンティックなclass名をつけることはMaintainableCSSを書く上で重要なこと。 --- ## Semantics #### Bad 👎 ```html <div class="red pull-left"> <div class="grid row"> <div class="col-xs-4"> ``` #### Good 👍 ```html <div class="header"> <div class="basket"> <div class="product"> <div class="searchResults"> ``` --- ## Semantics BreakPointでclearfixが不要になる要素にclearfixクラスを指定しない。 #### Bad 👎 ```html <div class="clearfix"> <div class="box1"></div> <div class="box2"></div> </div> ``` ```scss .box1, .box2 { float: left; } @media (max-width:480px) { .box1, .box2 { float: none; } } ``` --- ## Semantics sassのplaceholderをextendする。 #### Good 👍 ```html <div class="itemBox"> <div class="box1"></div> <div class="box2"></div> </div> ``` ```scss %clearfix {} .itemBox { @extend %clearfix } ...etc ``` --- class: center, middle # Reuse --- ## Reuse Classの再利用は避ける。 Classの再利用はデバッグを複雑にし、メンテナンス性を落とす。 Classを使い回すということは、セマンティックなクラス名をつけていないことと同義である。 ??? いわゆる便利クラス、マルチクラスパターンと呼ばれているもの。 --- ## Reuse #### Bad 👎 ```html <div class="grid"> <div class="col pd50 pd20 fs3 fs2">Column 1</div> <div class="col pd50 pd20 fs3">Column 2</div> </div> ``` #### Good 👍 ```html <div class="someModule"> <div class="someModule-someComponent"></div> <div class="someModule-someOtherComponent"></div> </div> ``` --- ## Reuse CSS preprocessorのmixinを使えば、スタイルの使い回しは容易になる。 しかし、mixinもClass Selectorと同様、具体化/抽象化に注意を払うべきである。 --- ## Reuse #### Bad 👎 ```scss @mixin redText { color: red; } ``` #### Good 👍 ```scss @mixin attentionText { color: red; } ``` ??? 具体化しすぎ。 mixinのStyle修正時に@include redTextでgrepする必要がある。 --- ## Reuse ReuseやDRY CSS（Don't Repeat Your CSS）といった考え方はソフトエンジニアリングでは開発・運用コストを下げるための重要な考え方ではあるが、CSSでは悪手になる場面が多い。 再利用性を重要視すればするほど、CSSのメンテナンス性は落ちていく。 --- class: center, middle # IDs --- ## IDs Don’t use IDs as hooks for styling. --- class: center, middle # Conventions --- ## Conventions ```scss .<moduleName>[-<componentName>][-<state>] {} ``` #### examples 📘 ```scss /* module container/root */ .searchResults {} /* components of a module */ .searchResults-heading {} .searchResults-item {} /* state: such as AJAX loading */ .searchResults-isLoading {} /* state: such as error */ .searchResults-isError {} ``` --- class: center, middle # Modules --- ## Modules 他のモジュールと一緒に使える、独立した構造。 たとえば、リビングを構成するTV、ソファー、テーブルはモジュールに相当する。 TVを取り除いても、ソファーに座ることはできる。 Webサイトでいえば、ヘッダ、フッタ、検索フォーム、ショッピングカート、記事、製品リスト、ナビゲーションがモジュールに相当する。 --- ## Component モジュールを構成する部品。 コンポーネントがなくなると、モジュールが不完全になるか破壊される。 たとえば、検索フォームモジュールの検索ボタンコンポーネントが削除されると、検索フォームモジュールは破壊される。 ランキングモジュールから順位アイコンが削除されると、ランキングモジュールは不完全になる。 --- ## Modules vs Components どの粒度でモジュールとコンポーネントの定義を決定するか。 Ultimately it doesn’t matter too much and you can use **your own experience** to decide. --- class: center, middle # State --- ## State モジュールやコンポーネントの状態。 たとえば、showing, hiding, active, inactive, disabled, loading, loadedなど。 --- ## State isActiveクラスを定義すると、多くのモジュールでさまざまなStyleが定義されてしまう。 サイト構造を理解していないエンジニアが.isActiveでStyleを定義するリスクもある。 #### Bad 👎 ```html <div class="myModule isActive"> ``` #### Good 👍 ```html <div class="myModule-isActive"> ``` --- ## Applying state to components #### Bad 👎 ```html <div class="myModule myModule-isDisabled"> <p class="myModule-title"> ``` #### Good 👍 ```html <div class="myModule"> <p class="myModule-title myModule-title-isDisabled"> ``` --- class: center, middle # Modifiers --- ## Modifiers Stateのように、モジュールのStyleを変更する。 ```html <!-- when viewing the "boys" category page --> <div class="categoryHeader categoryHeader-boys"> <!-- when viewing the "girls" category page --> <div class="categoryHeader categoryHeader-girls"> ``` ```scss .categoryHeader { /* etc */ } .categoryHeader-boys { background-image: url(/path/to/boys.jpg); } .categoryHeader-girls { background-image: url(/path/to/girls.jpg); } ``` --- ## Modifiers Stateのように、モジュールのStyleを変更する。 ```html <!-- when viewing a product with a green colour applied --> <input class="addToBasketButton addToBasketButton-green"> ``` ```scss .addToBasketButton { padding: 10px 30px; text-align: center; /* etc */ } .addToBasketButton-green { background-color: green; } ``` --- class: center, middle # Versioning --- ## Versioning Webサイトの運用時に利用される。 たとえば、A/Bテストやデザイン更新など。 --- ## Versioning ```scss /* existing module */ .someModule {} /* new version of module */ .someModuleVariant2 {} ``` --- class: center, middle # JavaScript --- ## JavaScript JavaScriptにもMaintainableCSSを適応するのであれば、 1. モジュールかコンポーネントにStateクラスを定義する 2. Global State Classを定義する --- ## Encapsulating states to the module ```scss /* isHidden */ .modalA-isHidden, .modalB-isHidden { display: none; } ``` ```js document.getElementById('js-modalA').className = 'modalA-isHidden'; document.getElementById('js-modalB').className = 'modalB-isHidden'; ``` --- ## Creating global state class ```scss .globalState-isHidden { display: none; } ``` ```js document.getElementById('js-modalA').className = 'globalState-isHidden'; document.getElementById('js-modalB').className = 'globalState-isHidden'; ``` --- class: center, middle # MaintainableCSSとは --- class: center, middle # END