Estoy construyendo con Web Component sin ningún marco de terceros.
Y tengo <button> vainilla en varios de mis componentes, y tengo que restablecer CADA UNO de ellos antes de hacer mi estilo personalizado en ellos porque restablecerlo una vez en un nivel raíz no funciona ya que las propiedades involucradas no son una de estilos heredables que atraviesan shadow dom:
button { appearance: none; background: none; border: none; ... }¿Cuál creen que es la mejor forma actual y ampliamente respaldada para evitar esta repetición?
He mirado las Hojas de Estilo Construibles , pero no es compatible con Firefox, que es mi navegador principal. También consideré las propiedades personalizadas de CSS, pero eso aún conduciría a la repetición de propiedades de background , border , etc. en todas partes, ¿verdad?
Las hojas de estilo construibles están diseñadas para abordar, entre otros, exactamente este problema que está teniendo.
Ha habido soporte experimental para hojas de estilo construibles en Firefox desde la versión 73 (febrero de 2020) . No estoy seguro de por qué no ha dejado el estado de función experimental durante más de 2 años.
Puede habilitarlo configurando layout.css.constructable-stylesheets.enabled en true en about:config .
Hasta que ya no sea experimental, puede usar unpolyfill .
Lo siguiente que lo ayudará a reducir la redundancia se llama CSS Module Scripts . De esa página:
Deduplicación: si el mismo archivo CSS se importa desde varios lugares en una aplicación, solo se obtendrá, instanciará y analizará una sola vez.
Desafortunadamente, eso tampoco ha aterrizado en Firefox todavía (vea este error de seguimiento ), pero ya está en la especificación .
Pero si digo css de viento de cola con reactjs. Reactjs especialmente diseñado para eliminar la repetición. Consulte los documentos de Tailwind donde incluso puede asignar su función CSS personalizada para cualquier cosa.