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

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

48.
+100
Universal Selector (*)

49.
~200
IDs
~100
Elements + Classes

50.
~400
!important

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

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

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

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

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.
.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.
.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.
.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.
.menu-list a {
color: #9b9b9b;
font-size: 1em;
height: 60px;
line-height: 1.375em;
padding: 0 20px;
vertical-align: middle;
}
Alphabetical Order

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

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

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

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

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

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

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

67.
CSS Methodology

68.
Block
Element
Modifier

69.
.card {}
Block

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

71.
.background-blue {}
Modifier

72.
.background-red {}
Modifier

73.
Motivation
to write CSS
Project time

74.
CSS Custom Properties

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

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

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

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.
:root {
--font-size-h1: 32px;
}
CSS Variable Declaration

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

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

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

83.
Flexbox

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

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

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

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

88.
Flexbox in OutSystems UI

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

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

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

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

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

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

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

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

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

98.
Motivation
to write CSS
Project time

99.
Thank You!