More and more, CSS can do new things natively, maybe some things that we started to do with some CSS preprocessor. That's not bad, but things have changed and we should take the chance of the new CSS improvements like Custom Properties. My aim in this talk is to review a new CSS architecture prototype we'll implement in some of our sites, such as Fotocasa, MilAnuncios, InfoJobs or Coches.net.

1. Custom Properties
Long Live CSS!
by Kiko Ruiz (Front End Developer Motor)
Custom properties
Long Live CSS!
by Kiko Ruiz (Front End Developer Motor)
Custom Properties
Long Live CSS!
by Kiko Ruiz (Front End Developer Motor)

2. CSS preprocessors
did the job

3. We l❤ved SassWe l❤ved SassWe l❤ved Sass

4. We l❤ved SassWe l❤ved Sass

5. But we can do things
with CSS
But we can do things
with CSS

6. But we can do things
with CSS
But we can do things
in the browser

7. Custom properties
to the rescue 🚀
Custom Properties
to the rescue 🚀

8. • Variables in the client side 🤟
• Dynamic variables
• Focus on responsive design
• Same scope like CSS properties
Custom Properties
to the rescue 🚀

9. In the client side
means in runtime

10. .sui-Link {
--color: #fff;
color: var(--color);
}
.sui-Link:hover {
--color: #ccc;
}
.sui-Link {
--color: #fff;
color: var(--color);
}
.sui-Link:hover {
--color: #ccc;
}

11. Dynamic because
they know
the DOM tree

12. .sui-Card {
--flex-direction: column;
display: flex;
flex-direction: var(--flex-direction);
}
@media screen and (min-width: 600px) {
.sui-Card {
--flex-direction: row;
}
}
.sui-Card {
--flex-direction: column;
display: flex;
flex-direction: var(--flex-direction);
}
@media screen and (min-width: 600px) {
.sui-Card {
--flex-direction: row;
}
}

13. document
.querySelectorAll('.sui-Card')
.forEach(suiCard =>
suiCard
.style
.setProperty('--flex-direction', 'row')
)

14. Focus on responsive
design is thinking
mobile first

15. Every component
has its initial state,
then their
behaviours

16. .sui-Card {
--background-color: #fff;
--flex-direction: column;
background-color: var(--background-color);
display: flex;
flex-direction: var(--flex-direction);
}
.sui-Card {
--background-color: #fff;
--flex-direction: column;
.sui-Card {

17. .sui-Card {.sui-Card {
background-color: var(--background-color, #fff);
display: flex;
flex-direction: var(--flex-direction, column);
}

18. .sui-Card {.sui-Card {
background-color: var(--background-color, #fff);
display: flex;
flex-direction: var(--flex-direction, column);
}
Initial state

19. .sui-Card:hover {
--background-color: #ccc;
}
@media screen and (min-width: 600px) {
.sui-Card {
--flex-direction: row;
}
}

20. .sui-Card:hover {
--background-color: #ccc;
}
@media screen and (min-width: 600px) {
.sui-Card {
--flex-direction: row;
}
}
Behaviours

21. Block scope,
inheritance and
specificity

22. <div class="sui-Card">
<header class="sui-Card-header">
<h3 class="sui-Card-title">Title</h3>
</header>
</div>

23. :root {
--padding: 30px;
}
.sui-Card .sui-Card-header {
--padding: 12px;
}
.sui-Card-title {
padding: var(--padding);
--padding: 6px;
}

24. :root {
--padding: 30px;
}
.sui-Card .sui-Card-header {
--padding: 12px;
}
.sui-Card-title {
padding: var(--padding);
--padding: 6px;
}
:root {
--padding: 30px;
}
.sui-Card .sui-Card-header {
--padding: 12px;
}
.sui-Card-title {
padding: var(--padding);
--padding: 6px;
}

25. CSS preprocessors
can still help $
CSS preprocessors
can help still $

26. • Object-oriented styles
• Static variables
• Work together
CSS preprocessors
can help still $

27. Object-oriented
styles help us to
maintain code
Object-oriented
styles help us to
maintain

28. Object-oriented
styles help us to
understand
Object-oriented
styles help us to
maintain code

29. .sui-Link {
--color: #fff;
color: var(--color);
&:hover {
--color: #ccc;
}
.sui-Link {
--color: #fff;
color: var(--color);
.sui-Link:hover {
-
}
}

30. Static means
not in runtime

31. We should change
values, not
variables

32. $c-link: #fff;
$c-link-hover: #ccc;
.sui-Link {
color: var(--color, #{$c-link});
} &:hover {
--color: #{$c-link-hover};
}
}

33. Final thoughts
can help
CSS preprocessors
and conclusions 🗣

34. • Not supported by IE11 🤭
• Operations with calc()
• Easy theming from the client side
• Better define a clear good practices
• Think outside the box
Final thoughts
can help

35. Questions?

36. CSS
IS
AWESOME