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

1. Hardcore CSS Made Easy

2. José
Rosário
Front End Software Engineer | OutSystems
R&D
@
in
jose.rosario@outsystems.com
/joserosario
@JoseRosario95
@jose.rosario

3. codepen.io/JoseRosario/

4. CSS
Basics
Best
Practices
CSS
Methodology
CSS
Variables
CSS
Flexbox

5. Motivation
to write CSS
Project time

6. .heading-small {
/* styles here */
}
input {
/* styles here */
}
.Button {
/* styles here */
}
.Title__Black {
/* styles here */
}
.Card_Title {
/* styles here */
}

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. Every single line of code should look like it was
written by a single person, no matter how many
people wrote it.

9. !important

10. Every single line of code should look like it was
written by a single person, no matter how many
people wrote it.

11. CSS Basics

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. .div {
background-color: red;
}
CSS Rule Set

14. .div {
background-color: red;
}
Selector

15. div {
background-color: red;
}
Element Selector

16. div {
background-color: red;
}
Element Selector
1

17. #div {
background-color: red;
}
100
ID Selector

18. .div {
background-color: red;
}
10
Class Selector

19. input[type=”text”] {
background-color: red;
}
10
Attribute Selector

20. .div::hover {
background-color: red;
}
10
Pseudo Class Selector

21. .div::before {
content: ‘New Product’;
}
10
Pseudo Element Selector

22. 1
Elements
100
IDs
10
Classes

23. #box {
background-color: red;
}
.box {
background-color: blue;
}
?
Specificity

24. /* 100 Points */
#box {
background-color: red;
}
/* 10 Points */
.box {
background-color: blue;
}
Specificity

25. ?
Specificity
.box {
background-color: red;
}
div.box {
background-color: blue;
}

26. Specificity
/* 10 Points */
.box {
background-color: red;
}
/* 1 Point + 10 Points */
div.box {
background-color: blue;
}

27. Specificity
.box {
background-color: red;
}
.box {
background-color: green;
}
?

28. Specificity
/* 10 Points */
.box {
background-color: red;
}
/* 10 Points */
.box {
background-color: green;
}

29. Inline Styles

30. 1000
Inline Styles

31. !important

32. .div {
background-color: red;
}
Selector

33. .div {
background-color: red;
}
Declaration

34. .div {
background-color: red;
}
Rules

35. .div {
background-color: red;
}
Properties

36. .div {
background-color: red;
}
Values

37. CSS Rule Set
.div {
background-color: red;
}
Selector Declaration
Property Value

38. Best Practices &
Conventions

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. /* ================================================================ */
/* ================================================================ */
/* 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. /* ================================================================ */
/* ================================================================ */
/* 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. /* ================================================================ */
/* ================================================================ */
/* 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. /* ================================================================ */
/* ================================================================ */
/* 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
/* ================================================================ */
/* ================================================================ */

48. /* ================================================================ */
/* ================================================================ */
/* 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
/* ================================================================ */
/* ================================================================ */

49. /* ================================================================ */
/* ================================================================ */
/* 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
/* ================================================================ */
/* ================================================================ */

50. /* ================================================================ */
/* ================================================================ */
/* 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
/* ================================================================ */
/* ================================================================ */

51. 35
font-family

52. +100
Universal Selector (*)

53. ~200
IDs
~100
Elements + Classes

54. ~400
!important

55. .slider__products {}
.colorred {}
.menu_section {}
.HeroHome {}
Naming

56. .slider-products {}
.color-red {}
.menu-section {}
.hero-home {}
Naming

57. .tabs-heading {
margin-left: 10px;
margin-right: 10px;
}
.tabs-heading {
margin-left: 10px;
margin-right: 10px;
}
Indentation

58. .tabs .inner {
width:100%;
}
.tabs .inner {
width: 100%;
}
Spacing

59. .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?

60. .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?

61. .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

62. .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

63. .menu-list a {
color: #9b9b9b;
font-size: 1em;
height: 60px;
line-height: 1.375em;
padding: 0 20px;
vertical-align: middle;
}
Alphabetical Order

64. .menu-list a
{
font-size: 1em;
}
.menu-list a {
font-size: 1em;
}
Spacing

65. .heading-1, .heading-2 {
color: red;
}
.heading-1,
.heading-2 {
color: red;
}
Spacing

66. .text__right {
text-align: right;
font-size: 24px;
font-weight: bold;
color: #ececec;
padding-right: 20px;
}
Purpose

67. .Button {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}
.Button {
padding: 20px;
}
.Button {
padding: 20px 30px;
}
Shortand

68. .header .Button {
padding: 0px;
}
.header .Button {
padding: 0;
}
Zeros

69. .Button {
opacity: 0.7;
}
.Button {
opacity: .7;
}
Zeros

70. .element {
-webkit-transform: translateX(0);
transform: translateX(0);
}
Vendor Prefixes

71. CSS Methodology

72. Block
Element
Modifier

73. .card {}
Block

74. .card-title {}
.card-content {}
.card-footer {}
Element

75. .background-blue {}
Modifier

76. .background-red {}
Modifier

77. Motivation
to write CSS
Project time

78. CSS Custom Properties

80. $color-primary: #51ab83;
.heading-1 {
color: $color-primary;
}
SASS Variable

81. @color-primary: #51ab83;
.heading-1 {
color: @color-primary;
}
Less Variable

82. --color-primary: #51ab83;
.heading-1 {
color: var(--color-primary);
}
CSS Variable

83. $breakpoint-phone: 375px;
$color-phone: #222;
$element-phone: “.element-phone”;
@media screen and (min-width: $breakpoint-phone) {
#{$element-phone} {
color: $color-phone;
}
}
Preprocessors Declaration

84. :root {
--font-size-h1: 32px;
}
CSS Variable Declaration

85. var element = document.getElementById('element');
element.style.setProperty('--font-size-h1', ’32px’ );
CSS Variable in JavaScript

86. .heading-1 {
font-size: 42px;
font-size: var(--font-size-h1);
}
CSS Variable Fallback

87. .heading-1 {
font-size: var(--font-size-h1), 42px;
}
CSS Variable Fallback

89. Flexbox

90. <table>
<tr>
<th> Firstname </th>
</tr>
<tr>
<td> Jill </td>
</tr>
</table>

91. .side-menu {
float: left;
}
.main-content {
float: right;
}

92. .flex {
display: flex;
}
<div class="flex">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>

93. .flex {
display: flex;
}
<div class="flex">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>

94. Flexbox in OutSystems UI

95. .flex {
display: flex;
flex-direction: row;
}

96. .flex {
display: flex;
flex-direction: column;
}

97. .flex {
display: flex;
flex-direction: row;
justify-content: flex-start;
}

98. .flex {
display: flex;
flex-direction: row;
justify-content: flex-end;
}

99. .flex {
align-items: flex-start;
display: flex;
flex-direction: row;
justify-content: flex-start;
}

100. .flex {
align-items: flex-end;
display: flex;
flex-direction: row;
justify-content: flex-start;
}

101. .flex {
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
}

102. .flex {
display: flex;
}
.flex-item {
flex: 1;
}

103. Every single line of code should look like it was
written by a single person, no matter how many
people wrote it.

104. Motivation
to write CSS
Project time

105. Thank You!