Slide 1
Slide 1 text
Future-proof styling
in Drupal (8)
by Tamás Hajas
Slide 2
Slide 2 text
There is NO
One Right Way!
Slide 3
Slide 3 text
There is NO
One Right Way!
Slide 4
Slide 4 text
Team
Slide 5
Slide 5 text
Team » Communication
Slide 6
Slide 6 text
Coding Standards
Slide 7
Slide 7 text
Drupal
CSS Coding Standards
https://www.drupal.org/node/1886770
Slide 8
Slide 8 text
CSS formatting guidelines
CSS file organization (for Drupal 8)
CSS architecture (for Drupal 8)
Slide 9
Slide 9 text
CSS formatting guidelines
CSS file organization (for Drupal 8)
CSS architecture (for Drupal 8)
Slide 10
Slide 10 text
Comment your code!
Slide 11
Slide 11 text
Team » Communication
Slide 12
Slide 12 text
“Don’t make me think!”
Slide 13
Slide 13 text
“code should be
self-documenting”
Slide 14
Slide 14 text
/**
* Grid container
* Must only contain '.cell' children.
*/
.grid {
height: 100%;
!
font-size: 0;
!
white-space: nowrap;
}
Slide 15
Slide 15 text
/**
* 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;
}
Slide 16
Slide 16 text
Formatting tools:
CSScomb
.editorconfig
Slide 17
Slide 17 text
CSS formatting guidelines
CSS file organization (for Drupal 8)
CSS architecture (for Drupal 8)
[META] Architect our CSS – http://drupal.org/node/1921610
Slide 18
Slide 18 text
SMACSS
See purecss.io for kind of an implementation
Slide 19
Slide 19 text
SMACSS structure
• Base
!
!
!
Slide 20
Slide 20 text
SMACSS structure
• Base
• Layout
!
!
!
Slide 21
Slide 21 text
SMACSS structure
• Base
• Layout
• Module
!
Slide 22
Slide 22 text
SMACSS structure
• Base
• Layout
• Module
• State
Slide 23
Slide 23 text
SMACSS structure
• Base
• Layout
• Module
• State
• Theme
Slide 24
Slide 24 text
SMACSS-like
Slide 25
Slide 25 text
SMACSS structure
• Base
• Layout
• Module
• State
• Theme
Slide 26
Slide 26 text
SMACSS-like categories of Drupal 8
• Base
• Layout
• Component Module
• State
• Theme
Slide 27
Slide 27 text
CSS files for Drupal 8
modules
Slide 28
Slide 28 text
• module_name.module.css
(layout, component, state)
!
CSS files for Drupal 8 modules
Slide 29
Slide 29 text
• module_name.module.css
(layout, component, state)
• module_name.theme.css
CSS files for Drupal 8 modules
Slide 30
Slide 30 text
• module_name.module.css
(layout, component, state)
• module_name.theme.css
• module_name.admin.css
(layout, component, state)
CSS files for Drupal 8 modules
Slide 31
Slide 31 text
• 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
Slide 32
Slide 32 text
• 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
Slide 33
Slide 33 text
# 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
Slide 34
Slide 34 text
CSS files for Drupal 8
themes
Slide 35
Slide 35 text
• base.css
• layout.css
• components.css
(components, -state, -theme)
CSS files for Drupal 8 themes
Slide 36
Slide 36 text
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
Slide 37
Slide 37 text
base
layout
components
shame.scss
no-query.scss
style.scss
Possible Sass file structure
config
• _extendables.scss
• _functions.scss
• _mixins.scss
• _variables.scss
Slide 38
Slide 38 text
Tip: use Sass Globbing
@import
"config/**/*",
"base/**/*",
"layout/**/*",
"components/**/*";
https://github.com/chriseppstein/sass-globbing
Slide 39
Slide 39 text
CSS formatting guidelines
CSS file organization (for Drupal 8)
CSS architecture (for Drupal 8)
Slide 40
Slide 40 text
Overly
complex
selectors
CSS pitfalls:
Relying on HTML structure
div.block .title a:link {
#sidebar-first & {
.node-19 & {}
}
}
Slide 41
Slide 41 text
Qualified
selectors
CSS pitfalls:
Relying on HTML structure
div.block .title a:link {
#sidebar-first & {
.node-19 & {}
}
}
Slide 42
Slide 42 text
Context
based
selector
modification
CSS pitfalls:
div.block .title a:link {
#sidebar-first & {
.node-19 & {}
}
}
Slide 43
Slide 43 text
Descendant
selectors
with too
generic
classnames
CSS pitfalls:
div.block .title a:link {
#sidebar-first & {
.node-19 & {}
}
}
Slide 44
Slide 44 text
Using ID
selector
for styling
CSS pitfalls:
div.block .title a:link {
#sidebar-first & {
.node-19 & {}
}
}
Slide 45
Slide 45 text
Using
!important
CSS pitfalls:
div.block .title a:link {
#sidebar-first & {
.node-19 & {
…!important;
}
}
}
Slide 46
Slide 46 text
Keep specificity low!
Slide 47
Slide 47 text
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
Slide 48
Slide 48 text
• Base
• Layout
• Component
• State
• Theme
SMACSS-like categories of Drupal 8
Slide 49
Slide 49 text
Component
UI Pattern
Module
SMACSS
Object
OOCSS
Block
BEM
Slide 50
Slide 50 text
Object Oriented
Programming
See @crell’s OOP intro: http://drupalwatchdog.com/volume-3/issue-1/object-oriented-programming-101
Slide 51
Slide 51 text
DRY
http://vicvapor.com/cracked-desert-background
Slide 52
Slide 52 text
Don’t Repeat Yourself!
http://vicvapor.com/cracked-desert-background
Slide 53
Slide 53 text
Reusable
Repeatable
Component
Slide 54
Slide 54 text
Reusable
Repeatable
Component
less lines
of code
Slide 55
Slide 55 text
Reusable
Repeatable
Component
less lines
of code
more
maintainable
Slide 56
Slide 56 text
„Class names should communicate
useful information to developers.”
– Nicolas Gallagher
About HTML Semantics and Front-End Architecture
Slide 57
Slide 57 text
.red-box {}
!
.message--error {}
Slide 58
Slide 58 text
BEM
Slide 59
Slide 59 text
• Base
• Layout
• Component
• Block
• Element
• Modifier
• State
• Theme
John Albin: Managing complex projects with design components
Slide 60
Slide 60 text
Slide 61
Slide 61 text
Slide 62
Slide 62 text
Slide 63
Slide 63 text
Slide 64
Slide 64 text
John Albin: Managing complex projects with design components
Component
• State
.flover:hover {}
Slide 65
Slide 65 text
@media "print" {
.flover {}
}
John Albin: Managing complex projects with design components
Component
• State
Slide 66
Slide 66 text
Proposal: A Style Guide for Seven
Progress bar component
Slide 67
Slide 67 text
CSS architecture (for Drupal 8)
Progress bar component
Slide 68
Slide 68 text
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 {}
Slide 69
Slide 69 text
Classicitis?!
Slide 70
Slide 70 text
@Stubbornella 14 minutes ago
Slide 71
Slide 71 text
%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
Slide 72
Slide 72 text
• Base
• Layout
• Component
• State
• Theme
SMACSS-like categories of Drupal 8
Slide 73
Slide 73 text
„Layouts where you put your
components.”
– John Ferris
https://austin2014.drupal.org/session/layout-design-patterns
Slide 74
Slide 74 text
There is NO
One Right Way!
Slide 75
Slide 75 text
Tamás Hajas
Drupal consultant
Integral Vision Ltd
integralvision.hu
about.me/tamashajas