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
   

   View Slide

2. Giorgio Polvara
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

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;
   }
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. THE
    GLOBAL
    PROBLEM
    

    View Slide

14. View Slide

15. user@example.com
    email
    

    View Slide

16. user@example.com
    email
    .label {
    font-style: italic;
    color #333;
    }
    

    View Slide

17. APPROVED
    

    View Slide

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);
    }
    

    View Slide

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;
    }
    

    View Slide

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;
    }
    

    View Slide

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;
    }
    

    View Slide

22. View Slide

23. .label
    

    View Slide

24. .label
    .table
    

    View Slide

25. .label
    .table
    .row
    

    View Slide

26. .label
    .table
    .row
    Over 300…
    

    View Slide

27. Every .class Is Global
    

    View Slide

28. <br/>

    View Slide

29. style="color:red"
    

    View Slide

30. style="color:red;background:blue;b
    order:1px solid red;font-
    family:sans-serif;font-size:2em;"
    

    View Slide

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;"
    

    View Slide

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;"
    

    View Slide

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;"
    

    View Slide

34. .btn:hover { … }
    

    View Slide

35. .btn:hover { … }
    @media (max-width: 700px;) { … }
    

    View Slide

36. .btn:hover { … }
    @media (max-width: 700px;) { … }
    @keyframes animation { … }
    

    View Slide

37. View Slide

38. label
    .
    

    View Slide

39. label
    .menu__
    

    View Slide

40. label
    .menu__ --on
    

    View Slide

41. label
    .menu__ --on
    .hero__label--hover
    

    View Slide

42. label
    .menu__ --on
    .hero__label--hover
    .form__label
    

    View Slide

43. ✅ Semantic names
    

    View Slide

44. ❌ Hard to name
    ✅ Semantic names
    

    View Slide

45. ❌ Hard to name
    ✅ Semantic names
    ✅ Less collisions
    

    View Slide

46. ❌ Still collisions
    ❌ Hard to name
    ✅ Semantic names
    ✅ Less collisions
    

    View Slide

47. CAN WE
    DO
    BETTER?
    

    View Slide

48. CAN WE
    DO
    BETTER?
    

    View Slide

49. View Slide

50. Web Components
    

    View Slide

51. Component
    

    View Slide

52. Component
    An atomic piece of UI/UX
    that you can reuse
    

    View Slide

53. Click me!
    

    View Slide

54. React
    

    View Slide

55. const Hello = () => Hello world!;
    

    View Slide

56. const Hello = () => Hello world!;
    
    
    
    

    View Slide

57. const Hello = () => Hello world!;
    
    
    
    
    Hello world!
    
    

    View Slide

58. const Label = (props) => (
    
    {props.children}
    
    )
    

    View Slide

59. const Label = (props) => (
    
    {props.children}
    
    )
    APPROVED
    

    View Slide

60. 
    Approved
    
    const Label = (props) => (
    
    {props.children}
    
    )
    

    View Slide

61. 
    Approved
    
    const Label = (props) => (
    
    {props.children}
    
    )
    
    Approved
    
    

    View Slide

62. View Slide

63. View Slide

64. const Label = (props) => (
    
    {props.children}
    
    )
    

    View Slide

65. .label {
    color: #777;
    font-size: 2rem;
    ...
    }
    const Label = (props) => (
    
    {props.children}
    
    )
    

    View Slide

66. .label {
    color: #777;
    font-size: 2rem;
    ...
    }
    // Label.css
    const Label = (props) => (
    
    {props.children}
    
    )
    

    View Slide

67. .label {
    color: #777;
    font-size: 2rem;
    ...
    }
    // Label.css
    const Label = (props) => (
    
    {props.children}
    
    )
    import cx from './Label.css'
    

    View Slide

68. .label {
    color: #777;
    font-size: 2rem;
    ...
    }
    // Label.css
    const Label = (props) => (
    
    {props.children}
    
    )
    import cx from './Label.css'
    

    View Slide

69. .label {
    color: #777;
    font-size: 2rem;
    ...
    }
    

    View Slide

70. .label {
    color: #777;
    font-size: 2rem;
    ...
    }
    

    View Slide

71. .label {
    color: #777;
    font-size: 2rem;
    ...
    }
    .xyz123 {
    color: #777;
    font-size: 2rem;
    ...
    }
    

    View Slide

72. .label {
    color: #777;
    font-size: 2rem;
    ...
    }
    .xyz123 {
    color: #777;
    font-size: 2rem;
    ...
    }
    className={cx.label}
    >
    
    

    View Slide

73. .label {
    color: #777;
    font-size: 2rem;
    ...
    }
    .xyz123 {
    color: #777;
    font-size: 2rem;
    ...
    }
    className={cx.label}
    >
    
    class="xyz123">
    
    

    View Slide

74. .label {
    color: #777;
    font-size: 2rem;
    ...
    }
    

    View Slide

75. .label {
    color: #777;
    font-size: 2rem;
    ...
    }
    .label {
    color:rgb(1,2,3);
    }
    .label {
    position: sticky;
    }
    

    View Slide

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;
    }
    

    View Slide

77. Demo
    

    View Slide

78. Component
    

    View Slide

79. Component
    

    View Slide

80. Component
    HTML/CSS/JS
    

    View Slide

81. Component
    UI/UX
    

    View Slide

82. Component
    

    View Slide

83. Component
    

    View Slide

84. Thank You
    Giorgio Polvara
    @gpx
    

    View Slide