Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Teams, styles and
scalable applications
vittorio vittori
@vttrx vitto
#css #team #style-guide
I started to love
modular design
thanks to…
…my beloved LEGO!
it was love for
modular design
and engineering
I dreamed to
became an
artist
and one day I met internet
so,
full of dreams
and ideals,
I became…
a Macromedia Flash developer
for 6 years
but this wasn’t the end
I switched to HTML, CSS and JS
and I saw my LEGO again
.class{
background-color: green;
}
. {
border-top: 1px solid blue;
}
with infinite possibilities
<div class=“ ”>
Heilo world!
</div>
so,
I decided
to move on
and…
write beautiful CSS
#home.new table div tr {…}
/* buy bread @ SUPERMAKET */
.Pag .red_area#ORO HR {…}
/* not working */
/*...
ok, I know
I’m missing
somethingCSS
This is when I
realized I needed
to using tools
to ease my life
Using a
framework
helps you gain
time on
reusable stuff
like
grids & widgets
you need for
your scaling
application
Using a...
Now let’s talk about approaches
not frameworks
APPROACH AUTHOR
SMACSS

smacss.com
Jonathan Snook

snook.ca
OOCSS
github.com/stubbornella/oocss/wiki
Nicole Sullivan

stub...
SMACSS
Scalable and Modular Architecture for CSS
v
SMACSS
BASE
for common
element
selectors
body,
form {
margin: 0;
padding: 0;
}
a {
color: #039;
}
a:hover {
color: #03F;...
v
SMACSS
BASE
not nice
for element ’s
attribute
selectors
input[type=“text”] {
color: #039;
}
.alt-input {
color: red;
}
....
v
SMACSS
LAYOUT
for repeated
layout
elements
without style
changes or
states
#header,
#article,
#footer {
width: 960px;
ma...
v
SMACSS
LAYOUT
not nice
they may need
to be changed
in the future
#article {
/* bg yellow */
}
.bg-blue {
/* bg blue */
}...
SMACSS
MODULE
designed to
exist as a
standalone
component
.module > h2 {
padding: 5px;
}
.module span {
padding: 5px;
}
v
span {
/* BASE styles */
border: 2px solid;
border-color: red;
}
.module > h2 {
padding: 5px;
}
.module span {
padding: ...
SMACSS
STATE
something
that augments
and overrides
all other styles
.tab {
color: white;
}
.is-tab-active {
color: black;
...
v
SMACSS
STATE
not nice
for potential
states
duplication
.tab {
color: white;
}
.is-tab-active {
color: black;
border: 1px...
SMACSS

Scalable and Modular Architecture for CSS
CONS
xYou have to be careful on
widget children selectors
strength

xMan...
SMACSS
by Jonathan Snook

smacss.com
OOCSS
Object Oriented CSS
v
OOCSS
STRUCTURE
AND SKIN
SEPARATION
to make every
selector
reusable in
different
contexts
.message {
/* structure */
wid...
v
OOCSS
STRUCTURE
AND SKIN
SEPARATION
<div class=“message pink-box blue-box”>
…
</div>
not nice
if you want to avoid
chang...
v
OOCSS
CONTAINER
AND CONTENT
SEPARATION
break
components
dependency of
their containers
.footer .category {
/* avoid this...
v
OOCSS
CONTAINER
AND CONTENT
SEPARATION
not nice
cause you may
be forced to
reset some
props
.category {
font-family: a, ...
OOCSS

Object Oriented CSS
CONS
xYou will write verbose
HTML

xVisual changes are made
mainly in the HTML
templates
PROS
✓...
OOCSS
by Nicole Sullivan
github.com/stubbornella/oocss/wiki
EXPRESSIVE CSS
Scalable CSS using utility classes
v
EXPRESSIVE CSS
UTILITY/HELPER
CLASSES
a list of ready to
be used styles
/* Bootstrap like */
.center-block {
display: bl...
not nice
if you don’t want
verbose, heavy
HTML
v
EXPRESSIVE CSS
UTILITY/HELPER
CLASSES
<div class=“message move-left margi...
EXPRESSIVE CSS

Scalable CSS using utility classes
CONS
xNeeds documentation to
share infos to the team on
the stuff you w...
EXPRESSIVE CSS
by John Polacek

johnpolacek.github.io/expressive-css
BEM
Block Element Modifier
v
BEM
BLOCK
ELEMENT
MODIFIER
self container
modules without
deep selector
levels
/* block */
.button {
display: block;
bac...
v
BEM
BLOCK
ELEMENT
MODIFIER
not nice
you are forced
to make more
modifiers
.button {
display: block;
background: black;
}...
BEM

Block Element Modifier
CONS
x It’s time consuming

x Hard to naming things and
keep it consistent

x Verbose selector...
BEM
by Vitaly Harisov

bem.info
Why all these approaches listed?
Because the more approaches
you learn
the more solutions you have
the more viewpoints you...
What is the future?
Maybe mixing parts of these
approaches together to do it

in your way
SMACSS
OOCSS
Expressive
CSS
BEM
Your way
to do it
now, what about
CSS & TEAMS ?
Front-end
developer
Builds the
templates
from the
designs to
make them
responsive
or other
Iterates the
staging
pages the
...
Client
feedback
iterations
Back-end
developer
Staging
app / pages
back-end tests
Production
app
The fdev prepares the temp...
Back-end
developer
Staging
app / pages
back-end tests
Production
app
Client
feedback
iterations
Front-end
developer
HTML
s...
Production
app
Back-end
developer
Staging
app / pages
back-end tests
Client
feedback
iterations
Front-end
developer
HTML
s...
Production
app
Back-end
developer
Staging
app / pages
back-end tests
Client
feedback
iterations
Front-end
developer
HTML
s...
Production
app
Back-end
developer
Staging
app / pages
back-end tests
Client
feedback
iterations
Front-end
developer
HTML
s...
What about the velocity of this
process?
Is everything going always
slightly fast?
Front-end
developer
static
page +
widgets
static
page +
widgets
static
page +
widgets
static
page +
widgets
static
page +
...
We’ve got a good workflow,
but we still have messy code
organization, how can we boost
team speed?
If you’ve noticed this problem,
you should consider to start
adding style guides to your
development workflow
There’s a tons of style guide
generators around


github.com/davidhund/styleguide-generators

styleguides.io
• Hologram
• ...
We also have our style guide
coded for our back-end devs
Hey! I still need
this #!$?% button!
Can you help?
static
page +
...
a-pollo
a tool to pass front-end code to
back-end developers
Base use in icon.css || .scss || .less
/*@pollo
@name: Icon
@html: <i class="icon icon--flag"></i>
*/
.icon {
…
}
.icon––f...
More tags in icon.css || .scss || .less
/*@pollo
@name: Icon
@auth: [Vittorio Vittori](http://vit.to)
@category: Icons
@da...
Multiple examples in icon.css
/*@pollo … */
/*@pollo … */
/*@pollo … */
/*@pollo … */
/*@pollo … */
.icon {
…
}
.icon––fla...
Hexo is used by a-pollo
hexo.io/docs/themes.html
a-pollo
repo @ github.com/vitto/a-pollo
website @ vitto.github.io/a-pollo
✓ Widget files doc/s
✓ Project stats
✓ Based on ...
Global usage
# Global installation
$ npm install -g a-pollo
# Config file a-pollo.yml creation
$ a-pollo init
# Default co...
Project usage
# Project installation
$ npm install ––save a-pollo
# Config file a-pollo.yml creation
$ ./node_modules/.bin...
These shelves are probably
how we’d like to handle
our CSS code snippets
to make a faster front-end
development environment
</> with || die();
QUESTIONS?
vittorio vittori
@vttrx

vitto
vit.to
Upcoming SlideShare
Loading in …5
×

Teams, styles and scalable applications

327 views

Published on

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.

Published in: Software
  • Be the first to comment

Teams, styles and scalable applications

  1. 1. Teams, styles and scalable applications vittorio vittori @vttrx vitto #css #team #style-guide
  2. 2. I started to love modular design thanks to…
  3. 3. …my beloved LEGO!
  4. 4. it was love for modular design and engineering
  5. 5. I dreamed to became an artist
  6. 6. and one day I met internet
  7. 7. so, full of dreams and ideals, I became…
  8. 8. a Macromedia Flash developer
  9. 9. for 6 years
  10. 10. but this wasn’t the end I switched to HTML, CSS and JS
  11. 11. and I saw my LEGO again .class{ background-color: green; } . { border-top: 1px solid blue; }
  12. 12. with infinite possibilities <div class=“ ”> Heilo world! </div>
  13. 13. so, I decided to move on and…
  14. 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. 15. ok, I know I’m missing somethingCSS
  16. 16. This is when I realized I needed to using tools to ease my life
  17. 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. 18. Now let’s talk about approaches not frameworks
  19. 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. 20. SMACSS Scalable and Modular Architecture for CSS
  21. 21. v SMACSS BASE for common element selectors body, form { margin: 0; padding: 0; } a { color: #039; } a:hover { color: #03F; }
  22. 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. 23. v SMACSS LAYOUT for repeated layout elements without style changes or states #header, #article, #footer { width: 960px; margin: auto; } #article { /* etc. */ }
  24. 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. 25. SMACSS MODULE designed to exist as a standalone component .module > h2 { padding: 5px; } .module span { padding: 5px; }
  26. 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. 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. 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. 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. 30. SMACSS by Jonathan Snook
 smacss.com
  31. 31. OOCSS Object Oriented CSS
  32. 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. 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. 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. 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. 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. 37. OOCSS by Nicole Sullivan github.com/stubbornella/oocss/wiki
  38. 38. EXPRESSIVE CSS Scalable CSS using utility classes
  39. 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. 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. 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. 42. EXPRESSIVE CSS by John Polacek
 johnpolacek.github.io/expressive-css
  43. 43. BEM Block Element Modifier
  44. 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. 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. 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. 47. BEM by Vitaly Harisov
 bem.info
  48. 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. 49. What is the future?
  50. 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. 51. now, what about CSS & TEAMS ?
  52. 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. 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. 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. 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. 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. 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. 58. What about the velocity of this process? Is everything going always slightly fast?
  59. 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. 60. We’ve got a good workflow, but we still have messy code organization, how can we boost team speed?
  61. 61. If you’ve noticed this problem, you should consider to start adding style guides to your development workflow
  62. 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. 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. 64. a-pollo
  65. 65. a tool to pass front-end code to back-end developers
  66. 66. Base use in icon.css || .scss || .less /*@pollo @name: Icon @html: <i class="icon icon--flag"></i> */ .icon { … } .icon––flag { … }
  67. 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. 68. Multiple examples in icon.css /*@pollo … */ /*@pollo … */ /*@pollo … */ /*@pollo … */ /*@pollo … */ .icon { … } .icon––flag { … }
  69. 69. Hexo is used by a-pollo hexo.io/docs/themes.html
  70. 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. 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. 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. 73. These shelves are probably how we’d like to handle our CSS code snippets to make a faster front-end development environment
  74. 74. </> with || die();
  75. 75. QUESTIONS? vittorio vittori @vttrx
 vitto vit.to

×