future-proof styling in drupal (8)

Future-proof styling in Drupal (8)by Tamás Hajas

There is NO One Right Way!

There is NO One Right Way!

Team

Team » Communication

Coding Standards

Drupal CSS Coding Standards https://www.drupal.org/node/1886770

CSS formatting guidelines CSS file organization (for Drupal 8) CSS architecture (for Drupal 8)

CSS formatting guidelines CSS file organization (for Drupal 8) CSS architecture (for Drupal 8)

Comment your code!

Team » Communication

“Don’t make me think!”

“code should be self-documenting”

/** * Grid container * Must only contain '.cell' children. */ .grid { height: 100%; !

font-size: 0; !

white-space: nowrap; }

/** * Grid container * Must only contain '.cell' children. */ .grid { height: 100%; /* Remove inter-cell whitespace */ font-size: 0; /* Prevent inline-block cells wrapping */ white-space: nowrap; }

Formatting tools:

CSScomb .editorconfig

CSS formatting guidelines CSS file organization (for Drupal 8) CSS architecture (for Drupal 8)

[META] Architect our CSS – http://drupal.org/node/1921610

SMACSS

See purecss.io for kind of an implementation

SMACSS structure

• Base !

!

!

SMACSS structure

• Base • Layout

!

!

!

SMACSS structure

• Base • Layout • Module

!

SMACSS structure

• Base • Layout • Module • State

SMACSS structure

• Base • Layout • Module • State • Theme

SMACSS-like

SMACSS structure

• Base • Layout • Module • State • Theme

SMACSS-like categories of Drupal 8

• Base • Layout • Component Module

• State • Theme

CSS files for Drupal 8 modules

• module_name.module.css (layout, component, state) !

CSS files for Drupal 8 modules

• module_name.module.css (layout, component, state)

• module_name.theme.css

CSS files for Drupal 8 modules

• module_name.module.css (layout, component, state)

• module_name.theme.css • module_name.admin.css

(layout, component, state)

CSS files for Drupal 8 modules

• module_name.module.css (layout, component, state)

• module_name.theme.css • module_name.admin.css

(layout, component, state) • module_name.admin.theme.css

CSS files for Drupal 8 modules

• module_name.module.css (layout, component, state)

• module_name.theme.css • module_name.admin.css

(layout, component, state) • module_name.admin.theme.css • module_name.base.css

CSS files for Drupal 8 modules

# Stylesheets override

!

!

# Remove not used stylesheets

Change record: https://drupal.org/node/1876600

stylesheets-override:

- system.theme.css

!

!

stylesheets-remove:

- node.module.css

mysubtheme.info.yml

CSS files for Drupal 8 themes

• base.css • layout.css • components.css

(components, -state, -theme)

CSS files for Drupal 8 themes

base • normalize.css • elements.css layout • layout.css • layout--rtl.css • …

components • button.css • tabs.css • … (theme) • theme--light.css • theme--dark.css

CSS files for Drupal 8 themes

base layout components shame.scss no-query.scss style.scss

Possible Sass file structure

config • _extendables.scss • _functions.scss • _mixins.scss • _variables.scss

Tip: use Sass Globbing

@import "config/**/*", "base/**/*", "layout/**/*", "components/**/*";

https://github.com/chriseppstein/sass-globbing

CSS formatting guidelines CSS file organization (for Drupal 8) CSS architecture (for Drupal 8)

Overly complex selectors

CSS pitfalls: Relying on HTML structure

div.block .title a:link { #sidebar-first & { .node-19 & {} } }

Qualified selectors

CSS pitfalls: Relying on HTML structure

div.block .title a:link { #sidebar-first & { .node-19 & {} } }

Context based selector modification

CSS pitfalls:

div.block .title a:link { #sidebar-first & { .node-19 & {} } }

Descendant selectors with too generic classnames

CSS pitfalls:

div.block .title a:link { #sidebar-first & { .node-19 & {} } }

Using ID selector for styling

CSS pitfalls:

div.block .title a:link { #sidebar-first & { .node-19 & {} } }

Using !important

CSS pitfalls:

div.block .title a:link { #sidebar-first & { .node-19 & { …!important; } } }

Keep specificity low!

body #content .data img:hover {} !!!! #content .data img :hover body 0*1000 + 1*100 + 2*10 + 2*1 = 122 0 1 2 2 » 122

Specificity example

• Base • Layout • Component

• State • Theme

SMACSS-like categories of Drupal 8

Component

UI Pattern

Module SMACSS

Object OOCSS

Block BEM

Object Oriented Programming

See @crell’s OOP intro: http://drupalwatchdog.com/volume-3/issue-1/object-oriented-programming-101

DRY

http://vicvapor.com/cracked-desert-background

Don’t Repeat Yourself!

http://vicvapor.com/cracked-desert-background

Reusable Repeatable

Component

Reusable Repeatable

Component

less lines of code

Reusable Repeatable

Component

less lines of code

more maintainable

„Class names should communicate useful information to developers.” – Nicolas Gallagher

About HTML Semantics and Front-End Architecture

.red-box {} !

.message--error {}

BEM

• Base • Layout • Component

• Block• Element• Modifier• State• Theme

John Albin: Managing complex projects with design components

<div class="flower__bed"> <div class="flower"> <div class="flower__petals"> <div class="flower__face"></div> </div> <div class="flower__stem"> <div class="flower__leaves"></div> </div> </div> </div>

John Albin: Managing complex projects with design components

Component • Block

<div class="flower__bed"> <div class="flower"> <div class="flower__petals"> <div class="flower__face"></div> </div> <div class="flower__stem"> <div class="flower__leaves"></div> </div> </div> </div>

John Albin: Managing complex projects with design components

Component • Element

<div class="flower__bed"> <div class="flower flower--tulip"> <div class="flower__petals"> <div class="flower__face"></div> </div> <div class="flower__stem"> <div class="flower__leaves"></div> </div> </div> </div>

John Albin: Managing complex projects with design components

Component • Modifier

<div class="flower__bed"> <div class="flower is-pollinating"> <div class="flower__petals"> <div class="flower__face"></div> </div> <div class="flower__stem"> <div class="flower__leaves"></div> </div> </div> </div>

John Albin: Managing complex projects with design components

Component • State

John Albin: Managing complex projects with design components

Component • State

.flover:hover {}

@media "print" { .flover {} }

John Albin: Managing complex projects with design components

Component • State

Proposal: A Style Guide for Seven

Progress bar component

CSS architecture (for Drupal 8)

Progress bar component

<div class="progress progress--small"> <label class="label label--small">Uploading sunset.jpg</label> <div class="progress__track"> <div class="progress__bar" style="width: 29%"></div> </div> <div class="progress__description"> <div class="layout-pull">Uploaded 221 of 762KB</div> <strong class="layout-push">29%</strong> </div> <a class="progress__cancel" href="#" title="cancel"> <span class="visually-hidden">cancel</span> </a> </div>

CSS architecture (for Drupal 8)

Progress bar component

/** * Progress Bar component */ .progress {} .progress__track {} .progress__bar {} .progress__description {} .progress__cancel {} .progress__cancel:focus, .progress__cancel:hover {} /** * Progress Bar small variant */ .progress--small .progress__track {} .progress--small .progress__bar {} .progress--small .progress__cancel {}

Classicitis?!

<div class="media attribution"> <a href="http://twitter.com/stubbornella" class="img"> <img src="http://stubbornella.com/profile_image.jpg" alt="me" /> </a> <div class="bd"> @Stubbornella 14 minutes ago </div> </div>

/* ====== media ====== */ .media {margin:10px;} .media, .bd {overflow:hidden; _overflow:visible; zoom:1;} .media .img {float:left; margin-right: 10px;} .media .img img{display:block;} .media .imgExt{float:right; margin-left: 10px;}

http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

%media { overflow: hidden; &:first-child { float: left; } &:last-child { overflow: hidden; } }

.status { @extend %media // ... } !.profile { @extend %media // ... }

http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css

• Base • Layout • Component

• State • Theme

SMACSS-like categories of Drupal 8

„Layouts where you put your components.” – John Ferris

https://austin2014.drupal.org/session/layout-design-patterns

There is NO One Right Way!

Tamás HajasDrupal consultant Integral Vision Ltd integralvision.hu about.me/tamashajas