---
id: 23360258-5e55-4f51-ae84-83f073539aef
title: |
  Using CSS custom properties like this is a waste - YouTube
status: ARCHIVED
tags:
  - read-later
  - Youtube
date_added: 2023-10-14 20:11:15
url_omnivore: |
  https://omnivore.app/me/using-css-custom-properties-like-this-is-a-waste-you-tube-18b30754bdc
url_original: |
  https://m.youtube.com/watch?index=12&list=WL&pp=gAQBiAQB&v=_2LwjfYc1x8
---

# Using CSS custom properties like this is a waste - YouTube

## Notes

Definir _"variables locales"_ en la clase más alta de un _componente_ (Ej: ˋ.cardˋ), esta variable se puede utilizar para hacer variantes del componente de manera más rápida y limpia y se puede utilizar en los decendientes de la clase.

Esto tiene la ventaja de:
1. Para crear una variante de nuestro componente solo debemos crear una nueva clase y añadirla junto a la clase más alta (ˋ.card-successˋ), y ya solo debemos sobre escribir las variables en vez de tener que actualizar cada parte del componente (ˋ.card.card-success .buttonˋ & ˋ.card.card-success .card-header h3ˋ).
2. Si tenemos propiedades complejas o animaciones donde solo varia una parte de ellas (Ej: ˋdrop-shadowˋ) no tenemos que re-escribir en cada variante la propiedad completa.

## Original

![](https://proxy-prod.omnivore-image-cache.app/0x0,sQQWw6iRP7foFYzYmrRdXk9An2XA-R-aURCV45HDFUPA/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMjE2IiBoZWlnaHQ9IjQyNSIgdmlld0JveD0iMCAwIDIyMTYgNDI1IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMjg3LjYyIDQxNi4yNUMzNzcuNzQgNDE2LjA1IDQ4Mi4wNyA0MTIuODAgNTEzLjc0IDQwNC4wN0M1MzguMDkgMzk3LjU4IDU1Ni45NyAzNzguNzAgNTYzLjQ3IDM1NC4xNEM1NzIuMTkgMzIyLjQ4IDU3NS42NCAyNjIuMzkgNTc1Ljg1IDIxNC45MEM1NzUuNjQgMTY3LjgxIDU3Mi4xOSAxMDcuOTMgNTYzLjQ3IDc2LjY3QzU1Ni45NyA1MS45MCA1MzguMyAzMy4yMyA1MTMuNzQgMjYuNzNDNDgyLjA3IDE4LjAxIDM3Ny43NCAxNC41NiAyODcuNjIgMTQuMzVDMTk3LjcwIDE0LjU2IDkzLjU3IDE4LjAxIDYyLjExIDI2LjczQzM3Ljc1IDMzLjIzIDE4Ljg3IDUyLjExIDExLjk3IDc2LjY3QzMuNDUgMTA3LjkzIC4yMCAxNjcuODEgMCAyMTQuOTBDMC4yMCAyNjIuMzkgMy40NSAzMjIuNDggMTEuOTcgMzU0LjE0QzE4Ljg3IDM3OC41MCAzNy45NSAzOTcuNTggNjIuMTEgNDA0LjA3QzkzLjU3IDQxMi44MCAxOTcuNzAgNDE2LjA1IDI4Ny42MiA0MTYuMjVaTTIzMi4wMCAxMzEuNjdMMzc2LjMyIDIxNC45MEwyMzIuMDAgMjk4LjczVjEzMS42N1oiIGZpbGw9IndoaXRlIiAvPjxwYXRoIGQ9Ik03MzEuNTUgNDI1VjBIODYyLjYxVjcxLjg3SDgxNC45NVYxNzVIODU2LjMzVjI0Ni4yNUg4MTQuOTVWNDI1SDczMS41NVpNODc4LjczIDQyNVYwSDk2MS41MVY0MjVIODc4LjczWk05ODAuNjEgNDI1VjBIMTExMS42N1Y3MS44N0gxMDY0LjAyVjE3NUgxMTA1LjRWMjQ2LjI1SDEwNjQuMDJWNDI1SDk4MC42MVpNMTE1NS40MSA0MjVWNzEuODdIMTEyNC42N1YwSDEyNjkuNTNWNzEuODdIMTIzOC43OVY0MjVIMTE1NS40MVpNMTMzMC41NiA0MjVWMjc3LjUwTDEyODEuMDMgMEgxMzYyLjU2TDEzNzIuNTkgMTczLjc0SDEzNzMuODRMMTM4NS43NSAwSDE0NjUuMzlMMTQxNC42IDI3Ni4yNFY0MjQuOThIMTMzMC41NlY0MjVaTTE1NTcuMTUgNDI1VjBIMTY0My42OEMxNzAwLjEzIDAgMTczMy4zNiAzNC4zNyAxNzMzLjM2IDg5LjM3VjMzNi4yNEMxNzMzLjM2IDM5MS4yNCAxNjk5LjUgNDI1IDE2NDMuNjggNDI1SDE1NTcuMTVaTTE3NTEuNDkgNDI1VjBIMTg3OS40MlY3MS44N0gxODM0LjkxVjE3NUgxODc0LjRWMjQ2LjI1SDE4MzQuODlWMzUzLjc0SDE4NzkuNDFWNDI1SDE3NTEuNDlaTTE4OTYuMjQgNDI1VjBIMjAyNC4xN1Y3MS44N0gxOTc5LjY1VjE3NUgyMDE5LjE0VjI0Ni4yNUgxOTc5LjY1VjM1My43NEgyMDI0LjE3VjQyNUgxODk2LjI0Wk0yMDQwLjk4IDQyNVYwSDIxMzAuNjVDMjE5Ny4xMyAwIDIyMTUuOTQgMjkuOTkgMjIxNS45NCA4OS45OVYxNjkuMzdDMjIxNS45NCAyMzEuMjQgMjE5Mi4xMSAyNjEuODcgMjEyNy41MyAyNjEuODdIMjEyNC4zOVY0MjVIMjA0MC45OFoiIGZpbGw9IndoaXRlIiAvPjwvc3ZnPg==)

0:02 / 16:11•Watch full video

[![](https://proxy-prod.omnivore-image-cache.app/40x0,sUOpLNtzeeUoCYwskk1a5QzW3BGsoVGnMK_ykZEtZE5c/https://yt3.ggpht.com/ytc/APkrFKa6XiLa13mMVPzkmmTBcgNPjjqCGPrY86KfJFmf5w=s48-c-k-c0x00ffffff-no-rj)](https://m.youtube.com/@KevinPowell) 

45K views 2 days ago [#css](https://m.youtube.com/hashtag/css) 

If you're interested in checking out ICodeThis, you can find it here: [https://icodethis.com/?ref=kevin](https://www.youtube.com/redirect?event=video%5Fdescription&redir%5Ftoken=QUFFLUhqbVZsbWpVZ3M1NUdacFdJSVZha3BFQ0ZIaTNoZ3xBQ3Jtc0ttWG5nU0ltOTdzSE9YSDQ3aWlsUVFGcEVoMlRFaVhLb0hrczRKRVgta3N0bXBIeC1Sc1ZtTWJHY2MycUpfdVN6OE5pWDlfTG9WQlhTMlRzcW1YX2p1MTY4bjVybTd1ZG02RV9zM1l0QkFWeTNybjBtcw&q=https%3A%2F%2Ficodethis.com%2F%3Fref%3Dkevin&v=%5F2LwjfYc1x8) and if you want to sign up for one of their premium plans, use KEVIN at checkout for an extra 10% off. Custom properties are amazing, but a lot of people don’t take advantage of how awesome they are. They set them up in the :root and that’s it, but they can be so much more useful than that! So, in this …

...more

...more 

 45,645 views • Oct 12, 2023 • #css

#### License 

Shop the Kevin Powell store