Teams, styles and scalable applications
1 like427 views
The document discusses various CSS architectural approaches like SMACSS, OOCSS, BEM, and Expressive CSS, highlighting their pros and cons in building scalable and modular applications. It emphasizes the importance of using frameworks and style guides to enhance team collaboration and improve development speed. Additionally, it introduces a tool called A-pollo for simplifying front-end and back-end code sharing through styled documentation.
![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;
}](https://image.slidesharecdn.com/cssday2016-vittoriovittori-teamsstylesandscalableapplications-160324115325/85/Teams-styles-and-scalable-applications-22-320.jpg)
@category: Icons
@date: 2016-01-11
@text: This is an icons set composet by…
@html: <i class="icon icon--flag"></i>
*/
.icon {
…
}
.icon––flag {
…
}](https://image.slidesharecdn.com/cssday2016-vittoriovittori-teamsstylesandscalableapplications-160324115325/85/Teams-styles-and-scalable-applications-67-320.jpg)
Teams, styles and scalable applications
- 1. Teams, styles and scalable applications vittorio vittori @vttrx vitto #css #team #style-guide
- 2. I started to love modular design thanks to…
- 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
- 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
- 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
- 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
- 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();