Cuándo y por qué usar la etiqueta de estilo fuera de las hojas de estilo CSS

Las etiquetas de estilo son una parte bastante interesante del desarrollo web. Quiero decir, son fundamentales y básicos para el funcionamiento de la web actual, pero la mayoría de las veces, el estilo real de su sitio proviene de la importación y el uso de numerosas hojas de estilo CSS para temas, complementos y el aspecto cotidiano que ven sus visitantes.

Pero en los viejos tiempos de la creación de sitios web, podría usar etiquetas de estilo en el cuerpo del sitio web, y estaría bien. La mayoría, si no todo, el CSS de la página iría a la página misma, y ​​en aquel entonces… funcionó bien. Hoy en día, hay problemas con eso, por supuesto, como la velocidad de carga de la página y las órdenes de ejecución, y cuanto más crecen las tecnologías web maduras, menos a menudo desea usar etiquetas de estilo por su cuenta.

Sin embargo, hay momentos en los que querrás usarlos. A veces, mejoran su flujo de trabajo, mientras que otras instancias realmente mejoran la vida de sus usuarios: la optimización móvil, por ejemplo, o llamar su atención sobre un elemento específico a través de un estilo impresionante.

Uso típico de la hoja de estilo

En casi todos los sitios web de hoy, verá el estilo implementado de esta manera:

01
<link rel='stylesheet' id='divi-style-css'  href='/wp-content/themes/Divi-child-theme-01/style.css?ver=3.0.40' type='text/css' media='all' />

Si eres un miembro de Elegant Themes que usa Divi (¡ deberías serlo! ), eso abre la hoja de estilo completa de la que tomé este fragmento:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/*
Theme Name: Divi
Theme URI: https://www.elegantthemes.com/gallery/divi/
Version: 3.0.40
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Author: Elegant Themes
Author URI: https://www.elegantthemes.com
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/* Browser Reset */
 
body {
    line-height: 1;
}
 
ol,
ul {
    list-style: none;
}
 
blockquote,
q {
    quotes: none;
}
 
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}

Ahora, en teoría, podría poner eso en una etiqueta de estilo en el encabezado de cualquier página que escriba. Definitivamente funcionaría, pero esa es una codificación apestosa y no sirve para nada para las etiquetas de estilo.

Etiquetas de estilo, uso moderno

Por supuesto, su sitio web tiene hojas de estilo CSS como esas. Los vas a usar. Tiene custom.css y stylesheet.css y probablemente mucho más que eso. Ha averiguado exactamente cómo debería verse su sitio y está satisfecho con él.

Entonces, ¿por qué necesita las etiquetas de estilo?

Porque las hojas de estilo son soluciones generales. Una etiqueta de estilo es una solución a pequeña escala.

Las hojas manejan la mayor apariencia de su sitio, no los elementos individuales esenciales y los aspectos destacados especiales. A veces, es más trabajo de lo que vale incluir una sola pieza de código en una hoja de estilo.

Ahí es cuando las etiquetas de estilo realmente se vuelven útiles. Además, a veces es necesario modificar un solo elemento o elegir un estilo específico para ciertos dispositivos o casos de uso. Ahí es cuando las etiquetas de estilo realmente brillan en el desarrollo web moderno.

Una sola instancia de un elemento

Probablemente, la razón principal por la que usaría etiquetas de estilo en su sitio es si se trata de un único elemento único en su página. Puede ser una gran molestia (por muy poco o ningún retorno) incluir el estilo en un archivo CSS externo adjunto a la identificación de ese elemento. Sin embargo, lo que puede hacer es colocar una etiqueta de estilo en el elemento y continuar con su día.

Por ejemplo, si tiene un widget de la barra lateral que necesita una fuente especial, puede ponerlo en un div, darle al div una identificación de CSS y luego dirigirse a su hoja de cálculo para incluir algo tan simple como {font-family: «Exo» , Arial, sans-serif;} , pero eso es un montón de problemas.

¿La mejor opción sería simplemente hacer esto?

01
<div style="font-family: "Exo", Arial, sans-serif;" />

Bada-bing, bada-boom, has terminado y ese widget ahora se destaca porque es el único que tiene ese estilo particular. (Y sí, me doy cuenta de que usar una fuente nueva y diferente probablemente choca con el resto de su diseño. Pero es un ejemplo).

Una página simple

A veces, tiene una página muy simple y única en su sitio. Puede ser una página de inicio o una página de compresión . Probablemente solo necesite algunos ajustes en su estilo aquí, pero los necesita para aplicarlos a esta página, y solo a esta página.

Por lo tanto, puede usar la etiqueta !important, a menudo difamada , junto con el estilo para hacer las cosas de manera más rápida y fácil que crear una nueva hoja de estilo y vincularla. Este método se usa mejor si no tiene mucho CSS nuevo porque cargar montones de CSS como este puede ralentizar la carga de la página. Pero tu ya lo sabías.

Sin embargo, algo tan simple como esto no sería una carga demasiado grande para las conexiones de los usuarios y, sinceramente, no vale la pena agregarlo a una hoja de estilo. (Y para ser justos, este CSS es horrible y no vale la pena agregarlo a ningún sitio. ¡Je, je!)

01
02
03
04
05
06
07
08
09
10
11
<style>
h2, h3, h4 {
  font-family: "Exo", Arial, sans-serif!important;
  text-align: right;
    font-size: 2rem;
    color: blue;}
body, p {font-family: "Roboto", Arial, sans-serif!important;
  font-size: 1.2rem;
    color: red;
    background: #000;}
    </style>

El punto aquí, sin embargo, es que HTML 5 está bien si agrega etiquetas de estilo en el encabezado de su sitio web para que modifique las hojas de estilo existentes. Si bien las etiquetas !important definitivamente no son necesarias en este caso (rara vez lo son), siento que este es, tal vez, el único momento para usarlas porque no van a causar mucho espagueti de etiquetas como usted (o otros desarrolladores) comienzan a trabajar en el sitio porque solo se aplican a esta única página.

Múltiples tamaños de ventana gráfica

Las consultas de los medios son tus amigos. Si no está totalmente familiarizado con ellos, le sugiero que los lea . Básicamente, puede declarar qué parámetros deben cumplirse para que ciertos CSS surtan efecto. Sin embargo, utilizará esto principalmente para asegurarse de que sus sitios funcionen en diferentes dispositivos. Cuando necesite capacidad de respuesta en todo el sitio, eso irá en una hoja de estilo.

Pero nuevamente, si tiene una sola página o elemento que necesita que aparezca de manera diferente o que no aparezca en absoluto en dispositivos móviles (o incluso en resoluciones de escritorio más pequeñas o más grandes), puede hacerlo con etiquetas de estilo en el encabezado.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
<style>
@media (max-width: 767px) {
 
.white_text {
    color: #ffffff;
}
 
.blue_text {
    color: #cbe1f3;
}
 
.white_background {
    background-color: #ffffff;
}
 
.blue_background {
    background-color: #003663;
}
 
#email_form_a {
  display:none;
}
</style>

Estilismo y perfilado

CSS es una parte tan importante del desarrollo web ahora que es algo que casi todos deben saber y usar . E incluso más que saber CSS es saber cuándo usar las herramientas matizadas a las que tiene acceso.

Así que no se sienta limitado a las hojas de estilo. Claro, son fantásticos y útiles, y hacen que toda la web sea un lugar más agradable para estar, pero también puede usar etiquetas de estilo simple y darle a sus sitios un poco más de atractivo.

Entonces, ¿cómo usa etiquetas de estilo fuera de sus hojas de estilo .css? ¿Qué ideas puedes dar a la gente?

Imagen en miniatura del artículo de Creative Thoughts / shutterstock.com