- What’s atomic CSS?
2
- How does it use?
- Which are its advantages and
disadvantages?
Slide 3
Slide 3 text
What’s atomic CSS?
A practice to define single-purpose
classes which names are based in
visual function.
More info https://css-tricks.com/lets-define-exactly-atomic-css/ 3
Slide 4
Slide 4 text
A card
4
Slide 5
Slide 5 text
A card
5
Slide 6
Slide 6 text
A card
6
Slide 7
Slide 7 text
Why?
7
Slide 8
Slide 8 text
Let’s see an
example with
Tailwind CSS
Slide 9
Slide 9 text
For default or all
Slide 10
Slide 10 text
For small devices
Slide 11
Slide 11 text
For middle devices
Slide 12
Slide 12 text
For large devices
Slide 13
Slide 13 text
For extra-large devices
Slide 14
Slide 14 text
Which are its advantages?
⬡ Easy to use and maintain.
⬡ Reusable css
⬡ It’s perfect to responsive web
design.
14
Slide 15
Slide 15 text
Which are its disadvantages?
⬡ It takes much time to implement.
⬡ Fill too much classes in HTML.
⬡ You must to learn a framework css.
15
Slide 16
Slide 16 text
“To resume:
16
More info https://medium.com/better-programming/functional-css-meet-tailwind-css-3897da4b63a2
Atomic css are
functionals css,
reuseable, easy to
use and maintain.
Slide 17
Slide 17 text
17
Thanks!
Any questions?
You can find me at:
@freddy_munive
[email protected]