0

En CSS me encuentro a menudo con una duda, al tener, por ejemplo las siguientes 2 clases con algunas de sus características compartidas pero otras no, que conviene mas, hacerlo de la FORMA1 o de la FORMA2? Notese "conviene", a todos los niveles: ejecución más rápida, por convención... Es decir si comparten algunas características conviene unir las dos clases para esas y luego declarar solo las características únicas O hacer las 2 clases por completo por separado?

    ---------------------------------------FORMA1-------------------------------------
.claseuno{
    display:flex;
    color:red;
    font-size:10rem;
    margin-top:20rem;
}

.clasedos{
    display:flex;
    color:red;
    font-size:33rem;
    margin-top:44rem;    
}

-------------------------------------FORMA2:---------------------------------

.claseuno,.clasedos{
    display:flex;
    color:red;
    font-size:10rem;
    margin-top:20rem;
}

.clasedos{
    font-size:33rem;
    margin-top:44rem;    
}

GRACIAS!

3 respuestas 3

2

MI OPINION: No pierdas ni un minuto en esto. Es mejor que sea intuitivo y facil de leer que no "superOptimizado a este nivel".

Te pongo un ejemplo:

CSS de Bootstrap

Ahí vemos 6.700 línas de codigo css. Simplemente echa un vistazo si quieres, i evidentemente se repiten atributos para varias clases. Por que si no sería una locura de subclases con atributos semejantes.. etc.

Pero lo que quiero decir es: 6.700 línas de codigo son 163kb de peso. Osea que no importa nada la mínima posible optimización de este nivel.

Por que en el mejor de los casos vas a ahorrar 13kb de peso de archivos pero vas a perder 3 horas cuando quieras retocar una clase sin tocar las otras.

0

A mi parecer, entre las 2 formas que propones la más correcta es la primera. Es más mantenible en el tiempo, ya que cualquier cambio a .clasedos se realiza en un solo lugar. La segunda alternativa es una solución parche, algo que se hace para sobrescribir algo ya existente, digamos que uso bootstrap y quiero hacer pequeños cambios a una clase, bueno la piso y ya, no me voy a complicar compilándolo nuevamente por un par de líneas. Es decir, para mí, es solo un recurso de último minuto.

Técnicamente debería ser más rápido no pisar la instrucción, ya que es algo menos que debe validar el algoritmo de especificad. Pero en la práctica, a menos que el sitio sea un desastre, no debería haber diferencia alguna, pero yo he visto este problema en Wordpress con Elementor, donde se llega a pisar y pisar reglas de CSS a tal extremo que llega a notarse un pobre rendimiento

De todos modos, hay distintas visiones de cómo tratar el CSS. Y al menos 2 son bastantes contrapuestas. Están los que los que utilizan clase utilitarias, y en el HTML van colocando clases como si de un Lego de tratase, por ejemplo:

.clasecero{
    display:flex;
    color:red;
}
.claseuno{
    font-size:10rem;
    margin-top:20rem;
}
.clasedos{
    font-size:33rem;
    margin-top:44rem;    
}
<div class="clasecero claseuno"></div>
<div class="clasecero clasdos"></div>

La otra es pensar el problema en modo semántico, los elementos son componentes y representan "algo" visible. En lo personal prefiero esta manera, me obsesiona tener poco código en el HTML

.tarjeta{
    display:flex;
    color:red;
    font-size:10rem;
    margin-top:20rem;
}
.tabla{
    display:flex;
    color:red;
    font-size:33rem;
    margin-top:44rem;    
}

Aquí no importan si se repiten, porque conceptualmente tarjeta y tabla son cosas distintas e independientes entre sí, el día de mañana yo puedo querer cambiar una y no la otra. Y sé que cuando quiero cambiar el estilo de tarjeta tengo que ir a su clase y punto. Evidentemente, pueden existir elementos comunes que se relacionan con el -theme-, por ejemplo el color, tamaño de fuente e incluso márgenes, esto se manejan con variables var(--algo)

0

Agregando a lo que ya te respondieron, que está muy bien, cuando uso CSS puro y veo que estoy repitiendo muchas veces los mismos estilos tal que

.claseuno{
    display:flex;
    color:red;
    font-size:10rem;
    margin-top:20rem;
    background-color: black;
}

.clasedos{
    display:flex;
    color:red;
    font-size:33rem;
    margin-top:44rem;
    background-color: black;   
}

Lo que hago es hacer clases descriptivas que ayudan a entender mejor el estilo de un elemento, aunque pueda que se piense que es más código, yo lo veo al contrario, escribo una sola vez un estilo en el archivo CSS y lo puedo usar cuantas veces quiera.

Yo me fijo en Bootstrap y me parece aceptable esa forma de trabajo

.displayFlex{
    display:flex;
}
.colorRed{
    color:red;
}
.bgBlack{
    background-color: black;
}

Y me es más fácil manejarlo incluso hasta de memoria cuando doy estilos en el HTML

<div class="displayFlex bgBlack colorRed font100px"></div>

<div class="bgRed textCenter font10rem"></div>

Es como lo hace Bootstrap, solo que personalizado a mi manera.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.