Recommended
More Related Content
What's hot
What's hot (17)
Similar to Enduring CSS
Similar to Enduring CSS (20)
Enduring CSS
- 10. OOCSS
- 12. <button class="button button_caution">...</button> <button class="button button_pdf">...</button> <button class="button button_play">...</button>
- 13. BEM
- 18. block__element--modifier Block .tab Element .tab__item Modifier .tab__item--active
- 29. ecss.io
- 40. /* topPage modules */ .tp-MainVisual { ... } .tp-Carousel { ... } .tp-NewsList { ... } /* 商品詳細 productDetail modules */ .pd-ItemDescription { ... } .pd-ItemMainPhoto { ... } .pd-Carousel { ... } /* shoppingCart modules */ .sc-ItemList { ... } .sc-UserInfo { ... }
- 41. common
- 42. /* 共通 common modules */ .cmn-Header { ... } .cmn-Footer { ... } .cmn-SideAd { ... }
- 45. 例えばこう
- 46. .namespaces ├── common │ ├── common.css │ └── common.js ├── productDetail │ ├── productDetail.css │ └── productDetail.js └── topPage ├── topPage.css └── topPage.js
- 48. .namespaces ├── common │ ├── common.css │ └── common.js ├── productDetail │ ├── productDetail.css │ └── productDetail.js └── topPage2 ├── topPage2.css └── topPage2.js
- 49. 分離しなかったら？旧topPageリソース消せないですよね？ このCSS消していいんだろうか… この画像どこに置けばいいんだろう… このモジュール変更するのが怖い いや、そもそも変更出来ないし消せない
- 52. BEMでは…… Block .tab Element .tab__item Modifier .tab__item--active
- 53. <div class="tab"> <button class="tab__item">One</button> <button class="tab__item tab__item--active">Two</button> <button class="tab__item">Three</button> <button class="tab__item">Four</button> </div>
- 54. ECSSでは…… .ns-Module_ChildNode-variant Module .tp-Tab Child node .tp-Tab_Item Variant [aria-current="true"] variantにはwai‒ariaとかも使うと良いぞと
- 55. <div class="tp-Tab"> <button class="tp-Tab_Item">One</button> <button class="tp-Tab_Item" aria-current="true">Two</button> <button class="tp-Tab_Item">Three</button> <button class="tp-Tab_Item">Four</button> </div>
- 64. どうECSSの考えを 適用するか
- 69. ありがとう ございました