The talk it's about how failure is an occasion to learn scalability in CSS development and how your knowledge can be shared with the rest of the team.

1. Teams, styles and
scalable applications
vittorio vittori
@vttrx vitto
#css #team #style-guide

2. I started to love
modular design
thanks to…

3. …my beloved LEGO!

4. it was love for
modular design
and engineering

5. I dreamed to
became an
artist

6. and one day I met internet

7. so,
full of dreams
and ideals,
I became…

8. a Macromedia Flash developer

9. for 6 years

10. but this wasn’t the end
I switched to HTML, CSS and JS

11. and I saw my LEGO again
.class{
background-color: green;
}
. {
border-top: 1px solid blue;
}

12. with infinite possibilities
<div class=“ ”>
Heilo world!
</div>

13. so,
I decided
to move on
and…

14. write beautiful CSS
#home.new table div tr {…}
/* buy bread @ SUPERMAKET */
.Pag .red_area#ORO HR {…}
/* not working */
/* MUST BE A CSS BUG */
.str.CIAO..new > * > div {…}

15. ok, I know
I’m missing
somethingCSS

16. This is when I
realized I needed
to using tools
to ease my life

17. Using a
framework
helps you gain
time on
reusable stuff
like
grids & widgets
you need for
your scaling
application
Using an
approach
gives you the
opportunity to
grow your code
between
scaling
application that
changes during
development

18. Now let’s talk about approaches
not frameworks

19. APPROACH AUTHOR
SMACSS
smacss.com
Jonathan Snook
snook.ca
OOCSS
github.com/stubbornella/oocss/wiki
Nicole Sullivan
stubbornella.org
Expressive CSS
johnpolacek.github.io/expressive-css
John Polacek
johnpolacek.com
BEM
bem.info
Vitaly Harisov
vitaly.harisov.name
what’s around

20. SMACSS
Scalable and Modular Architecture for CSS

21. v
SMACSS
BASE
for common
element
selectors
body,
form {
margin: 0;
padding: 0;
}
a {
color: #039;
}
a:hover {
color: #03F;
}

22. v
SMACSS
BASE
not nice
for element ’s
attribute
selectors
input[type=“text”] {
color: #039;
}
.alt-input {
color: red;
}
.i-said-alt-input {
…: #03F!important;
}

23. v
SMACSS
LAYOUT
for repeated
layout
elements
without style
changes or
states
#header,
#article,
#footer {
width: 960px;
margin: auto;
}
#article {
/* etc. */
}

24. v
SMACSS
LAYOUT
not nice
they may need
to be changed
in the future
#article {
/* bg yellow */
}
.bg-blue {
/* bg blue */
}
#article.bg-blue {
/* bg blue */
}

25. SMACSS
MODULE
designed to
exist as a
standalone
component
.module > h2 {
padding: 5px;
}
.module span {
padding: 5px;
}

26. v
span {
/* BASE styles */
border: 2px solid;
border-color: red;
}
.module > h2 {
padding: 5px;
}
.module span {
padding: 5px;
/* unwanted
inherited propos */
border: 2px solid;
border-color: red;
}
SMACSS
MODULE
resets needed
because of
BASE in some
cases

27. SMACSS
STATE
something
that augments
and overrides
all other styles
.tab {
color: white;
}
.is-tab-active {
color: black;
border: 1px … #000;
}
.is-active {
color: black;
}

28. v
SMACSS
STATE
not nice
for potential
states
duplication
.tab {
color: white;
}
.is-tab-active {
color: black;
border: 1px … #000;
}
.is-active {
color: black;
}
.is-button-active {
color: black;
}

29. SMACSS
Scalable and Modular Architecture for CSS
CONS
xYou have to be careful on
widget children selectors
strength
xMany design levels, layout,
base, widgets, etc. that can
lead to conflicts if you
work on a team
xWidget’s element selectors
are not a best practice
PROS
✓Organizing files by
widgets it’s nice for
avoiding conflicts
✓Very fast on building
codebase with state
selectors

30. SMACSS
by Jonathan Snook
smacss.com

31. OOCSS
Object Oriented CSS

32. v
OOCSS
STRUCTURE
AND SKIN
SEPARATION
to make every
selector
reusable in
different
contexts
.message {
/* structure */
width: 200px;
height: 50px;
padding: 10px;
}
.pink-box {
/* skin */
background: pink;
border: 1px solid;
border-color: #C5D
}

33. v
OOCSS
STRUCTURE
AND SKIN
SEPARATION
<div class=“message pink-box blue-box”>
…
</div>
not nice
if you want to avoid
changes in HTML
template for some
client changes

34. v
OOCSS
CONTAINER
AND CONTENT
SEPARATION
break
components
dependency of
their containers
.footer .category {
/* avoid this */
font-family: a, b;
font-size: 24px;
line-height: 1;
}
.category {
/* use this */
font-family: a, b;
font-size: 24px;
line-height: 1;
}

35. v
OOCSS
CONTAINER
AND CONTENT
SEPARATION
not nice
cause you may
be forced to
reset some
props
.category {
font-family: a, b;
font-size: 24px;
line-height: 1;
}
/* SMACSS states */
.small-font {
font-size: 12px;
}

36. OOCSS
Object Oriented CSS
CONS
xYou will write verbose
HTML
xVisual changes are made
mainly in the HTML
templates
PROS
✓Smaller CSS files size with
reusable selectors
✓Nice for prototyping
✓Easy to write
✓Can be combined with
other approaches

37. OOCSS
by Nicole Sullivan
github.com/stubbornella/oocss/wiki

38. EXPRESSIVE CSS
Scalable CSS using utility classes

39. v
EXPRESSIVE CSS
UTILITY/HELPER
CLASSES
a list of ready to
be used styles
/* Bootstrap like */
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
/* HTML5 boilerplate
like */
.hidden {
display: none !im…;
visibility: hidden;
}

40. not nice
if you don’t want
verbose, heavy
HTML
v
EXPRESSIVE CSS
UTILITY/HELPER
CLASSES
<div class=“message move-left margin-top
more-padding no-padding-left just-a-few-
border-left no-border—top”>
…
</div>

41. EXPRESSIVE CSS
Scalable CSS using utility classes
CONS
xNeeds documentation to
share infos to the team on
the stuff you write
xIf you use Foundation,
Bootstrap or other you can
get some conflict selector
PROS
✓Approach very similar to
frameworks like Bootstrap,
so it’s easy to learn for
people already using them
✓Easy to read if the team
has the docs
✓Very, very, very fast
writing

42. EXPRESSIVE CSS
by John Polacek
johnpolacek.github.io/expressive-css

43. BEM
Block Element Modifier

44. v
BEM
BLOCK
ELEMENT
MODIFIER
self container
modules without
deep selector
levels
/* block */
.button {
display: block;
background: black;
}
/* element
(a block child) */
.button__text {
color: white;
}
/* modifier */
.button––yellow {
background: yellow;
}

45. v
BEM
BLOCK
ELEMENT
MODIFIER
not nice
you are forced
to make more
modifiers
.button {
display: block;
background: black;
}
.button__text {
color: white;
}
.button––yellow {
background: yellow;
}
.button__text––black
{
color: black;
}

46. BEM
Block Element Modifier
CONS
x It’s time consuming
x Hard to naming things and
keep it consistent
x Verbose selectors naming
x Bigger CSS file size
x Suggested to be used with
CSS critical path
PROS
✓Nice scalable solution
✓Just 1 level class selectors
✓Conflict proof selectors
✓Ultra flexible and reusable
widgets
✓Nice for teams when they
know how it works

47. BEM
by Vitaly Harisov
bem.info

48. Why all these approaches listed?
Because the more approaches
you learn
the more solutions you have
the more viewpoints you see
the more problems you consider

49. What is the future?

50. Maybe mixing parts of these
approaches together to do it
in your way
SMACSS
OOCSS
Expressive
CSS
BEM
Your way
to do it

51. now, what about
CSS & TEAMS ?

52. Front-end
developer
Builds the
templates
from the
designs to
make them
responsive
or other
Iterates the
staging
pages the
back-end
dev made
to give
feedback
Client
iteration
How we are used to do develop
Back-end
developer
Takes the
HTML static
templates
from the
fdev and
make them
dynamic

53. Client
feedback
iterations
Back-end
developer
Staging
app / pages
back-end tests
Production
app
The fdev prepares the templates
Front-end
developer
HTML
static
templates
front-end tests

54. Back-end
developer
Staging
app / pages
back-end tests
Production
app
Client
feedback
iterations
Front-end
developer
HTML
static
templates
front-end tests
The client gives iteration feedback

55. Production
app
Back-end
developer
Staging
app / pages
back-end tests
Client
feedback
iterations
Front-end
developer
HTML
static
templates
front-end tests
The bdev bakes the app

56. Production
app
Back-end
developer
Staging
app / pages
back-end tests
Client
feedback
iterations
Front-end
developer
HTML
static
templates
front-end tests
The client gives iteration feedback

57. Production
app
Back-end
developer
Staging
app / pages
back-end tests
Client
feedback
iterations
Front-end
developer
HTML
static
templates
front-end tests
We are is ready to go in production

58. What about the velocity of this
process?
Is everything going always
slightly fast?

59. Front-end
developer
static
page +
widgets
static
page +
widgets
static
page +
widgets
static
page +
widgets
static
page +
widgets
I just need a
purple button, but
where is it?
static
page +
widgets
static
page +
widgets
static
page +
widgets
static
page +
widgets
static
page +
widgets
static
page +
widgets
static
page +
widgets
static
page +
widgets
Back-end
developer
?
?
?
Now we have 70 static views
let’s play to hide and seek.
+ 53

60. We’ve got a good workflow,
but we still have messy code
organization, how can we boost
team speed?

61. If you’ve noticed this problem,
you should consider to start
adding style guides to your
development workflow

62. There’s a tons of style guide
generators around
github.com/davidhund/styleguide-generators
styleguides.io
• Hologram
• StyleDocco
• Huge styleguide.
• Styledown
• stylifyme
• mdcss
• Kalei
• kss
• tapestry
• etc.

63. We also have our style guide
coded for our back-end devs
Hey! I still need
this #!$?% button!
Can you help?
static
page +
widgets
static
page +
widgets
static
page +
widgets
Back-end
developer
?
?
?

64. a-pollo

65. a tool to pass front-end code to
back-end developers

66. Base use in icon.css || .scss || .less
/*@pollo
@name: Icon
@html: <i class="icon icon--flag"></i>
*/
.icon {
…
}
.icon––flag {
…
}

67. More tags in icon.css || .scss || .less
/*@pollo
@name: Icon
@auth: [Vittorio Vittori](http://vit.to)
@category: Icons
@date: 2016-01-11
@text: This is an icons set composet by…
@html: <i class="icon icon--flag"></i>
*/
.icon {
…
}
.icon––flag {
…
}

68. Multiple examples in icon.css
/*@pollo … */
/*@pollo … */
/*@pollo … */
/*@pollo … */
/*@pollo … */
.icon {
…
}
.icon––flag {
…
}

69. Hexo is used by a-pollo
hexo.io/docs/themes.html

70. a-pollo
repo @ github.com/vitto/a-pollo
website @ vitto.github.io/a-pollo
✓ Widget files doc/s
✓ Project stats
✓ Based on hexojs to
easily custom
style guide theme
? CSS stats
? SASS doc
? LESS doc
? Default markdown
style guide articles
Features Roadmap

71. Global usage
# Global installation
$ npm install -g a-pollo
# Config file a-pollo.yml creation
$ a-pollo init
# Default command to generate style guide
$ a-pollo
# Choose a different config file
$ a-pollo config=file.yml

72. Project usage
# Project installation
$ npm install ––save a-pollo
# Config file a-pollo.yml creation
$ ./node_modules/.bin/a-pollo init
# Default command to generate style guide
$ ./node_modules/.bin/a-pollo
# Choose a different config file
$ ./node_modules/.bin/a-pollo config=file.yml

73. These shelves are probably
how we’d like to handle
our CSS code snippets
to make a faster front-end
development environment

74. </> with || die();

75. QUESTIONS?
vittorio vittori
@vttrx
vitto
vit.to