master-wiki/Read Later/2023-10-14 - Using CSS custom properties like this is a waste - YouTube.md
aleidk 7437d8e57c Update from obsidian - thinkpad
Affected files:
.obsidian/plugins/dataview/data.json
.obsidian/plugins/obsidian-omnivore/data.json
Read Later/2023-10-14 - Using CSS custom properties like this is a waste - YouTube.md
Read Later/2023-10-14 - You Don’t Actually Want Open World Games - YouTube.md
Read Later/2023-10-15 - Highlighting fold text, community fork of null-ls, leetcode integration, reduce ram ....md
Read Later/2023-10-18 - The Unreasonable Effectiveness Of Plain Text.md
Read Later/2023-10-21 - How Game Reviews Actually Affect You.md
Read Later/2023-10-23 - Study shows stronger brain activity after writing on paper than on tablet or smartph....md
Read Later/2023-10-23 - Train Your Brain to Be More Creative.md
Read Later/2023-10-25 - Let's Get Webby! 🦀 🕸️.md
Read Later/2023-10-25 - What the Rust Book didn't tell you about testing....md
Read Later/2023-10-31 - Use cases for Rust.md
Read Later/2023-11-01 - Why Signals Are Better Than React Hooks.md
Read Later/2023-11-02 - The First Rule of Comments in Code.md
Read Later/2023-11-02 - Web Accessibility Tips for Developers – A11y Principles Explained.md
Read Later/2023-11-04 - Git Merge vs Rebase vs Squash ¿Qué estrategia debemos elegir-.md
Read Later/2023-11-06 - How to Write Components that Work in Any Framework.md
Read Later/2023-11-07 - How to Avoid Prop Drilling in React.md
Read Later/2023-11-10 - The Complete Guide to Time Blocking.md
Read Later/2023-11-14 - The one thing you need to finish your game.md
Read Later/2023-11-21 - Career Mistakes to Avoid as a Developer.md
Read Later/2023-11-21 - Conventional Commits.md
Read Later/2023-11-21 - How to Write Better Git Commit Messages – A Step-By-Step Guide.md
Read Later/2023-11-21 - The Life-Changing Magic of Tidying Up Your To-Do List.md
Read Later/2023-11-21 - tbaggery - A Note About Git Commit Messages.md
Read Later/2023-12-24 - Historias de usuario - Ejemplos y plantilla - Atlassian.md
Read Later/2023-12-24 - ¿Qué son los puntos de historia en la metodología ágil y cómo se estiman-.md
Read Later/2024-02-15 - React Optimization Techniques to Help You Write More Performant Code.md
Read Later/How to Learn Rust.md
Read Later/The Secret Power of ‘Read It Later’ Apps.md
2024-02-17 16:23:43 -03:00

46 lines
No EOL
4.4 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
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 dont take advantage of how awesome they are. They set them up in the :root and thats 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