Download as PDF, PPTX
Uploaded by拓樹 谷
PDF, PPTX42,970 views
モダンなCSS設計パターンを考える
This document discusses modern CSS architecture patterns. It introduces concepts like OOCSS, SMACSS, and BEM for organizing CSS in a modular, scalable and maintainable way. It provides examples of how to build reusable CSS modules and maintain them through techniques like naming conventions, categorization and decoupling CSS from HTML. The presentation emphasizes goals of building predictable, reusable, maintainable and scalable CSS architecture.
Recommended
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fvibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
モダンなCSS設計パターンを考える
- 1.モダンなCSS設計パターンを考えるModern CSS ArchitectureHirokiTaniHTML5 Conference 2013
- 2.
- 3.http://frontrend.github.io/Frontrend in SapporoFrontrendin Fukuoka2013年12月7日2013年1月
- 4.
- 5.
- 6.
- 7.
- 8.#news h2 {border-bottom: 1px solid black; padding: 1em 0.5em; font-size: 18px; font-weight: bold;}
- 9.#news h2 {border-bottom: 1px solid black; padding: 1em 0.5em; font-size: 18px; font-weight: bold;}#faq .title { border-bottom: 1px solid black; padding: 1em 0.5em; font-size: 18px; font-weight: bold;}
- 10.#news h2 {border-bottom: 1px solid black; padding: 1em 0.5em; font-size: 18px; font-weight: bold;}#faq .title { border-bottom: 1px solid black; padding: 1em 0.5em; font-size: 18px; font-weight: bold;}#service .feature .title { border: 1px solid black; padding: 0.5em; font-size: 16px;}
- 11..column_2 #inbox .list{ ... }.column_3 #inbox .list { ... }.column_3 #inbox .list .name { ... }.column_3 #inbox .list .name p { ....column_3 #inbox .list .name.reply {.column_3 #inbox .list .name.reply abody#top .column_3 #inbox .list.left}... }{ ... }{ ... }
- 12.
- 16.Goals of BetterCSS Architecture- Predictable- Reusable- Maintainable- Scalable予測しやすい再利用しやすい保守しやすい拡張しやすいhttp://enja.studiomohawk.com/2013/07/06/css-architecture/
- 17.
- 18.
- 23.OOCSS- Separate structureand skin構造と見た目の分離- Separate container and contentコンテナとコンテンツの分離
- 24.
- 25.<div class="media"> <divclass="media-image"> <img src="/img/seminar/15/tani.jpg"> </div> <div class="media-body"> <p>...</p> <ul> <li><a>...</a></li> </ul> <p>...</p> </div></div>
- 26.<div class="media"> <divclass="media-image"> <img src="/img/seminar/15/tani.jpg"> </div> <div class="media-body"> <p>...</p> <ul> <li><a>...</a></li> </ul> <p>...</p> </div></div>
- 27.<div class="media"> <divclass="media-image"> <img src="/img/seminar/15/tani.jpg"> </div> <div class="media-body"> <p>...</p> <ul> <li><a>...</a></li> </ul> <p>...</p> </div></div>
- 28..media { /*Clearfix */}.media-image { float: left; margin-right: 10px;}.media-image img {> display: block;}.media-body { overflow: hidden;}
- 29.<div class="media skin-a"><div class="media-image"> <img src="/img/seminar/15/tani.jpg"> </div> <div class="media-body"> <p>...</p> <ul> <li><a>...</a></li> </ul> <p>...</p> </div></div>
- 30.<div class="media skin-b"><div class="media-image"> <img src="/img/seminar/15/tani.jpg"> </div> <div class="media-body"> <p>...</p> <ul> <li><a>...</a></li> </ul> <p>...</p> </div></div>
- 31.How to buildmodules ?
- 32.
- 33.
- 34.
- 35.3, 6, 9,12, 15 ...
- 36.3, 6, 12,24, 48 ...
- 37.
- 38.3, 6, 9,12, 15 ...
- 40..fontSize10 { font-size:10px}.colorRed { color: red}
- 41.
- 42.<p class="box radius10fontSize18 colorRed">入力内容に誤りがあります。</p>
- 43.
- 44..colorRed { color:orange;}⚠
- 45..colorRed { color:orange; /* あとで直す */}⚠
- 46.
- 47..fontSize18 { font-size:18px}@media only screen and (max-width : 320px) { .fontSize18 { font-size: 14px }}⚠
- 48..radius6 { border-radius:}.radius10{ border-radius:}.radius12 { border-radius:}.radius14 { border-radius:}6px;10px;12px;14px;⚠
- 49.How to maintainmodules ?
- 50.
- 51.
- 52.SMACSS- Categorizationカテゴライズ- NamingConvention命名規則- Decoupling CSS from HTMLHTMLとCSSの分離
- 53.SMACSS Categories- Base-Layout- State- Theme- Module
- 54./* # Base*/body, form {margin: 0;padding: 0;}a {color: #039;}a:hover {color: #03F;}
- 55./* # Layout*/#header {width: 960px;margin: auto;}.l-article {border: solid #CCC;border-width: 1px 0 0;}.l-grid {margin: 0;padding: 0;list-style-type: none;}.l-grid > li {display: inline-block;margin: 0 0 10px 10px;}
- 56./* # State*/.is-hidden { display: none;}.is-error { font-weight: bold; color: red;}.is-tab-active { border-bottom-color: transparent;}
- 57./* # Theme*//* ## Spring Theme CSS */.theme-header { background-image: url("/theme/spring/header.png");}.theme-border { 1px solid pink;}
- 59.
- 60.<div class="msg"><p>...</p></div>.msg {display:block;border: 1px solid #cccccc;border-radius: 8px;padding: 1em;background-color: #efefef;color: #333333;}
- 62.<div class="msg msg-error"><p>...</p></div>.msg{...}.msg-error {border: 1px solid #c0392b;background-color: #fe9282;}
- 64.<div class="msg msg-success"><p>...</p></div>.msg{...}.msg-success {border: 1px solid #27ae60;background-color: #99f3c9;}
- 66.
- 67.<div class="msg msg-error"><h2>...</h2><p>...</p></div>.msgh2 {font-size: inherit;font-weight: bold;}.msg p {margin-top: 0.6em;}
- 69..msg h2 {font-size:inherit;font-weight: bold;}.msg ul,.msg p {margin-top: 0.6em;}
- 70..msg h2 {font-size:inherit;font-weight: bold;}.msg ul,.msg p {margin-top: 0.6em;}⚠
- 71.<div class="msg msg-error"><h2class="msg-title">...</h2><ul class="msg-body"><li>...</li><li>...</li></ul></div>
- 72..msg-title {font-size: inherit;font-weight:bold;}.msg-body {margin-top: 0.6em;}
- 73.<div class="msg msg-error"><pclass="msg-title">...</p><ul class="msg-body"><li>...</li><li>...</li></ul></div>
- 75.<div class="msg msg-error"><h2class="msg-title"><i class="msg-title-icon ico ico-label ico-alert"></i>...</h2><ul class="msg-body"><li>...</li><li>...</li></ul></div>
- 76..msg-title-icon {vertical-align: -0.3em;}.ico{display: inline-block;}.ico-alert {background-image: url(...);width: 24px;height: 24px;}.ico-label {margin-right: 0.3em;}
- 77.%ico {display: inline-block;}%ico-alert{background-image: url(...);width: 24px;height: 24px;}%ico-label {margin-right: 0.3em;}.msg-error-icon {vertical-align: -0.3em;@extend %ico;@extend %ico-alert;@extend %ico-label;}
- 79.
- 80..msg-error {border: 1pxsolid #c0392b;background-color: #fe9282;}
- 82.
- 83..msg-title {font-size: inherit;font-weight:bold;}.msg-body {margin-top: 0.6em;}
- 84..msg {...}.msg-error {border:1px solid #c0392b;background-color: #fe9282;}.msg-title {font-size: inherit;font-weight: bold;}
- 85.
- 86.BEM stands for...- Block- Element- Modifier
- 87.
- 88.
- 89.
- 90..block { ...}.block__element{ ...}.block_modifier { ...}.block__element_modifier { ...}
- 91..nav { ...}.nav__item{ ...}.nav_segmented { ...}.nav__item_segmented { ...}
- 92..nav { ...}.nav__item{ ...}.nav--segmented { ...}.nav__item--segmented { ...}http://enja.studiomohawk.com/2012/03/20/about-html-semantics-and-front-end-architecture/
- 93..msg {...}.msg--error {border:1px solid #c0392b;background-color: #fe9282;}
- 94..msg__title {font-size: inherit;font-weight:bold;}.msg__body {margin-top: 0.6em;}.msg__title-icon {vertical-align: -0.3em;}
- 95.MCSS- Base- Project-cosmetichttp://operatino.github.io/MCSS/en/
- 96.inuit.css- Base- Generic-Objectshttp://inuitcss.com/
- 97.
- 99.
- 100.
- 101.
- 102.
- 103.
- 105.
- 106.
- 107.
- 108.//// # 見出し////説明文を書きます。マークダウン形式です。//// ```// <button type="button" class="btn btn-default">//``` で囲んだ部分にデモのHTMLを記述します。// </button>// ```.btn {display: inline-block;...&:hover,&:focus {color: @btn-default-color;text-decoration: none;}}
- 109.$ styledocco -n"ProjectName" css/$ styledocco -n "ProjectName" -o "mydocs"$ styledocco -n "ProjectName" --preprocessor "lessc" less/
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 124.
- 125.“どんなに多くの人が貢献したとしてもどのコードも一人で書いたようにするAll code inany code-base should look like a single persontyped it, even when many people are contributing to it.”- Idiomatic CSShttps://github.com/necolas/idiomatic-css
- 126.
- 127.Thanks.- twitter.com/hiloki- inkdesign.jp-html5experts.jp/hiloki/
- 128.