CSS convo over lunch

The Yelp SeatMe friends invited me for lunch and we talked about CSS.

Transcript

1. I heard that you want to Improve your CSS @GiuseppeGurgone
2. Structure Docs & Tests Future A Styling Methodology Isolation & Composition
3. Structure
4. Structure Sparse Code organized by Technology assets/css/forms.css assets/js/checkbox.js view/partials.html tests/??? docs??? => http://wiki/docs/forms#checkbox > fidn . -name checkbox* > sudo pip install thefuck
5. it gets tricky...
6. Structure :) Self Contained Components components/Checkbox/index.css components/Checkbox/index.js components/Checkbox/index.html components/Checkbox/test/ components/Checkbox/doc/index.md components/Checkbox/doc/css.md components/Checkbox/doc/js.md components/Checkbox/doc/html.md
7. Structure Application base/ components/ pages/ utilities/ theme/ components/ pages/ utilities/
8. Docs & Tests build simple and solid solutions
9. that we can use on our worst days... * The joke is (c) Alex Sexton
10. Docs Reference for everybody Comprehensive, document every UI State Built in code examples One component at a time Generated Metalsmith.io, Jekyll
11. Tests Enforce Structure, Docs, Conventions and other common practices [‘css’, ’js’, ’html’] .forEach(ext => assertFileExists(‘doc/’+ext+’.md’)) Image diffing on UI Components (state) All [CSS,] JavaScript, Partial tested
12. (c) stripe
13. Structure Organize by Components not Technology Docs Document every Component and Utility Tests Enforce documentation and best practices
14. Future Proof
16. Preprocessors are awesome buttt… Non standard APIs Often overused, easily abused: That “With power comes great responsibility” thing Nesting #nav > li > .wrapper a:hover:before, #nav > li > .wrapper a:focus:before { … } #sidebar div.widget h2.title a span { … } ...
17. preprocessors? where we’re going, we don’t need preprocessors
20. PostCSS A tool for transforming styles with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more. :root { --Button-color: hotpink; } .Button { color: var(--Button-color); } postcss(customProperties()).process(css).css .Button { color: hotpink; }
21. PostCSS http://github.com/postcss/postcss Plugins Autoprefixer postcss-import postcss-custom-properties postcss-calc postcss-custom-media moar @ http://postcss.parts
22. SUIT CSS is a reliable and testable styling methodology for component-based UI development developed by Nicolas Gallagher. suitcss.github.io
23. SUIT CSS Naming Convention, Scoped Styles The SUIT CSS naming convention helps to scope component CSS and make your widgets render more predictably. .MyComponent {} .MyComponent.is-animating {} .MyComponent--modifier {} .MyComponent-part {} .MyComponent-anotherPart {}
24. SUIT CSS vs BEM SUIT CSS is a flavor of BEM "Standard BEM" is also a poor choice for migrations, because .menu is going to collide with the legacy .menu code that has no isolated structure to it. Whereas the name .Menu won't, and it maps more obviously with associated JS functions and View code. PascalCase plays nice with React and JS components.
27. Isolation & Composition
28. Global Styles Hard to know in advance the context where our UI Components are going to be used. The effect of Global Styles is unpredictable Gotcha in the JavaScript world No Global typography, etc.
29. One pattern, one Component Each component should implement a single part of the UI. Don't try to do too much. Each component should have a dedicated CSS file. Ideally your component's files are grouped together in a dedicated directory.
30. One Element, one Component There should be a one-to-one replationship between HTML and CSS. .Review { color: #b4d455; } <div class=”Grid-cell”> <p class=”Review Grid-cell u-textBreak”> uh-may-zing </p> </div>
31. Adapting to ancestral context Most components should not set their own width, margin, and positioning. By authoring a component to be full-width or inline, it can better adapt to the dimensions of an ancestral context.
32. Nesting Components Wrapping Elements <div class=”Header”> <div class=”Header-button”> <button class=”Button”>hey</button> </div> </div>
33. Nesting Components Many options! http://simurai.com/blog/2015/05/11/nesting-components
34. Copy/Paste Senõr Frontend Eng Styleguides are cool, Bootstrap is cool (?) Reusable CSS alone is not enough Build reusable UI Components: Templates, Partials, Presenter Pattern
35. Future Proof :) Transpile, use Standards SUIT CSS :) Reliable Styling methodology Isolation & Composition :) Avoid dependencies & Global, Compose instead