CSS Globals

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.

2334ff4bd8e0678248853d80c1604f27?s=128

Giorgio Polvara

October 18, 2016
Tweet

Transcript

  1. CSS GLOBALS

  2. Giorgio Polvara

  3. None
  4. None
  5. None
  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; }
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. THE GLOBAL PROBLEM

  14. None
  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; }
  22. None
  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 { … }
  37. None
  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?

  49. None
  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>
  62. None
  63. None
  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