Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
CSS Architecture
Ghis
June 28, 2017
Programming
1
580
CSS Architecture
Robust, flexible and scalable CSS for enterprise
Ghis
June 28, 2017
Tweet
Share
More Decks by Ghis
See All by Ghis
fatasuir9
1
21
fatasuir9
0
13
fatasuir9
0
290
fatasuir9
0
260
fatasuir9
0
3
fatasuir9
1
430
Other Decks in Programming
See All in Programming
ufoo68
1
170
mizdra
7
4.8k
aratayokoyama
0
200
azdaroth
0
120
pdone
0
210
makicamel
1
170
hr01
1
1.2k
yamotuki
0
130
loleg
0
200
manfredsteyer
PRO
0
260
takaram
1
1.2k
showwin
0
120
Featured
See All Featured
mthomps
39
2.3k
ddemaree
274
31k
lauravandoore
11
1.3k
geeforr
332
29k
scottboms
251
11k
smashingmag
283
47k
danielanewman
1
470
lara
590
61k
vanstee
116
4.8k
destraynor
146
19k
philhawksworth
192
8.8k
geoffreycrofte
18
780
Transcript
CSS Architecture Robust, flexible and scalable CSS for enterprise www.fatasuir9.com
CSS Architecture Robust, flexible and scalable CSS for enterprise www.fatasuir9.com
–Unknown “Architecture is a systematic arrangement of components”
Harry Roberts Jonathan Snook SMACSS CSSWizardry Nicole Sullivan OOCSS
CSS architects do mistakes… • Insufficient documentations • Lack of
structure • Project knowledge • Poor handoffs • New styles to the bottom of global stylesheet
SMACSS Jonathan Snook introduced the concept of structuring CSS into
various categories. They are called CSS Layers
Understanding the purpose of CSS layers adds a lot of
meaning to the styles you write;
Default layers
• Generic • Elements • Objects • Components • Utilities
• Tools • Settings • Javascript hooks
Let’s break it down
Generic The 1st layer that generates css • _generic.box-sizing •
_generic.normalize • _generic.reset • _generic.shared
html { box-sizing: border-box; }
Elements Redefining the default HTML element styles • _elements.headings •
_elements.images • _elements.page • _elements.tables
img { max-width: 100%; vertical-align: middle; }
Objects Cosmetic-free design patterns such as media object known from
OOCSS • _objects.block • _objects.box • _objects.layout • _objects.media • _objects.wrapper
.o-media { @include clearfix(); display: block; }
.o-media__img { float: left; margin-right: $global-unit; > img { display:
block; } } .o-media__body { display: block; overflow: hidden; > :last-child { margin-bottom: 0; } }
Components Project-specific UI components that contains objects and elements •
_components.bullets • _components.buttons • _components.fonts • _components.quotes
.c-btn { cursor: pointer; display: inline-block; margin: 0; padding: $global-unit-small
$global-unit; text-align: center; transition: $global-transition; }
.c-btn--primary { background: $brand-color; &:hover, &:focus { background: $brand-hover-color; }
}
Utilities Helper classes that has the ability to override css
• _utilities.clearfix • _utilities.headings • _utilities.hide • _utilities.spacing • _utilities.widths
.u-clearfix { @include clearfix(); } .u-hidden-visually { @include invisible(); }
/** * Utility classes to put spacing values onto elements.
We can generate * a suite of classes like: * * .u-margin-top * .u-padding-left-large * .u-margin-right-small * .u-padding * .u-padding-right-none */
/** * A series of width helper classes that we
can use like grid * systems. Classes can take a fraction-like format (e.g. * `.u-2/3`) or a spoken-word format (e.g. `.u-2-of-3`). * * <div class=“u-7/12"> * <div class=“u-4-of-16“> * */
Tools Pre-defined mixins and functions • _tools.functions • _tools.mixins •
_tools.responsive • _tools.widths
@mixin vendor($property, $value...){ -webkit-#{$property}:$value; -moz-#{$property}:$value; -ms-#{$property}:$value; -o-#{$property}:$value; #{$property}:$value; }
/** * A global mixin to quickly generate prefixes. *
* @include vendor(box-shadow, 0 1px 1px #000) * @include vendor(opacity, .8) * */
Settings Handled with preprocessors • _settings.config • _settings.core • _settings.global
• _settings.responsive
$global-font: sans-serif; $global-radius: 3px !default; $global-transition: (1/3) + s;
$brand-color: #f4d23e; $secondary-color: #72be49; $text-color: #000;
Javascript hooks Everything javascript related can be hooked • .js-modal-white
• .js-button-blink • .js-form-validate
I forgot to mention…
CSS architecture is NOT a framework
styleguide ≠ framework
So, what are the benefits?
• Understandable structure • Scalability at ease • Long-term maintainability
• Smoother project handoffs • Easier collaboration Benefits
Existing styleguides
itcss.io
inuitcss.com
aleutcss.github.io
CSS Guidelines by Harry Roberts https://cssguidelin.es Idiomatic CSS by Nicolas
Gallagher https://github.com/necolas/idiomatic-css Useful reads
(^(エ)^)