Slides for a talk on modular Sass I gave at BlendConf, September 2013.
Articles about Modular CSS: http://thesassway.com/modular-css CodePen examples here: http://codepen.io/collection/lmkqe BlendConf: http://blendconf.com
SASS!!DefensiveModular styles forthe modern web@johnwlong • BlendConf 2013
View Slide
Help & Feedbackhttp://uservoice.com/touchpoint-toolkit
TheSassWayLatest news on Sass + Compass@
SMACSSsmacss.comBEMbem.infoOOCSSoocss.org
MODULAR CSSAn example
Simple Menu
ul.menubar {background: white;@include box-shadow(rgba(black, 0.2) 0 1list-style: none;font-size: 14px;padding: 0 10px;> li {display: inline-block;position: relative;> a {color: black;display: block;padding: 10px 14px;text-decoration: none;&:hover {background: #29a7f5;color: white;}}> ul {@include box-shadow(rgba(black, 0.5)@include border-radius(3px);@include border-top-left-radius(0);display: none;position: absolute;FileOpenSaveSave as...CloseExit...http://bit.ly/menu-1 1
FileOpenSaveSave as...CloseExit....menubar {background: white;@include box-shadow(rgba(black, 0.2) 0 1list-style: none;font-size: 14px;padding: 0 10px;> li {display: inline-block;position: relative;}}.menubar-item {color: black;display: block;padding: 10px 14px;text-decoration: none;&:hover {background: #29a7f5;color: white;}}.menu {@include box-shadow(rgba(black, 0.5) 0 5@include border-radius(3px);@include border-top-left-radius(0);2http://bit.ly/menu-2
FileOpenSaveSave as...CloseExit....menubar {background: white;@include box-shadow(rgba(black, 0.2) 0 1list-style: none;font-size: 14px;padding: 0 10px;}.menubar-item {display: inline-block;position: relative;}.menubar-item-target {color: black;display: block;padding: 10px 14px;text-decoration: none;&:hover {background: #29a7f5;color: white;}}3http://bit.ly/menu-3
Learn to think in objects.Not selectors.
Parent-ChildParent .tableviewChild .tableview-itemGrandchild .tableview-item-cell
TableView
General...http://bit.ly/modular-tableview
...Wi-FiJohn's Airport...http://bit.ly/modular-tableview
Airplane ModeOnOff...http://bit.ly/modular-tableview
Plural-Parent PatternParent .faqsChild .faqGrandchild .faq-title
Use the parent-child pattern:(Don’t enforce it.)Declare hierarchy.
SubclassingObject.button.itemSubclass.dropdown-button.ticket-itemChild .ticket-title
.button { ... }.next-button { ... }.previous-button { ... }.dropdown-button { ... }.select-button { ... }ButtonBackNextDropdownSelecthttp://bit.ly/modular-subclassingButtons
Subclassing with @extend.button { ... }.dropdown-button { @extend .button; }....button { ... }.dropdown-button { ... }...Standard CSSExtendingTwo classesOne class
Use subclasses to declareinheritance.(An object should have the properties of another.)
Object .itemContextual.ticket .item.article .itemChild.item .title.ticket .item .titleContextual
.item { ... }.ticket .item { ... }.ticket .item .title { ... }...Contextual
.item .item.ticket-item.article-item.ticket .item.article .item.item-title.ticket-item-title.item .title.ticket .item .titleSubclassing vs. Contextual
Much more modular.Require structuredmarkup.(Can be useful fortheming)Subclassing vs. Contextual
Structural requirements on markup(At all costs. With a few exceptions.)should be avoided.
ModifiersPositive .has-menuNegative .no-border, .no-marginState .is-selected, .is-activeOther .primary, .secondary
Generic Modifiers.is-selected { background: $highlight-color; }.is-hidden { display: none !important; }.float-left { float: left !important; }.float-right { float: right !important; }.mt0 { margin-top: 0 !important; }.ml0 { margin-left: 0 !important; }.ma0 { margin: 0 !important; }.clearfix { @include clearfix; } Important!
Specific Modifiers.button {&:hover { ... }&.primary { ... }&.secondary { ... }&.small { ... }&.large { ... }&.is-disabled, &[disabled] { ... }}Use nesting &the ampersandoperator
Use modifiers to(Or state.)Change attributes!
Modifiers vs. SubclassesBetter for small clearlydefined changes.Better for major changesor to declare type-ofsemantics.
Naming conventionsObject.tableview.ticket.nounChild.tableview-item.ticket-title.noun-nounSubclass.multiselect-tableview.priority-ticket.adjective-nounModifier.is-selected.scrollable.prefix-adjectiveor .adjective
ModularTypography
Modular Typographyhttp://bit.ly/modular-typography
.h1, .h2, .h3, .h4, .h5, .h6 { ... }.text-left { text-align: left !important; }.text-center { text-align: center !important; }.text-right { text-align: right !important; }.quiet { color: $quiet-color !important; }.loud { color: $loud-color !important; }.fixed { font-family: $fixed-font-family; }http://bit.ly/modular-typographyModular Typography
.typeset {h1 { @extend .h1; margin: 1em 0 0.5em; }h2 { @extend .h2; margin: 1em 0 0.5em; }h3 { @extend .h3; margin: 1em 0 0.5em; }p, ul, ol, pre { margin: 1em 0; }ul { list-style: disc; ... }pre, code { @extend .fixed; }...}http://bit.ly/modular-typographyModular Typography
(Use modifiers for one-offs.)Scope typographywith a single class.
Reset
It’s easy@import “compass”;@include global-reset;
Reset vs. NormalizeZeros out styles on allelements.Normalizes styles acrossbrowsers so that allbrowsers share a similarstylesheet.
markup independence.A global reset gives true(And is therefore best, IMHO.)
What about SASS?
MODULAR SASSWell writtenis just good CSS.
Structuring a Sass projecthttp://bit.ly/structure-a-sass-projectpartials/|-- _alerts.scss # Pluralize partials.|-- _buttons.scss|-- _checkboxes.scss # Include: object,|-- _choices.scss # subclasses, & modifiers|-- _countdowns.scss|-- _forms.scss|-- _icons.scss...
Closing Thoughts
IDs or tags.Don’t style with(Simple class-based selectors are better.)
Contextual styles are(Avoid nesting like the plague.)mostly evil!!
MoarRR markup.(Turns out it’s much easier to maintain.)Less styles and
MinimizingDependencies.Modularity is mostly about(For reusable code.)
SMACSSsmacss.comBEMbem.infoOOCSSoocss.orgTheSassWay@thesassway.com
Thanks!http://codepen.io/collection/lmkqehttp://bit.ly/defensive-sass-sept-2013Modular CSS examples:Presentation: