CSS Globals

CSS improved a lot in the last years but for many, it's still one of the hardest parts to handle while developing big web applications. Pre-processed languages like Sass and Less added many new features, but we still have to rely on methodologies such as BEM and OOCSS to avoid name collisions. Component-based libraries like React and Polymer are giving us a new tool to manage large front-end applications. In this talk, Giorgio will explain how to use these approaches so you can benefit from them in your next project.

Transcript

1. CSS GLOBALS
2. Giorgio Polvara
6. .btn { background: hsla(0, 0%, 100%, 0); color: #fff; outline: 20px solid #fff; transition: all 125ms; } .btn:hover { background: #fff; color: #6b2afe; transform: scale(1.5); outline: 0; }
13. THE GLOBAL PROBLEM
15. user@example.com email
16. user@example.com email .label { font-style: italic; color #333; }
17. APPROVED
18. APPROVED .label { margin: 1em; padding: 0.3em 0.6em; font-family: 'Black Ops One'; font-size: 2rem; text-transform: uppercase; color: #777; border: 5px solid #777; transform: rotate(12deg); }
19. .label { margin: 1em; padding: 0.3em 0.6em; font-family: 'Black Ops One'; font-size: 2rem; text-transform: uppercase; color: #777; border: 5px solid #777; transform: rotate(12deg); } .label { font-style: italic; color #333; }
20. .label { margin: 1em; padding: 0.3em 0.6em; font-family: 'Black Ops One'; font-size: 2rem; text-transform: uppercase; color: #777; border: 5px solid #777; transform: rotate(12deg); } .label { font-style: italic; color #333; }
21. .label { margin: 1em; padding: 0.3em 0.6em; font-family: 'Black Ops One'; font-size: 2rem; text-transform: uppercase; color: #777; border: 5px solid #777; transform: rotate(12deg); } .label { font-style: italic; color #333; }
23. .label
24. .label .table
25. .label .table .row
26. .label .table .row Over 300…
27. Every .class Is Global
28. <style="inline">
29. style="color:red"
30. style="color:red;background:blue;b order:1px solid red;font- family:sans-serif;font-size:2em;"
31. style="color:red;background:blue;b order:1px solid red;font- family:sans-serif;font-size:2em;" style="color:red;background:blue;b order:1px solid red;font- family:sans-serif;font-size:2em;"
32. style="color:red;background:blue;b order:1px solid red;font- family:sans-serif;font-size:2em;" style="color:red;background:blue;b order:1px solid red;font- family:sans-serif;font-size:2em;"
33. style="color:red;background:blue;b order:1px solid red;font- family:sans-serif;font-size:3em;" style="color:red;background:blue;b order:1px solid red;font- family:sans-serif;font-size:3em;"
34. .btn:hover { … }
35. .btn:hover { … } @media (max-width: 700px;) { … }
36. .btn:hover { … } @media (max-width: 700px;) { … } @keyframes animation { … }
38. label .
39. label .menu__
40. label .menu__ --on
41. label .menu__ --on .hero__label--hover
42. label .menu__ --on .hero__label--hover .form__label
43. ✅ Semantic names
44. ❌ Hard to name ✅ Semantic names
45. ❌ Hard to name ✅ Semantic names ✅ Less collisions
46. ❌ Still collisions ❌ Hard to name ✅ Semantic names ✅ Less collisions
47. CAN WE DO BETTER?
48. CAN WE DO BETTER?
50. Web Components
51. Component
52. Component An atomic piece of UI/UX that you can reuse
53. <button>Click me!</button>
54. React
55. const Hello = () => <h1>Hello world!</h1>;
56. const Hello = () => <h1>Hello world!</h1>; <header> <Hello /> </header>
57. const Hello = () => <h1>Hello world!</h1>; <header> <Hello /> </header> <header> <h1>Hello world!</h1> </header>
58. const Label = (props) => ( <div className="label"> {props.children} </div> )
59. const Label = (props) => ( <div className="label"> {props.children} </div> ) APPROVED
60. <Label> Approved </Label> const Label = (props) => ( <div className="label"> {props.children} </div> )
61. <Label> Approved </Label> const Label = (props) => ( <div className="label"> {props.children} </div> ) <div class="label"> Approved </div>
64. const Label = (props) => ( <div className=""> {props.children} </div> )
65. .label { color: #777; font-size: 2rem; ... } const Label = (props) => ( <div className=""> {props.children} </div> )
66. .label { color: #777; font-size: 2rem; ... } // Label.css const Label = (props) => ( <div className=""> {props.children} </div> )
67. .label { color: #777; font-size: 2rem; ... } // Label.css const Label = (props) => ( <div className=""> {props.children} </div> ) import cx from './Label.css'
68. .label { color: #777; font-size: 2rem; ... } // Label.css const Label = (props) => ( <div className={cx.label}> {props.children} </div> ) import cx from './Label.css'
69. .label { color: #777; font-size: 2rem; ... }
70. .label { color: #777; font-size: 2rem; ... }
71. .label { color: #777; font-size: 2rem; ... } .xyz123 { color: #777; font-size: 2rem; ... }
72. .label { color: #777; font-size: 2rem; ... } .xyz123 { color: #777; font-size: 2rem; ... } <div className={cx.label} > </div>
73. .label { color: #777; font-size: 2rem; ... } .xyz123 { color: #777; font-size: 2rem; ... } <div className={cx.label} > </div> <div class="xyz123"> </div>
74. .label { color: #777; font-size: 2rem; ... }
75. .label { color: #777; font-size: 2rem; ... } .label { color:rgb(1,2,3); } .label { position: sticky; }
76. .label { color: #777; font-size: 2rem; ... } .xyz123 { color: #777; font-size: 2rem; ... } .abc987 { color:rgb(1,2,3); } .bada55 { position: sticky; } .label { color:rgb(1,2,3); } .label { position: sticky; }
77. Demo
78. Component
79. Component
80. Component HTML/CSS/JS
81. Component UI/UX
82. Component
83. Component
84. Thank You Giorgio Polvara @gpx