Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Hardcore CSS Made Easy

362 views

Published on

Learn the new CSS techniques behind OutSystems UI and how to refactor bad CSS following the best practices and conventions in CSS.

Published in: Engineering
  • Be the first to comment

Hardcore CSS Made Easy

  1. 1. Hardcore CSS Made Easy
  2. 2. José Rosário Front End Software Engineer | OutSystems R&D @ in jose.rosario@outsystems.com /joserosario @JoseRosario95 @jose.rosario
  3. 3. codepen.io/JoseRosario/
  4. 4. CSS Basics Best Practices CSS Methodology CSS Variables CSS Flexbox
  5. 5. Motivation to write CSS Project time
  6. 6. .heading-small { /* styles here */ } input { /* styles here */ } .Button { /* styles here */ } .Title__Black { /* styles here */ } .Card_Title { /* styles here */ }
  7. 7. footer.main-footer-light .inner .footer--section:first-child{ /* styles here */ } body.usecases .content-usecases-graphics .inner.centre>div:last-of-type>div span:after { /* styles here */ } .page.home header.main-header .searchform-input:-ms-input-placeholder,.page.home header.main-header { /* styles here */ } .card.card-sidebar,.margin__bottom__2,.page.home .content-home:nth-of-type(2) .inner>div h3,.page.home .content-home:nth-of-type(3) { /* styles here */ }
  8. 8. Every single line of code should look like it was written by a single person, no matter how many people wrote it.
  9. 9. !important
  10. 10. Every single line of code should look like it was written by a single person, no matter how many people wrote it.
  11. 11. CSS Basics
  12. 12. <a class="button"> I’m a Button </a> .button { font-size: 20px; background-color: blue; height: 40px; border-radius: 4px; color: white; } I’m a Button
  13. 13. .div { background-color: red; } CSS Rule Set
  14. 14. .div { background-color: red; } Selector
  15. 15. div { background-color: red; } Element Selector
  16. 16. div { background-color: red; } Element Selector 1
  17. 17. #div { background-color: red; } 100 ID Selector
  18. 18. .div { background-color: red; } 10 Class Selector
  19. 19. input[type=”text”] { background-color: red; } 10 Attribute Selector
  20. 20. .div::hover { background-color: red; } 10 Pseudo Class Selector
  21. 21. .div::before { content: ‘New Product’; } 10 Pseudo Element Selector
  22. 22. 1 Elements 100 IDs 10 Classes
  23. 23. #box { background-color: red; } .box { background-color: blue; } ? Specificity
  24. 24. /* 100 Points */ #box { background-color: red; } /* 10 Points */ .box { background-color: blue; } Specificity
  25. 25. ? Specificity .box { background-color: red; } div.box { background-color: blue; }
  26. 26. Specificity /* 10 Points */ .box { background-color: red; } /* 1 Point + 10 Points */ div.box { background-color: blue; }
  27. 27. Specificity .box { background-color: red; } .box { background-color: green; } ?
  28. 28. Specificity /* 10 Points */ .box { background-color: red; } /* 10 Points */ .box { background-color: green; }
  29. 29. Inline Styles
  30. 30. 1000 Inline Styles
  31. 31. !important
  32. 32. .div { background-color: red; } Selector
  33. 33. .div { background-color: red; } Declaration
  34. 34. .div { background-color: red; } Rules
  35. 35. .div { background-color: red; } Properties
  36. 36. .div { background-color: red; } Values
  37. 37. CSS Rule Set .div { background-color: red; } Selector Declaration Property Value
  38. 38. Best Practices & Conventions
  39. 39. /* ================================================================ */ /* ================================================================ */ /* OutSystems UI Web */ /* $0 - Root - CSS Variables */ /* $1 - Resets */ /* $2 - HTML Elements */ /* $2.1 - HTML Elements - Links */ /* ........ */ /* $3 - Page Layout */ /* $4 - Patterns */ /* $4.1 - Patterns - Content */ /* $4.1.1 - Patterns - Content - Accordion */ /* $4.1.2 - Patterns - Content - Alert */ /* ........ */ /* $4.2 - Patterns - Controls */ /* $4.3 - Patterns - Data */ /* $6 - Utilities */ /* $6.1 - Utilities - Typography */ / $6.2 - Utilities - Colors /* ================================================================ */ /* ================================================================ */
  40. 40. /* ================================================================ */ /* ================================================================ */ /* OutSystems UI Web */ /* $0 - Root - CSS Variables */ /* $1 - Resets */ /* $2 - HTML Elements */ /* $2.1 - HTML Elements - Links */ /* ........ */ /* $3 - Page Layout */ /* $4 - Patterns */ /* $4.1 - Patterns - Content */ /* $4.1.1 - Patterns - Content - Accordion */ /* $4.1.2 - Patterns - Content - Alert */ /* ........ */ /* $4.2 - Patterns - Controls */ /* $4.3 - Patterns - Data */ /* $6 - Utilities */ /* $6.1 - Utilities - Typography */ / $6.2 - Utilities - Colors /* ================================================================ */ /* ================================================================ */
  41. 41. /* ================================================================ */ /* ================================================================ */ /* OutSystems UI Web */ /* $0 - Root - CSS Variables */ /* $1 - Resets */ /* $2 - HTML Elements */ /* $2.1 - HTML Elements - Links */ /* ........ */ /* $3 - Page Layout */ /* $4 - Patterns */ /* $4.1 - Patterns - Content */ /* $4.1.1 - Patterns - Content - Accordion */ /* $4.1.2 - Patterns - Content - Alert */ /* ........ */ /* $4.2 - Patterns - Controls */ /* $4.3 - Patterns - Data */ /* $6 - Utilities */ /* $6.1 - Utilities - Typography */ / $6.2 - Utilities - Colors /* ================================================================ */ /* ================================================================ */
  42. 42. /* ================================================================ */ /* ================================================================ */ /* OutSystems UI Web */ /* $0 - Root - CSS Variables */ /* $1 - Resets */ /* $2 - HTML Elements */ /* $2.1 - HTML Elements - Links */ /* ........ */ /* $3 - Page Layout */ /* $4 - Patterns */ /* $4.1 - Patterns - Content */ /* $4.1.1 - Patterns - Content - Accordion */ /* $4.1.2 - Patterns - Content - Alert */ /* ........ */ /* $4.2 - Patterns - Controls */ /* $4.3 - Patterns - Data */ /* $6 - Utilities */ /* $6.1 - Utilities - Typography */ / $6.2 - Utilities - Colors /* ================================================================ */ /* ================================================================ */
  43. 43. /* ================================================================ */ /* ================================================================ */ /* OutSystems UI Web */ /* $0 - Root - CSS Variables */ /* $1 - Resets */ /* $2 - HTML Elements */ /* $2.1 - HTML Elements - Links */ /* ........ */ /* $3 - Page Layout */ /* $4 - Patterns */ /* $4.1 - Patterns - Content */ /* $4.1.1 - Patterns - Content - Accordion */ /* $4.1.2 - Patterns - Content - Alert */ /* ........ */ /* $4.2 - Patterns - Controls */ /* $4.3 - Patterns - Data */ /* $6 - Utilities */ /* $6.1 - Utilities - Typography */ / $6.2 - Utilities - Colors /* ================================================================ */ /* ================================================================ */
  44. 44. /* ================================================================ */ /* ================================================================ */ /* OutSystems UI Web */ /* $0 - Root - CSS Variables */ /* $1 - Resets */ /* $2 - HTML Elements */ /* $2.1 - HTML Elements - Links */ /* ........ */ /* $3 - Page Layout */ /* $4 - Patterns */ /* $4.1 - Patterns - Content */ /* $4.1.1 - Patterns - Content - Accordion */ /* $4.1.2 - Patterns - Content - Alert */ /* ........ */ /* $4.2 - Patterns - Controls */ /* $4.3 - Patterns - Data */ /* $6 - Utilities */ /* $6.1 - Utilities - Typography */ / $6.2 - Utilities - Colors /* ================================================================ */ /* ================================================================ */
  45. 45. /* ================================================================ */ /* ================================================================ */ /* OutSystems UI Web */ /* $0 - Root - CSS Variables */ /* $1 - Resets */ /* $2 - HTML Elements */ /* $2.1 - HTML Elements - Links */ /* ........ */ /* $3 - Page Layout */ /* $4 - Patterns */ /* $4.1 - Patterns - Content */ /* $4.1.1 - Patterns - Content - Accordion */ /* $4.1.2 - Patterns - Content - Alert */ /* ........ */ /* $4.2 - Patterns - Controls */ /* $4.3 - Patterns - Data */ /* $6 - Utilities */ /* $6.1 - Utilities - Typography */ / $6.2 - Utilities - Colors /* ================================================================ */ /* ================================================================ */
  46. 46. /* ================================================================ */ /* ================================================================ */ /* OutSystems UI Web */ /* $0 - Root - CSS Variables */ /* $1 - Resets */ /* $2 - HTML Elements */ /* $2.1 - HTML Elements - Links */ /* ........ */ /* $3 - Page Layout */ /* $4 - Patterns */ /* $4.1 - Patterns - Content */ /* $4.1.1 - Patterns - Content - Accordion */ /* $4.1.2 - Patterns - Content - Alert */ /* ........ */ /* $4.2 - Patterns - Controls */ /* $4.3 - Patterns - Data */ /* $6 - Utilities */ /* $6.1 - Utilities - Typography */ / $6.2 - Utilities - Colors /* ================================================================ */ /* ================================================================ */
  47. 47. 35 font-family
  48. 48. +100 Universal Selector (*)
  49. 49. ~200 IDs ~100 Elements + Classes
  50. 50. ~400 !important
  51. 51. .slider__products {} .colorred {} .menu_section {} .HeroHome {} Naming
  52. 52. .slider-products {} .color-red {} .menu-section {} .hero-home {} Naming
  53. 53. .tabs-heading { margin-left: 10px; margin-right: 10px; } .tabs-heading { margin-left: 10px; margin-right: 10px; } Indentation
  54. 54. .tabs .inner { width:100%; } .tabs .inner { width: 100%; } Spacing
  55. 55. .menu-list a { font-size: .8889em; vertical-align: middle; color: #9b9b9b; font-size: 1em; height: 60px; line-height: 1.375em; padding: 0 20px; height: 40px; } What’s wrong?
  56. 56. .menu-list a { font-size: .8889em; vertical-align: middle; color: #9b9b9b; font-size: 1em; height: 60px; line-height: 1.375em; padding: 0 20px; height: 40px; } What’s wrong?
  57. 57. .menu-list a { color: #9b9b9b; font-size: .8889em; font-size: 1em; height: 40px; height: 60px; line-height: 1.375em; padding: 0 20px; vertical-align: middle; } Alphabetical Order
  58. 58. .menu-list a { color: #9b9b9b; font-size: .8889em; font-size: 1em; height: 40px; height: 60px; line-height: 1.375em; padding: 0 20px; vertical-align: middle; } Alphabetical Order
  59. 59. .menu-list a { color: #9b9b9b; font-size: 1em; height: 60px; line-height: 1.375em; padding: 0 20px; vertical-align: middle; } Alphabetical Order
  60. 60. .menu-list a { font-size: 1em; } .menu-list a { font-size: 1em; } Spacing
  61. 61. .heading-1, .heading-2 { color: red; } .heading-1, .heading-2 { color: red; } Spacing
  62. 62. .text__right { text-align: right; font-size: 24px; font-weight: bold; color: #ececec; padding-right: 20px; } Purpose
  63. 63. .Button { padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; } .Button { padding: 20px; } .Button { padding: 20px 30px; } Shortand
  64. 64. .header .Button { padding: 0px; } .header .Button { padding: 0; } Zeros
  65. 65. .Button { opacity: 0.7; } .Button { opacity: .7; } Zeros
  66. 66. .element { -webkit-transform: translateX(0); transform: translateX(0); } Vendor Prefixes
  67. 67. CSS Methodology
  68. 68. Block Element Modifier
  69. 69. .card {} Block
  70. 70. .card-title {} .card-content {} .card-footer {} Element
  71. 71. .background-blue {} Modifier
  72. 72. .background-red {} Modifier
  73. 73. Motivation to write CSS Project time
  74. 74. CSS Custom Properties
  75. 75. $color-primary: #51ab83; .heading-1 { color: $color-primary; } SASS Variable
  76. 76. @color-primary: #51ab83; .heading-1 { color: @color-primary; } Less Variable
  77. 77. --color-primary: #51ab83; .heading-1 { color: var(--color-primary); } CSS Variable
  78. 78. $breakpoint-phone: 375px; $color-phone: #222; $element-phone: “.element-phone”; @media screen and (min-width: $breakpoint-phone) { #{$element-phone} { color: $color-phone; } } Preprocessors Declaration
  79. 79. :root { --font-size-h1: 32px; } CSS Variable Declaration
  80. 80. var element = document.getElementById('element'); element.style.setProperty('--font-size-h1', ’32px’ ); CSS Variable in JavaScript
  81. 81. .heading-1 { font-size: 42px; font-size: var(--font-size-h1); } CSS Variable Fallback
  82. 82. .heading-1 { font-size: var(--font-size-h1), 42px; } CSS Variable Fallback
  83. 83. Flexbox
  84. 84. <table> <tr> <th> Firstname </th> </tr> <tr> <td> Jill </td> </tr> </table>
  85. 85. .side-menu { float: left; } .main-content { float: right; }
  86. 86. .flex { display: flex; } <div class="flex"> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> </div>
  87. 87. .flex { display: flex; } <div class="flex"> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> </div>
  88. 88. Flexbox in OutSystems UI
  89. 89. .flex { display: flex; flex-direction: row; }
  90. 90. .flex { display: flex; flex-direction: column; }
  91. 91. .flex { display: flex; flex-direction: row; justify-content: flex-start; }
  92. 92. .flex { display: flex; flex-direction: row; justify-content: flex-end; }
  93. 93. .flex { align-items: flex-start; display: flex; flex-direction: row; justify-content: flex-start; }
  94. 94. .flex { align-items: flex-end; display: flex; flex-direction: row; justify-content: flex-start; }
  95. 95. .flex { align-items: center; display: flex; flex-direction: row; justify-content: center; }
  96. 96. .flex { display: flex; } .flex-item { flex: 1; }
  97. 97. Every single line of code should look like it was written by a single person, no matter how many people wrote it.
  98. 98. Motivation to write CSS Project time
  99. 99. Thank You!

×