Teams, styles and scalable applications

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.

Transcript

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 something CSS
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