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

SV

@sebastianvescance

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.

Avatar

@angelsalvador

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

@angelsalvador

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

SV

@sebastianvescance

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

Avatar

@angelsalvador

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

@renealexanderriosgutierrez

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...

Recuerdainiciar sesiónpara participar en la comunidad.