Mais conteúdo relacionado
Semelhante a モダンなCSS設計パターンを考える (20)
モダンなCSS設計パターンを考える
- 1. QCon Tokyo 2014 Conference
Modern CSS Architecture
Hiroki Tani
モダンなCSS設計パターンを考える
- 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 { ... }
- 15. Goals of Better CSS Architecture
-Predictable
-Reusable
-Maintainable
-Scalable
http://article.enja.io/articles/css-architecture.html
予測しやすい
再利用しやすい
保守しやすい
拡張しやすい
- 24. <div class="media">
<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>
- 25. <div class="media">
<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>
- 26. <div class="media">
<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>
- 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>
- 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;
}
- 72. <div class="msg msg-error">
<h2 class="msg-title">
<i class="msg-title-icon ico ico-label ico-alert"></i>
...
</h2>
<ul class="msg-body">
<li>...</li>
<li>...</li>
</ul>
</div>
- 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;
}
- 87. .nav {
...
}
.nav__item {
...
}
.nav--segmented {
...
}
.nav__item--segmented {
...
}
http://enja.studiomohawk.com/2012/03/20/about-html-semantics-and-front-end-architecture/
- 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/
- 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/