Download as PDF, PPTX
Uploaded by拓樹 谷
PDF, PPTX16,039 views
モダンなCSS設計パターンを考える
The document summarizes Hiroki Tani's presentation at the QCon Tokyo 2014 conference on modern CSS architecture. Some key points discussed include:- Adopting modular approaches like OOCSS and SMACSS to separate structure from skin/style and improve maintainability. - Using techniques like BEM naming to further decouple CSS from HTML.- Developing reusable CSS modules and components with flexible modifiers.- Maintaining styleguides and pattern libraries for consistent front-end development.
Recommended
More Related Content
What's hot
Viewers also liked
Similar to モダンなCSS設計パターンを考える
More from 拓樹 谷
Recently uploaded
![Moho Pro 14.4 Crack for MacOS Works Until 2050 [Latest] pptx](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fsoftwareoverview-251207192639-797289c4-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
![CleanMyMac X v5.2.8 Crack for MacOS Full Version [Latest] pptx](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fsoftwareoverview-251207194121-a81f0142-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
![Driver Easy Pro Key 7.1.0.2641 Full Mac Crack Free Activated Download [2026]....](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fsoftware-251207185324-b2fb71b4-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
![WinRAR Crack 7.13 Final Mac Keygen 2026 Download [Latest] Software.pptx](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fsoftware-251207185858-eb450678-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
![Wondershare Filmora 15.0.11 Crack for Mac Key Full Download [Latest] pptx](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fsoftware-251207184836-1d16ba16-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
モダンなCSS設計パターンを考える
- 1.QCon Tokyo 2014ConferenceModern CSS ArchitectureHiroki TaniモダンなCSS設計パターンを考える
- 2.
- 3.
- 7.#news h2 {border-bottom: 1px solid black; padding: 1em 0.5em; font-size: 18px; font-weight: bold;}
- 8.#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;}
- 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;}!#service .feature .title { border: 1px solid black; padding: 0.5em; font-size: 16px;}
- 10..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 a { ... }body#top .column_3 #inbox .list.left { ... }
- 11.
- 15.Goals of BetterCSS Architecture-Predictable-Reusable-Maintainable-Scalablehttp://article.enja.io/articles/css-architecture.html予測しやすい再利用しやすい保守しやすい拡張しやすい
- 16.
- 17.
- 22.OOCSS-Separate structure andskin-Separate container and content構造と見た目の分離コンテナとコンテンツの分離
- 23.
- 24.<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>
- 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..media { /*Clearfix */}.media-image { float: left; margin-right: 10px;}.media-image > img { display: block;}.media-body { overflow: hidden;}
- 28.<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>
- 29.<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>
- 30.?How to buildmodules
- 31.
- 32.
- 33.
- 34.3, 6, 9,12, 15 ...
- 35.3, 6, 12,24, 48 ...
- 36.
- 37.3, 6, 9,12, 15 ...
- 39..fontSize10 { font-size:10px}.colorRed { color: red}
- 40.
- 41.<p class="box radius10fontSize18 colorRed">入力内容に誤りがあります。</p>
- 42.
- 43..fontSize18 { font-size:18px}!@media only screen and (max-width : 320px) { .fontSize18 { font-size: 14px }}⚠
- 44.
- 45..colorRed { color:orange;}⚠
- 46..colorRed { color:orange; /* あとで直す */}⚠
- 47.
- 48.?How to maintainmodules
- 49.
- 50.SMACSS-Categorization-Naming Convention-Decoupling CSSfrom HTMLカテゴライズ命名規則HTMLとCSSの分離
- 51.
- 52./* # Base*/body, form {margin: 0;padding: 0;}a {color: #039;}a:hover {color: #03F; }
- 53./* # 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; }
- 54./* # State*/.is-hidden { display: none;}.is-error { font-weight: bold; color: red;}.is-tab-active { border-bottom-color: transparent;}
- 55./* # Theme*//* ## Spring Theme CSS */.theme-header { background-image: url("/theme/spring/header.png");}.theme-border { 1px solid pink; }
- 57.
- 58.<div class="msg"><p>...</p></div>.msg {display:block;border: 1px solid #cccccc;border-radius: 8px;padding: 1em;background-color: #efefef;color: #333333;}
- 60.<div class="msg msg-error"><p>...</p></div>.msg{...}.msg-error {border: 1px solid #c0392b;background-color: #fe9282;}
- 62.<div class="msg msg-success"><p>...</p></div>.msg{...}.msg-success {border: 1px solid #27ae60;background-color: #99f3c9;}
- 64.
- 65.<div class="msg msg-error"><h2>...</h2><p>...</p></div>.msgh2 {font-size: inherit;font-weight: bold;}!.msg p {margin-top: 0.6em;}
- 67..msg h2 {font-size:inherit;font-weight: bold;}!.msg ul,.msg p {margin-top: 0.6em;}⚠
- 68.<div class="msg msg-error"><h2class="msg-title">...</h2><ul class="msg-body"><li>...</li><li>...</li></ul></div>
- 69..msg-title {font-size: inherit;font-weight:bold;}!.msg-body {margin-top: 0.6em;}
- 70.<div class="msg msg-error"><pclass="msg-title">...</p><ul class="msg-body"><li>...</li><li>...</li></ul></div>
- 72.<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>
- 73..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;}
- 74.%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;}
- 76.!.msg-error {border: 1pxsolid #c0392b;background-color: #fe9282;}
- 78..msg-title {font-size: inherit;font-weight:bold;}.msg-body {margin-top: 0.6em;}
- 79..msg {...}.msg-error {border:1px solid #c0392b;background-color: #fe9282;}.msg-title {font-size: inherit;font-weight: bold;}
- 80.
- 81.BEM stands for...-Block-Element-Modifier
- 82.
- 83.
- 84.
- 85..block { ...}.block__element{ ...}.block_modifier { ...}.block__element_modifier { ...}
- 86..nav { ...}.nav__item{ ...}.nav_segmented { ...}.nav__item_segmented { ...}
- 87..nav { ...}.nav__item{ ...}.nav--segmented { ...}.nav__item--segmented { ...}http://enja.studiomohawk.com/2012/03/20/about-html-semantics-and-front-end-architecture/
- 88..msg {...}.msg--error {border:1px solid #c0392b;background-color: #fe9282;}
- 89..msg__title {font-size: inherit;font-weight:bold;}.msg__body {margin-top: 0.6em;}.msg__title-icon {vertical-align: -0.3em;}
- 90.
- 91.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 103.
- 104.
- 105.
- 106.//// # 見出し////説明文を書きます。マークダウン形式です。//// ```// <button type="button" class="btn btn-default">// ``` で囲んだ部分にデモのHTMLを記述します。// </button>// ```!.btn {display: inline-block;...&:hover,&:focus {color: @btn-default-color;text-decoration: none;}}
- 107.$ styledocco -n"ProjectName" css/$ styledocco -n "ProjectName" -o "mydocs"$ styledocco -n "ProjectName" --preprocessor "lessc" less/
- 108.
- 110.⚏🎬 👤👤 ⚏🎬👤BuildingPagesSystems
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.どんなに多くの人が貢献したとしてもどのコードも一人で書いたようにするhttps://github.com/necolas/idiomatic-css- Idiomatic CSSAllcode in any code-base should look like a single persontyped it, even when many people are contributing to it.“”
- 118.
- 119.Thanks.- twitter.com/hiloki- inkdesign.jp-slideshare.net/hiloki
- 120.Photo credit- http://www.flickr.com/photos/bpotstra/3490333174/sizes/l/-http://www.flickr.com/photos/bettybroadbent/3704523854/sizes/o/- http://www.flickr.com/photos/drewmaughan/8209503226/sizes/l/- http://www.flickr.com/photos/biodork/6849406792/- http://www.flickr.com/photos/43266097@N03/9444574320/sizes/l/- http://www.flickr.com/photos/90585146@N08/8234225693/sizes/l/- http://www.flickr.com/photos/lwr/6778863776/sizes/l/- http://www.flickr.com/photos/jezpage/4696962046/- http://www.flickr.com/photos/april-mo/8485249298/sizes/l/- http://www.flickr.com/photos/4st4roth/2366615948/- http://www.flickr.com/photos/sharman/4570412801/sizes/l/- http://www.flickr.com/photos/kaptainkobold/3771497484/- http://www.flickr.com/photos/laurie_pink/2549598674/sizes/l/- http://www.flickr.com/photos/dansdata/3266946102/- http://www.flickr.com/photos/ochre_jelly/6839227477/sizes/l/- http://www.flickr.com/photos/in-duce/2232109985/sizes/o/- http://www.flickr.com/photos/pgoyette/5911926699/sizes/z/- http://www.flickr.com/photos/conradoplg/10091603396/sizes/l/- http://www.flickr.com/photos/kaptainkobold/4441509147/sizes/l/