Downloaded 85 times
![[am-Button] {...}[am-Button~="primary"] {...}[am-Button~="large"] {...}](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fbeyond-css-architecture-150125082703-conversion-gate02%2f75%2fBeyond-CSS-Architecture-49-2048.jpg&f=jpg&w=240)
Uploaded by拓樹 谷
11,221 views
Beyond CSS Architecture
The document is a slideshow presentation about CSS architecture techniques. It discusses object-oriented CSS (OOCSS), block element modifier (BEM), CSS preprocessor extensions of BEM, responsive design patterns, style guide generators, specificity graphs, critical path CSS extraction, and the potential of web components. The presentation emphasizes building modular, reusable CSS components and establishing consistent CSS methodologies and architectures.
Recommended
More Related Content
What's hot
Viewers also liked
Similar to Beyond CSS Architecture
More from 拓樹 谷
Recently uploaded
Beyond CSS Architecture
- 1.https://www.flickr.com/photos/stn1978/8899794454/Beyond CSS ArchitectureHirokiTani, HTML5 Conference, Room B
- 2.Hiroki Tani@hiloki, FrontendDeveloper
- 4.
- 6.
- 9.
- 10.
- 11.
- 12..author { ...}.login-user { ... }Hiroki TaniKoji Ishimoto
- 13..author { ...}.login-user { ... }.comment-author { ... }
- 14..author,.login-user,.comment-author {/* 共通のスタイル*/}.author { ... }.login-user { ... }.comment-author { ... }
- 15.
- 16.
- 17..media { ...}.author { ... }.login-user { ... }Hiroki TaniKoji Ishimoto
- 18..media {overflow: hidden;/* Clearfix */margin:10px;}.media .bd {overflow:hidden;}.media .img {float:left;margin-right: 10px;}.media .img img {display:block;}.media .imgExt {float:right; margin-left: 10px;}
- 19.<div class=“media author"><aclass="img"><img /></a><div class="bd">...</div></div>
- 20.<div class="media author">...</div><divclass=“media login-user">...</div>
- 21.
- 22.
- 23.
- 24..media {overflow: hidden;margin:10px;}.media.bd {overflow:hidden;}.media .img {float:left;margin-right: 10px;}.media .img img {display:block;}.media .imgExt {float:right; margin-left: 10px;}
- 25..media {overflow: hidden;margin:10px;}.media__body{overflow:hidden;}.media__image {float:left;margin-right: 10px;}.media__image img {display:block;}.media__image_extra {float:right; margin-left: 10px;}
- 26.<div class=“media author"><aclass="img"><img /></a><div class="bd">...</div></div>
- 27.<div class=“media author"><aclass="media__image"><img /></a><div class="media__body">...</div></div>
- 28..media { /*0,0,1,0 */overflow: hidden;margin:10px;}.media__body { /* 0,0,1,0 */overflow:hidden;}.media__image { /* 0,0,1,0 */float:left;margin-right: 10px;}.media__image img { /* 0,0,1,1 */display:block;}.media__image_extra { /* 0,0,1,0 */float:right; margin-left: 10px;}
- 29.<div class="media author"><aclass="media__image author__image"><img /></a><div class="media__body">...</div></div>
- 31.“”Not all semanticsneed to be content-derived. Class names cannot be “unsemantic”.Whatever names are being used: they have meaning, they have purpose.Nicolas Gallagherhttp://nicolasgallagher.com/about-html-semantics-front-end-architecture/
- 32.
- 33.<div class="author Media"><divclass="author__image Media__image Avatar"><img src="author.jpg"></div><div class="author__body Media__body">...</div></div>
- 34.%Media {/* Mediastyles... */}%Media__image {/* Media image styles... */}%Media__body {/* Media body styles... */}%Avatar {/* Avatar styles... */}
- 35..author {@extend %Media;/*.author styles... */}.author-image {@extend %Media__image;@extend %Avatar;/* .author-image styles... */}.author-body {@extend %Media__body;/* .author-body styles... */}
- 36.<div class="author Media"><divclass="author-image Media__image Avatar"><img src="author.jpg"></div><div class="author-body Media__body">...</div></div>
- 37..login-user {@extend %Media;/*.login-user styles... */}.login-user-image {@extend %Media__image;@extend %Avatar;/* .login-user-image styles... */}.login-user-body {@extend %Media__body;/* .login-user-body styles... */}
- 38.<div class="login-user"><div class="login-user-image"><imgsrc="user.jpg"></div><p class="login-user-name">...</p></div>
- 39..author, .login-user {/* Media styles... */ }.author-image, .login-user-image { /* Media image styles... */ }.author-body, .login-user-body { /* Media body styles... */ }.author-image, .login-user-image { /* Avatar styles... */ }.author { /* .author styles... */ }.author-image { /* .author-image styles... */ }.author-body { /* .author-body styles... */ }.login-user { /* .login-user styles... */ }.login-user-image { /* .login-user-image styles... */ }.login-user-body { /* .login-user-body styles... */ }
- 40.
- 41.%Media.author .login-user {@extend.author;}
- 42.
- 43.
- 44.
- 45..mod_listType1 section,.mod_listType3 section,.mod_listType4section,.mod_listType5section,.mod_listType7 section,.mod_listType8section{margin-bottom:1em}.mod_listType1 h1,.mod_listType3h1,.mod_listType4 h1,.mod_listType5 h1,.mod_listType7 h1,.mod_listType8h1{margin:0 0 .5em .5em;font-size:15px;-webkit-text-shadow:0 1px 0rgba(255,255,255,.75);text-shadow:0 1px 0rgba(255,255,255,.75)}.mod_listType1 ul,.mod_listType3ul,.mod_listType4 ul,.mod_listType5 ul,.mod_listType7 ul,.mod_listType8ul{background-color:#fff;border:1px solid#c3c3c3;overflow:hidden;border-radius:12px}.mod_listType1 ulli,.mod_listType3 ul li,.mod_listType4 ul li,.mod_listType5 ulli,.mod_listType7 ul li,.mod_listType8 ul li{border-top:#C3C3C2 1pxsolid;margin-top:-1px;margin-bottom:1px;font-size:16px}.mod_listType1ul li:first-child a.disable,.mod_listType1 ul li:last-childa.disable,.mod_listType3 ul li:first-child a.disable,.mod_listType3 ulli:last-child a.disable,.mod_listType4 ul li:first-childa.disable,.mod_listType4 ul li:last-child a.disable,.mod_listType5 ul
- 46..mod_listType1 section,.mod_listType3 section,.mod_listType4section,.mod_listType5section,.mod_listType7 section,.mod_listType8section{margin-bottom:1em}.mod_listType1 h1,.mod_listType3h1,.mod_listType4 h1,.mod_listType5 h1,.mod_listType7 h1,.mod_listType8h1{margin:0 0 .5em .5em;font-size:15px;-webkit-text-shadow:0 1px 0rgba(255,255,255,.75);text-shadow:0 1px 0rgba(255,255,255,.75)}.mod_listType1 ul,.mod_listType3ul,.mod_listType4 ul,.mod_listType5 ul,.mod_listType7 ul,.mod_listType8ul{background-color:#fff;border:1px solid#c3c3c3;overflow:hidden;border-radius:12px}.mod_listType1 ulli,.mod_listType3 ul li,.mod_listType4 ul li,.mod_listType5 ulli,.mod_listType7 ul li,.mod_listType8 ul li{border-top:#C3C3C2 1pxsolid;margin-top:-1px;margin-bottom:1px;font-size:16px}.mod_listType1ul li:first-child a.disable,.mod_listType1 ul li:last-childa.disable,.mod_listType3 ul li:first-child a.disable,.mod_listType3 ulli:last-child a.disable,.mod_listType4 ul li:first-childa.disable,.mod_listType4 ul li:last-child a.disable,.mod_listType5 ul440kbgziped
- 47.
- 48.<!-- class --><aclass="btn btn-primary btn-lg">Large primary button</a><!-- attribute --><a am-Button="primary large">Large primary button</a>
- 49.
- 50.See also:CSS: Usingevery declaration just onceYACPhttps://developers.google.com/speed/articles/optimizing-csshttp://morishitter.hatenablog.com/entry/2014/12/02/000135http://hail2u.net/blog/webdesign/oocss-drawbacks-and-gifts-of-every-declaration-just-once.html
- 52.“”We’re not designingpages, we’re designing systems of components.Stephen Hay
- 53.
- 54.
- 55.ITCSSby Harry Robertsa.k.a. CSS Wizardlyhttps://www.flickr.com/photos/stn1978/8899794454/
- 56.
- 57.
- 58.
- 59.!"" _base.links.scss!"" _base.page.scss!""_base.quotes.scss!"" _base.type.scss!"" _components.ads.scss!"" ...!"" _components.promo.scss!"" _components.pull-quote.scss!"" _components.site-nav.scss!"" _components.sprites.scss!"" _objects.wrappers.scss!"" _settings.colors.scss!"" _settings.global.scss!"" _tools.aliases.scss!"" _tools.mixins.scss!"" _trumps.show-hide.scss!"" _trumps.widths-responsive.scss#"" csswizardry.scss
- 60./*** #SETTINGS*/@import "bower_components/inuit-defaults/settings.defaults";@import"settings.global";@import "settings.colors";@import "bower_components/inuit-responsive-settings/settings.responsive";/*** #TOOLS*/@import "bower_components/inuit-functions/tools.functions";@import "bower_components/inuit-mixins/tools.mixins";@import "tools.mixins";@import "bower_components/inuit-responsive-tools/tools.responsive";@import "tools.aliases";/*** #GENERIC*/@import "bower_components/inuit-normalize/generic.normalize";@import "bower_components/inuit-reset/generic.reset";@import "bower_components/inuit-box-sizing/generic.box-sizing";@import "bower_components/inuit-shared/generic.shared";
- 63.http://bradfrost.com/See also:Atomic DesignFUNCSShttp://bradfrost.com/blog/post/atomic-web-design/http://benfrain.com/fun-css-naming-convention-explained/
- 65.
- 66.
- 67.
- 69.
- 70.
- 71.
- 72./*doc---title: Buttonsname: buttoncategory:Base CSS---Button styles can be applied to any element. Typically you'llwant touse either a `<button>` or an `<a>` element:```html_example<button class="btn btnDefault">Click</button><a class="btn btnPrimary" href="http://trulia.com">Trulia!</a>```*/
- 73./*doc---title: Buttonsname: buttoncategory:Base CSS---Button styles can be applied to any element. Typically you'llwant touse either a `<button>` or an `<a>` element:```html_example<button class="btn btnDefault">Click</button><a class="btn btnPrimary" href="http://trulia.com">Trulia!</a>```*/
- 74.
- 75.
- 76.
- 77.
- 78.SpecificityLocation in Stylesheetul{margin: 0;}
- 79.SpecificityLocation in Stylesheet.item{border: 1px solid #999;}
- 80.SpecificityLocation in Stylesheet.item.selected{background: #eee;}
- 81.SpecificityLocation in Stylesheet.heading{font-size: 24px;}
- 82.SpecificityLocation in Stylesheet#feature{background: #FC0;}
- 83.SpecificityLocation in Stylesheet#feature.heading {color: #000;}
- 84.
- 89.See also:Specificity graphCSSspecificity graphshttp://snook.ca/archives/html_and_css/specificity-graphshttps://decadecity.net/blog/2014/11/26/css-specificity-graphs
- 90.
- 91.
- 92.
- 93.
- 95.
- 96.
- 98.
- 100.
- 103.
- 104.
- 105.
- 107.
- 108.“ ”Every lineof CSS you write is a suggestion.Jeremy Keithhttps://adactio.com/journal/7653
- 109.