Por qué aplican varios estilos a un solo elemento???

SV

En qué casos un elemento podría tener varios estilos y por qué hacen esto, yo en lo personal solamente le aplico un solo estilo a un determinado elemento o el mismo estilo a varios elementos me parece sin sentido aplicarle estilos diferentes a un solo elemento, espero me ayude alguien a encontrarle sentido si lo tiene gracias.

5respuestas
Avatar

El tema es la reusabilidad, evitar crear el mismo código una y otra vez.

Si un div necesita que su contenido este de color rojo y con un background gris por ejemplo, luego tienes otro elemento span que también requiere ese color y ese background, entonces la idea seria crear un estilo con esas 2 propiedades para usarlos en diferentes lugares y así evitas reescribir código.

Ejemplo de "un solo estilo determinado a un elemento"

<div class="divstyle">hola soy un div</div>
<span class="spanstyle">hola soy un span</span>
.divstyle{
   background-color: grey;
   color: red;
   width: 200px;
   height: 100px;
   margin-bottom: 10px;
}

.spanstyle{
   background-color: grey;
   color: red;
   width: 250px;
   height: 150px;
}

Ejemplo de "varios estilos a un elemento y reusando codigo"

<div class="divstyle colorstyle">hola soy un div</div>
<span class="spanstyle colorstyle">hola soy un span</span>
.divstyle{
   width: 200px;
   height: 100px;
   margin-bottom: 10px;
}

.spanstyle{
   width: 250px;
   height: 150px;
}

.colorstyle{
   background-color: grey;
   color: red;
}

Con el segundo caso, ya tienes una propiedad colorstyle que puedes reutilizar en cualquier elemento que necesite esas 2 propiedades de color.

Avatar

Al .spanstyle colocale la propiedad display:block para que adopte los tamaños del width y height. Se me pasó eso.

SV

gracias, una pregunta que utilizaste para escribir tu código un editor de código o algo diferente?

Avatar

Yo uso Visual Studio Code para programar. Ahora si te refieres a pegar el código aquí en el post, en la caja donde escribes algo hay un botón que es "</>"

Cuando le das ahí te van a aparecer 3 comillas al inicio y al final, al medio te aparece "language". Ahi colocas el lenguaje que estas usando "html, css, javascript, etc".Seguido le das un enter para que coloques todo el contenido dentro.

RR

uhm... es el estilo que tu crees conveniente segun tu y eres el dios de tu proyecto... PERO si al que le vendes tu proyecto el cliente dira algo como "pero me gustaria que esto tenga un color distinto y este de otro color y este y este y este..." te daras cuenta que si es conveniente la separacion de estilos... buscar la flexibilidad...

Necesitas iniciar sesión para responder.
¿En qué estamos trabajando?
Google Analytics Avanzado

Curso: Google Analytics Avanzado

Exprime al máximo los beneficios de usar Google Analytics para hacer crecer tu negocio o el de tus clientes.