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
José
Rosário
Front End Software Engineer | OutSystems
R&D
@
in
jose.rosario@outsystems.com
/joserosario
@JoseRosario95
@jo...
codepen.io/JoseRosario/
CSS
Basics
Best
Practices
CSS
Methodology
CSS
Variables
CSS
Flexbox
Motivation
to write CSS
Project time
.heading-small {
/* styles here */
}
input {
/* styles here */
}
.Button {
/* styles here */
}
.Title__Black {
/* styles h...
footer.main-footer-light .inner .footer--section:first-child{
/* styles here */
}
body.usecases .content-usecases-graphics...
Every single line of code should look like it was
written by a single person, no matter how many
people wrote it.
!important
Every single line of code should look like it was
written by a single person, no matter how many
people wrote it.
CSS Basics
<a class="button"> I’m a Button </a>
.button {
font-size: 20px;
background-color: blue;
height: 40px;
border-radius: 4px;
...
.div {
background-color: red;
}
CSS Rule Set
.div {
background-color: red;
}
Selector
div {
background-color: red;
}
Element Selector
div {
background-color: red;
}
Element Selector
1
#div {
background-color: red;
}
100
ID Selector
.div {
background-color: red;
}
10
Class Selector
input[type=”text”] {
background-color: red;
}
10
Attribute Selector
.div::hover {
background-color: red;
}
10
Pseudo Class Selector
.div::before {
content: ‘New Product’;
}
10
Pseudo Element Selector
1
Elements
100
IDs
10
Classes
#box {
background-color: red;
}
.box {
background-color: blue;
}
?
Specificity
/* 100 Points */
#box {
background-color: red;
}
/* 10 Points */
.box {
background-color: blue;
}
Specificity
?
Specificity
.box {
background-color: red;
}
div.box {
background-color: blue;
}
Specificity
/* 10 Points */
.box {
background-color: red;
}
/* 1 Point + 10 Points */
div.box {
background-color: blue;
}
Specificity
.box {
background-color: red;
}
.box {
background-color: green;
}
?
Specificity
/* 10 Points */
.box {
background-color: red;
}
/* 10 Points */
.box {
background-color: green;
}
Inline Styles
1000
Inline Styles
!important
.div {
background-color: red;
}
Selector
.div {
background-color: red;
}
Declaration
.div {
background-color: red;
}
Rules
.div {
background-color: red;
}
Properties
.div {
background-color: red;
}
Values
CSS Rule Set
.div {
background-color: red;
}
Selector Declaration
Property Value
Best Practices &
Conventions
/* ================================================================ */
/* ================================================...
/* ================================================================ */
/* ================================================...
/* ================================================================ */
/* ================================================...
/* ================================================================ */
/* ================================================...
/* ================================================================ */
/* ================================================...
/* ================================================================ */
/* ================================================...
/* ================================================================ */
/* ================================================...
/* ================================================================ */
/* ================================================...
35
font-family
+100
Universal Selector (*)
~200
IDs
~100
Elements + Classes
~400
!important
.slider__products {}
.colorred {}
.menu_section {}
.HeroHome {}
Naming
.slider-products {}
.color-red {}
.menu-section {}
.hero-home {}
Naming
.tabs-heading {
margin-left: 10px;
margin-right: 10px;
}
.tabs-heading {
margin-left: 10px;
margin-right: 10px;
}
Indentat...
.tabs .inner {
width:100%;
}
.tabs .inner {
width: 100%;
}
Spacing
.menu-list a {
font-size: .8889em;
vertical-align: middle;
color: #9b9b9b;
font-size: 1em;
height: 60px;
line-height: 1.37...
.menu-list a {
font-size: .8889em;
vertical-align: middle;
color: #9b9b9b;
font-size: 1em;
height: 60px;
line-height: 1.37...
.menu-list a {
color: #9b9b9b;
font-size: .8889em;
font-size: 1em;
height: 40px;
height: 60px;
line-height: 1.375em;
paddi...
.menu-list a {
color: #9b9b9b;
font-size: .8889em;
font-size: 1em;
height: 40px;
height: 60px;
line-height: 1.375em;
paddi...
.menu-list a {
color: #9b9b9b;
font-size: 1em;
height: 60px;
line-height: 1.375em;
padding: 0 20px;
vertical-align: middle...
.menu-list a
{
font-size: 1em;
}
.menu-list a {
font-size: 1em;
}
Spacing
.heading-1, .heading-2 {
color: red;
}
.heading-1,
.heading-2 {
color: red;
}
Spacing
.text__right {
text-align: right;
font-size: 24px;
font-weight: bold;
color: #ececec;
padding-right: 20px;
}
Purpose
.Button {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}
.Button {
padding: 20px;
}
....
.header .Button {
padding: 0px;
}
.header .Button {
padding: 0;
}
Zeros
.Button {
opacity: 0.7;
}
.Button {
opacity: .7;
}
Zeros
.element {
-webkit-transform: translateX(0);
transform: translateX(0);
}
Vendor Prefixes
CSS Methodology
Block
Element
Modifier
.card {}
Block
.card-title {}
.card-content {}
.card-footer {}
Element
.background-blue {}
Modifier
.background-red {}
Modifier
Motivation
to write CSS
Project time
CSS Custom Properties
$color-primary: #51ab83;
.heading-1 {
color: $color-primary;
}
SASS Variable
@color-primary: #51ab83;
.heading-1 {
color: @color-primary;
}
Less Variable
--color-primary: #51ab83;
.heading-1 {
color: var(--color-primary);
}
CSS Variable
$breakpoint-phone: 375px;
$color-phone: #222;
$element-phone: “.element-phone”;
@media screen and (min-width: $breakpoint-...
:root {
--font-size-h1: 32px;
}
CSS Variable Declaration
var element = document.getElementById('element');
element.style.setProperty('--font-size-h1', ’32px’ );
CSS Variable in Ja...
.heading-1 {
font-size: 42px;
font-size: var(--font-size-h1);
}
CSS Variable Fallback
.heading-1 {
font-size: var(--font-size-h1), 42px;
}
CSS Variable Fallback
Flexbox
<table>
<tr>
<th> Firstname </th>
</tr>
<tr>
<td> Jill </td>
</tr>
</table>
.side-menu {
float: left;
}
.main-content {
float: right;
}
.flex {
display: flex;
}
<div class="flex">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-i...
.flex {
display: flex;
}
<div class="flex">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-i...
Flexbox in OutSystems UI
.flex {
display: flex;
flex-direction: row;
}
.flex {
display: flex;
flex-direction: column;
}
.flex {
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.flex {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.flex {
align-items: flex-start;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.flex {
align-items: flex-end;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.flex {
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
}
.flex {
display: flex;
}
.flex-item {
flex: 1;
}
Every single line of code should look like it was
written by a single person, no matter how many
people wrote it.
Motivation
to write CSS
Project time
Thank You!
Hardcore CSS Made Easy
Hardcore CSS Made Easy
Hardcore CSS Made Easy
Hardcore CSS Made Easy
Hardcore CSS Made Easy
Hardcore CSS Made Easy
Upcoming SlideShare
Loading in …5
×

Hardcore CSS Made Easy

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

  • 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!

×