https://takao.blog/es/tags/custom-properties/Recent content in Custom-Properties on Commentary of TakaoHugo -- gohugo.ioesCommentary of TakaoSun, 12 Jul 2026 04:12:51 +0900https://takao.blog/es/web/css-custom-properties/Tue, 09 Apr 2024 00:00:00 +0900https://takao.blog/es/web/css-custom-properties/<img src="https://takao.blog/img/thumbnail/css-custom-properties-es.png" alt="Featured image of post Propiedades personalizadas CSS: Patrones estratégicos para estilos escalables" /><p>CSS Custom Properties (variables CSS) han cambiado fundamentalmente cómo escribimos y mantenemos hojas de estilo. A diferencia de las variables de preprocesadores, son dinámicas, participan en la cascada y la herencia.</p> <h2 id="gestión-de-design-tokens">Gestión de design tokens </h2><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>:<span style="color:#a6e22e">root</span> { --color-primary-500: <span style="color:#ae81ff">#3b82f6</span>; --space-md: <span style="color:#ae81ff">1</span><span style="color:#66d9ef">rem</span>; --font-sans: <span style="color:#e6db74">&#34;Inter&#34;</span>, system-ui, <span style="color:#66d9ef">sans-serif</span>; } </span></span></code></pre></div><p>Usa nomenclatura BEM-inspirada: <code>--bloque__elemento--modificador</code> para tokens de componente y <code>--categoria-propiedad-variante</code> para globales.</p> <h2 id="cambio-de-tema">Cambio de tema </h2><p>Define tema claro en <code>:root</code> y sobreescribe en <code>[data-theme=&quot;dark&quot;]</code>. Añade <code>prefers-color-scheme</code> para respetar la preferencia del sistema.</p>