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

Utility-First CSS: Build a clean Component base...

Caneco
March 22, 2019
1.2k

Utility-First CSS: Build a clean Component based system

You may be familiar with the time when the CSS of your application reaches the point when you start adding some weird classes. Save you some trouble and start using an utility-first approach.

////////////////////////////////////////////////////////////////////////

Thanks for ❤️
– @elifitch for the initial inspiration;
– @simonswiss for the perfect way to showcase all stakeholder's requests

Caneco

March 22, 2019
Tweet

Transcript

  1. Even Internet Explorer had 99% CCS1 support in 2000 for

    the Macintosh https://en.wikipedia.org/wiki/Cascading_Style_Sheets
  2. ¸ #author .picture {!!...} #author .picture .rounded {!!...} #author .name

    {!!...} #author .description {!!...} #author ul > li b.item {!!...} 1. 2. 3. 4. 5.
  3. ¸ #author .picture {!!...} #author .picture .rounded {!!...} #author .name

    {!!...} #author .description {!!...} #author ul > li b.item {!!...} 1. 2. 3. 4. 5.
  4. ¸ <div class="author"> <div class="author!__picture"> <img class="author!__picture!--rounded" src !</div> <div

    class="author!__name">!!...!</div> <div class="author!__description">!!...!</div> !</div> 1. 2. 3. 4. 5. 6. 7.
  5. ¸ <div class="card"> <div class="card!__picture"> <img class="card!__picture!--rounded" src=" !</div> <div

    class="card!__name">!!...!</div> <div class="card!__description">!!...!</div> !</div> 1. 2. 3. 4. 5. 6. 7.
  6. ¸ .hero!--no-background { background-image: none; } .hero!__title!--dark { color: '#2f365f';

    } .intro!--no-padding-bottom { padding-bottom: 0; } 1. 2. 3. 4. 5. 6. 7. 8. 9.
  7. .author!__picture {!!...} .author!__picture!--rounded {!!...} .author!__name {!!...} .author!__description {!!...} .block!__A!--no-padding {!!...}

    .block!__B!--no-margin {!!...} .block!__C!--no-margin-top {!!...} .block!__D!--tet-left {!!...} 1. 2. 3. 4. 5. 6. 7. 8. 9.
  8. .author!__picture {!!...} .author!__picture!--rounded {!!...} .author!__name {!!...} .author!__description {!!...} .block!__A!--no-padding {!!...}

    .block!__B!--no-margin {!!...} .block!__C!--no-margin-top {!!...} .block!__D!--text-left {!!...} .block!__E!--again { screw: 'it' !important } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10.
  9. .author!__picture {!!...} .author!__picture!--rounded {!!...} .author!__name {!!...} .author!__description {!!...} .block!__A!--no-padding {!!...}

    .block!__B!--no-margin {!!...} .block!__C!--no-margin-top {!!...} .block!__D!--text-left {!!...} .block!__E!--again { screw: 'it' !important } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10.
  10. .author!__picture {!!...} .author!__picture!--rounded {!!...} .author!__name {!!...} .author!__description {!!...} .block!__A!--no-padding {!!...}

    .block!__B!--no-margin {!!...} .block!__C!--no-margin-top {!!...} .block!__D!--text-left {!!...} .block!__E!--again { screw: 'it' !important } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10.
  11. .author!__picture {!!...} .author!__picture!--rounded {!!...} .author!__name {!!...} .author!__description {!!...} .block!__A!--no-padding {!!...}

    .block!__B!--no-margin {!!...} .block!__C!--no-margin-top {!!...} .block!__D!--text-left {!!...} .block!__E!--again { screw: 'it' !important } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10.
  12. ¸ <button style=" background-color: #9561e2; color: white; border-radius: 10px; !/*

    autoprefix? !*/ padding: 3px 4px; ">!!...!</button> 1. 2. 3. 4. 5. 6.
  13. ¸ <nav class="flex justify-between items-center <a class="bg-blue text-white rounded px-4

    p <a class="bg-blue text-white rounded px-4 p <a class="bg-blue text-white rounded px-4 p <a class="bg-blue text-white rounded px-4 p <a class="bg-blue text-white rounded px-4 p <nav> 1. 2. 3. 4. 5. 6. 7.
  14. ¸ .btn { @apply rounded px-4 py-3 } !!!<!-- then

    in HTML !!--> <a class="btn bg-blue text-white">!</a> 1. 2. 3. 4. 5. 6. 7.
  15. ¸ <?php $btn = 'rounded px-4 py-3' ?> !!!<!-- then

    in HTML !!--> <a class="<!?= $btn ?> bg-blue text-white">!</b 1. 2. 3. 4. 5.
  16. ¸ !// NavLink.vue <template> <a class="bg-blue text-white rounded px-4 p

    <slot>!</slot> !</a> !</template> !!!<!-- then in HTML !!--> <NavLink>About us!</NavLink> 1. 2. 3. 4. 5. 6. 7. 8. 9.