The document discusses managing complex projects in front-end web development, emphasizing the importance of agile methods, component-based design, and automated style guides. It critiques common issues like CSS specificity wars and promotes best practices for class naming and design component organization. Additionally, it introduces several tools and frameworks useful for enhancing development efficiency and project management.

1. MANAGING COMPLEX PROJECTS
WITH DESIGN COMPONENTS
J O H N A L B I N W I L K I N S
F R O N T - E N D T R A C K — O C T O B E R 1 , 2 0 1 4

2. @JOHNALBIN
Senior Front-end Developer

3. FREE GIFTS FROM ME
Zen Grids
zengrids.com
!
Normalize.css for Sass/Compass
github.com/JohnAlbin/normalize-scss
Succinct theme for Colloquy (IRC for Mac)
github.com/JohnAlbin/succinct-for-colloquy
git-svn-migrate
john.albin.net/git/git-svn-migrate
Zen theme for Drupal
drupal.org/project/zen

4. TRIGGER ALERT
This session will mention the word:
AGILE

5. WHERE ARE WE HEADED?

6. “ARE YOU NEW TO
FRONT-END WEB DEVELOPMENT?
HERE’S A SECRET:
NO ONE ELSE REALLY KNOWS
WHAT THEY’RE DOING EITHER.”
– N I C O L A S G A L L AG H E R
January, 2013

7. WHAT THE HELL IS GOING ON?
Process Technology

8. IS THERE A BIGGER PICTURE?
Vagrant Twig / Handlerbars
Grunt/Gulp
task runner
Jenkins / CI
build tools
npm shrinkwrap / Bundler
Web Components
CSS frameworks
Bootstrap / Foundation
CSS/JS linting
Yeoman / Bower!
scaffolding tools
Behat / Selenium
regression testing
Sass / Less

9. IS THERE A BIGGER PICTURE?
Vagrant Twig / Handlerbars
Grunt/Gulp
task runner
Component
Jenkins / CI
build tools
npm shrinkwrap / Bundler
Travis
Web Components
CSS frameworks
Bootstrap / Foundation
CSS/JS linting
Yeoman / Bower!
scaffolding tools
Behat / Selenium
regression testing
Sass / Less
YSlow
PageSpeed
Cucumber
KSS Wraith
Web Starter Kit
CSSLoad
Node.js

10. IS THERE A BIGGER PICTURE?
Continuous
Integration
Component
Library

11. IS THERE A BIGGER PICTURE?
Continuous
Integration
Component
Library
are documented by!
style guides
Agile Development!
requires

12. WATERFALL PROJECT
Plan
Design
Develop
Theme
Start Deadline

13. WATERFALL PROJECT
Plan
:
Design
:
Develop
:
Theme
Today
:
Start Deadline

14. Agile development

15. Reduce your risk
by controlling/minimizing your risk

16. AGILE PROJECT
Feature backlog
Feature #1
Feature #2
Feature #3
Feature #4
Feature #5
Feature #6
Feature #7
Feature #8
Feature #9
Feature #10
Start
Deadline
Sprint Sprint Sprint Sprint Sprint Sprint Sprint

17. AGILE PROJECT
Each 2-week sprint:
• Prioritizes project goals
• Completes a set of features
• Creates a releasable product
Feature backlog
Feature #1
Feature #2
Feature #3
Feature #4
Feature #5
Feature #6
Feature #7
Feature #8
Feature #9
Feature #10
Start
Deadline
Sprint Sprint Sprint Sprint Sprint Sprint Sprint

18. AGILE + WEB = ?
Component-based design
+
Automated style guides

19. STYLEGUIDE-DRIVEN DEVELOPMENT:
THE NEW WEB DEVELOPMENT
J O H N A L B I N W I L K I N S
F R O N T - E N D T R A C K — O C T O B E R 1 , 2 0 1 4

20. STYLE GUIDE DRIVEN DEVELOPMENT
Only requirements are:
Component-based design
and
Automated style guides

21. What are we doing
wrong?

22. CSS SPECIFICITY
WARS

23. CSS SPECIFICITY
WARS
.menu .item a:link {}!
.sidebar .menu .item a:link {}!
.page-37 .sidebar .menu .item a:link {}

24. CSS SPECIFICITY
WARS
.menu .item a:link {!
.sidebar & {!
.page-37 & {}!
}!
}

25. OVERLY GENERIC CLASS NAMES
.title&{&}
.block&.title&{&}
.node&.title&{&}
.views&.title&{&}
.content&{&}
.block&.content&{&}
.node&.content&{&}
.views&.content&{&}

26. SEEMED LIKE A GOOD IDEA
AT THE TIME

27. WHAT IS A DESIGN COMPONENT?
“Component” is the same as…
⨯ “Object” in OOCSS
⨯ “Module” in SMACSS
⨯ “Block” in BEM’s Block-Element-Modifier
⨯ “UI Pattern”

28. CSS DESI GN COMPONENTS ARE:
⨯ Applied to a loose collection of HTML elements
⨯ Repeatable
(even if never repeated)
⨯ Specific
Replace CSS specificity with specific names
⨯ Self contained
Styles do not bleed onto anything else
⨯ Nest-able

31. SMACSS
1.BASE
2.LAYOUT
3.MODULE
4.STATE
5.THEME

32. SMACSS
1.BASE
2.LAYOUT
3.COMPONENTS
4.STATE
5.SKIN
1.BASE
2.LAYOUT
3.MODULE
4.STATE
5.THEME

33. SMACSS
1.BASE
2.LAYOUT
3.COMPONENTS
4.STATE
5.SKIN

34. SMACSS
1.BASE
2.LAYOUT
3.COMPONENTS
3.1.STATE
3.2.SKIN

35. SMACSS
BEM
}
1.BASE
2.LAYOUT
3.COMPONENTS
3.1.COMPONENT
3.2.ELEMENT
3.3.MODIFIER
3.4.STATE
3.5.SKIN

36. “You see, radio is a kind
of a very, very long . cat.

37. You pull his tail in New
York and his head is
meowing in Los Angeles.

38. Do you understand this?
You send signals here, they
receive them there. The
only difference is that…

39. …there is no cat.”
— Albert Einstein

40. .flower
!
3.1.COMPONENT
3.2.ELEMENT
3.3.MODIFI ER
3.4.STATE
3.5.SKIN

41. .flower_ _ petals
!
3.1.COMPONENT
3.2.ELEMENT
3.3.MODIFI ER
3.4.STATE
3.5.SKIN

42. .flower_ _face .flower_ _stem
.flower_ _leaves

43. .flower_ _ bed
!
3.1.COMPONENT
3.2.ELEMENT
3.3.MODIFI ER
3.4.STATE
3.5.SKIN

44. .flower--tulip
!
3.1.COMPONENT
3.2.ELEMENT
3.3.MODIFI ER
3.4.STATE
3.5.SKIN

45. Don’t make it complicated
.channel-tab_ _guide_ _upcoming-

46. Don’t make it complicated
guide_ _upcoming-video_ _info_ _time

47. On semantic naming
⨯ Content semantics
are handled by HTML5 elements
⨯ Let’s make our class names use
Design semantics
⨯ Class names should be meaningful to
developers and designers

48. .flower:hover
!
3.1.COMPONENT
3.2.ELEMENT
3.3.MODIFIER
3.4.STATE
3.5.SKIN

49. .flower.is-pollinating
!
3.1.COMPONENT
3.2.ELEMENT
3.3.MODIFIER
3.4.STATE
3.5.SKIN

50. @media (min-width: 48em) { .flower }
!
3.1.COMPONENT
3.2.ELEMENT
3.3.MODIFIER
3.4.STATE
3.5.SKIN

51. @media print { .flower }
!
3.1.COMPONENT
3.2.ELEMENT
3.3.MODIFIER
3.4.STATE
3.5.SKIN

52. .is-night .flower
!
3.1.COMPONENT
3.2.ELEMENT
3.3.MODIFIER
3.4.STATE
3.5.SKIN ( global modfier )

53. .flower
An automated
style guide of
.flower is available:
!
johnalbin.github.io/flower-power

54. All the selectors
.the3component&
.the3component33modifier&
.the3component__an3element&
.the3component33modifier__an3element&
.the3component.is3state&
& .the3component:hover&
& @media&all&{&.the3component&{}&}&
.the3skin&.the3component

55. CSS DESI GN COMPONENTS ARE:
⨯ Applied to a loose collection of HTML elements
⨯ Repeatable
(even if never repeated)
⨯ Specific
Replace CSS specificity with specific names
⨯ Self contained
Styles do not bleed onto anything else
⨯ Nest-able

56. SMACSS
BEM
}
1.BASE
2.LAYOUT
3.COMPONENTS
3.1.COMPONENT
3.2.ELEMENT
3.3.MODIFIER
3.4.STATE
3.5.SKIN

57. Drupal 8 CSS coding standards
www.drupal.org/node/1886770

58. FILE ORGANIZATION = 3 SMACSS CATEGORIES

59. SIMPLE SASS SETUP

60. STYLES.SCSS

61. SIMPLE FOLDER STRUCTURE

62. EASY TO FIND YOUR COMPONENTS.
⨯ Inspect the DOM.
⨯ Find the CSS class on the
component.
⨯ Look for a file with that
name in the components
folder.

63. THE “Fugly” SELECTOR HACK

64. THE “Fugly” SELECTOR HACK
Selector in DOM
I couldn’t change
Class name I wish
I could use in DOM

65. AUTOMATED STYLE GUIDE
kss-node
github.com/kss-node/kss-node

66. AUTOMATED STYLE GUIDE

68. WHAT DID YOU THINK?
E V A U L A T E T H I S S E S S I O N - A M S T E R D A M 2 0 1 4 . D R U P A L . O R G / S C H E D U L E
THANK YO U!