Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Giorgio Polvara

October 18, 2016
Tweet

More Decks by Giorgio Polvara

Other Decks in Technology

Transcript

  1. Giorgio Polvara

    View full-size slide

  2. .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 full-size slide

  3. THE
    GLOBAL
    PROBLEM

    View full-size slide

  4. [email protected]
    email
    .label {
    font-style: italic;
    color #333;
    }

    View full-size slide

  5. 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 full-size slide

  6. .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 full-size slide

  7. .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 full-size slide

  8. .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 full-size slide

  9. .label
    .table

    View full-size slide

  10. .label
    .table
    .row

    View full-size slide

  11. .label
    .table
    .row
    Over 300…

    View full-size slide

  12. Every .class Is Global

    View full-size slide

  13. style="color:red"

    View full-size slide

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

    View full-size slide

  15. 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 full-size slide

  16. 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 full-size slide

  17. 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 full-size slide

  18. .btn:hover { … }

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. label
    .menu__

    View full-size slide

  22. label
    .menu__ --on

    View full-size slide

  23. label
    .menu__ --on
    .hero__label--hover

    View full-size slide

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

    View full-size slide

  25. ✅ Semantic names

    View full-size slide

  26. ❌ Hard to name
    ✅ Semantic names

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. CAN WE
    DO
    BETTER?

    View full-size slide

  30. CAN WE
    DO
    BETTER?

    View full-size slide

  31. Web Components

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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



    View full-size slide

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




    Hello world!

    View full-size slide

  36. const Label = (props) => (

    {props.children}

    )

    View full-size slide

  37. const Label = (props) => (

    {props.children}

    )
    APPROVED

    View full-size slide


  38. Approved

    const Label = (props) => (

    {props.children}

    )

    View full-size slide


  39. Approved

    const Label = (props) => (

    {props.children}

    )

    Approved

    View full-size slide

  40. const Label = (props) => (

    {props.children}

    )

    View full-size slide

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

    {props.children}

    )

    View full-size slide

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

    {props.children}

    )

    View full-size slide

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

    {props.children}

    )
    import cx from './Label.css'

    View full-size slide

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

    {props.children}

    )
    import cx from './Label.css'

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    class="xyz123">

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  52. .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 full-size slide

  53. Component
    HTML/CSS/JS

    View full-size slide

  54. Component
    UI/UX

    View full-size slide

  55. Thank You
    Giorgio Polvara
    @gpx

    View full-size slide