Movatterモバイル変換

CSS ArchitectureWriting maintainable CSSAlexei Skachykhin – Software EngineeriTechArt, 2015

“Writing CSS is easy. Scaling CSSand keeping it maintainable is not.”Ben Frain

Guess what makesit hard to maintain

“I don’t understand the cultural fascination withfailure being the source of great lessons to belearned. You might know what won’t work, but youstill don’t know what will work.”BasecampExcerpt from “Rework”

What’s missing?CSS that works to spec isn’t enough, itshould be considered as a baseline

We need a plan to keep CSS styles organized.We call such plan an architecture

Growing Complexity7,046Rules10KSelectors16,8KDeclarations90Unique Colors

Growing Complexity3,938Rules5,164Selectors9,826Declarations46Unique Colors

Repetitive Design“We’re not designing pages,we’re designing systems of components.”Stephen Hay

Technical Difficulties Source order affects application order Specificity is hard to deal with CSS operate in global scope Permissive by its nature

1. Evolving Design2. Growing Complexity3. Repetitive Design4. Technical Difficulties

It is time to follow architectureand cleanup our CSS

Building BlocksUI consists of components, wherecomponent is any distinguishable elementof the design

Building BlocksWriting CSS is not about making HTMLelements look like provided PSD, buttranslating system of components into Webcompatible format

.contact-item {float: left;font-size: 28px;.contact-item .contact-item__info {margin-top: 4px;margin-left: 20px;padding-left: 31px;}.contact-item .contact-item__title {margin: 0;font-family: 'Lato', sans-serif;font-size: 16px;font-weight: bold;}.contact-item .contact-item__text {margin: 1px 0 14px;font-size: 14px;}}.subscribe {.clearfix();.field-group {.clearfix();}.sign-up-button {.secondary-button;.variant-action;display: block;border: none;}ul {margin: 5px;li {display: inline-block;}}}COMPONENT STYLED HTML

Design and markup are inseparable.Designers and Front-End Engineers must speakubiquitous language to succeed.

CSS ArchitectureComponents &Other StylesDependencyManagementPhysical Structure &Deployment

Goals of ArchitecturePredictable ReusableMaintainable Scalable

Goals of ArchitecturePredictable ReusableMaintainable ScalableMinimalComplexity

“Everyone else in the W3C CSS Working Group, thegroup which defines the future of CSS, fits the profileof a developer much more than that of a designer.”Lea Verou

Existing Solutions BEM OOCSS SMACSS Atomic CSS MCSS ITCSS

#1 DOM IndependencyCSS component styles must not rely onparticular DOM structure

Examplediv.social-links {> div a {color: blue;}} Visual styles are tightly coupled withmarkup which makes them hard toevolve Reusability of component is limited Ambiguity that leads to growth ofspecificity

RuleAvoid any signs of DOM elements in CSScode including references to HTML tags, ID(#) and (>) child selectors

RuleCSS selectors must convey semantics of thecomponent and it’s integral parts. Classselector conveys a lot, element selectoralmost none

Example.social-links {.social-links__item {color: blue;}}

#2 Location IndependencyCSS component styles must not rely oncomponent’s location on a page

Example.button {color: white;}.sidebar {.button {color: orange;}} Component is no longer self containedentity and its visual appearance is notpredictable at dev time Leads to growth of specificity

RuleComponent styles must not be written inreliance on their location on a page, insteadprovide location independent variations thatcan be used anywhere

“Instead of saying - The buttons need to be smallerwhen they’re in the header, we need to be saying - Wehave a smaller variant of our buttons, and it’s these thatwe use in the header.”Harry Roberts

.button {color: white;/* Other declarations */&.button--variant-action {color: orange;}}Example

#3 Limited ComplexityCSS components can be complex and haveintegral parts, but no more than having 1 (2)layers of descendant styles

Example.filter {.filter__header {.filter__header__icon {/* Declarations */}}.filter__list {.filter__list__link {/* Declarations */}}} Component is too complex whichmakes it hard to maintain Following that style may lead tounnecessary dependencies betweenintegral parts

RuleIf CSS styles have no dependency they mustnot form parent-child relationship

RuleComplex components must be split intosimpler components

.filter {.filter__header {}.filter__icon {/* Declarations */}.filter__list {}.filter__link {/* Declarations */}}Example

#4 Enforced NamingAll aspects of component definition must be named in away to communicate their relationship clearly andprotect from incorrect use

.infobox /* Block */ {.infobox__body /* Element */ {}.infobox__footer {}.infobox__title {}&.infobox--size-full /* Modifier */ {}}Example

#5 Explicit StatesDynamic behavior must be implemented with stateclasses that JavaScript toggles. No direct stylemanipulation is allowed with JavaScript.

open: function () {elements.root.show();elements.trigger.css('color', 'blue');},close: function () {elements.root.hide();elements.trigger.css('color', 'white');}Example Visual appearance of component isnow split across JavaScript and CSSwhich makes is hard to maintain There is no simple undo operationfor setting style properties inJavaScript so previous state has tobe maintained somewhere or inlinestyles manipulated directly

open: function () {elements.root.addClass('state-open');elements.trigger.addClass('state-active');},close: function () {elements.root.removeClass('state-open');elements.trigger.removeClass('state-active');}Example

RuleGlobal states must not collide with localstates to avoid overrides in CSS

.state-hidden {display: none;}.infobox {display: inline-block;&.state-hidden {display: inline-block;visibility: hidden;}}Example Component is no longer self containedwhich causes inclusion of overridedeclarations In some cases may lead to a need tohave !importants

.global-state-hidden {display: none;}.infobox {display: inline-block;&.state-hidden {visibility: hidden;}}Example

#6 JavaScript HooksNever use component classes to select elements withJavaScript. Introduce specialized classes just for thesake of selecting elements.

Examplevar elements = {mailing_list: internal.$e,form: internal.$e.find('.social-widget__query'),submit_button: internal.$e.find('.button'),submit_button_text: internal.$e.find('span'),validation_message: internal.$e.find('.social-widget__validation-message')}; Hard to modify component styles due to dependencies inJavaScript. Makes whole component fragile

Example<div class="social-widget social-widget--inversed js-mailing-list"><div class="social-widget__title">Stay in the loop</div><form class="social-widget__query js-mailing-list-form"><input class="js-mailing-list-email" type="text" name="email" placeholder="Email address"><label class="button"><span class="js-mailing-list-submit-button-text">Submit</span><input class="js-mailing-list-submit-button" type="submit"></label></form><div class="js-mailing-list-validation-message social-widget__validation-message state-hidden">Email is not in correct format!</div></div>

#7 Local Media QueriesResponsiveness of a page must be based onresponsiveness of each component thus Media Querymust be local to a component

.blog-entry {.blog-entry-body {/* Declarations */}}.infobox {}@media @phone {.blog-entry {.blog-entry-body {/* Declarations */}}.infobox {}}Example Code duplication makes componentshard to maintain Components are not self-containedwhich makes the outcome lesspredictable at dev time

.blog-entry {.blog-entry-body {margin-right: @gutter / 2;margin-bottom: @gutter / 2;margin-left: @gutter / 2;@media @phone {margin-left: @gutter_phone / 2;margin-right: @gutter_phone / 2;}}}Example

.infobox /* Component */ {.infobox__body /* Integral Part */ {}&.infobox--size-full /* Variant */ {}&.state-active /* State */ {}@media @phone /* Responsive */ {}}.js-infobox /* JavaScript Hook */Anatomy of Component

#8 Layout vs VisualLayout aspects should be moved to dedicatedcomponents or integral parts

.infobox {/* Layout */float: left;padding-left: @half-col-gutter;padding-right: @half-col-gutter;width: 33.33%;/* Visual */background-color: green;padding: 10px; /* Collision */}Example Limits reusability Usually require additional htmlelements just as styling hooks

Grid based layout is an emerging trend in Web andGraphics design

.grid-row {.clearfix();.grid-row__column {float: left;padding-left: @half-col-gutter;padding-right: @half-col-gutter;width: 33.33%;}}.infobox {background-color: green;padding: 10px;}Example

#9 Container vs ContentContainer components must define layout and sizeconstraints, content components – visual look(occasionally size constraints too)

RuleDon’t make any assumptions about contenton container level

RuleDevelop CSS components to be containeragnostic

Types of StylesBase(Normalize, Reset)Utilities(clearfix, valign)Typography(Fonts, Headings, …)Constants(Colors, Sizes, …)

Physical Structure &Deployment

Physical StructureSingle file forall of the stylesSingle file withcommentsOne file pertype of stylesOne file percomponent

Fallacies Use id selectors for performance reasons Too many classes is a bad thing, style based on tags Nest CSS selectors to follow DOM hierarchy Put all styles into single file all the time because it iseasier to maintain Introduce lots of utility classes to have greater flexibilitywhen styling things

Thank you!Forward your questions toalexei.skachykhin@live.com

Movatterモバイル変換

Change Language

CSS Architecture: Writing Maintainable CSS

Embed presentation

Recommended

More Related Content

What's hot

Viewers also liked

Similar to CSS Architecture: Writing Maintainable CSS

More from Alexei Skachykhin

Recently uploaded

CSS Architecture: Writing Maintainable CSS

Editor's Notes