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, podía usar etiquetas de estilo en el cuerpo mismo del sitio web, y estaría bien. La mayoría, si no todo, el CSS de la página iría a la propia página, y en ese entonces ... funcionaba 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 maduras crecen las tecnologías web, con menos frecuencia querrá usar etiquetas de estilo por sí solas.

Sin embargo, hay ocasiones en las que querrá utilizarlos. 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 asombroso.

Uso típico de la hoja de estilo

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

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

/*
Theme Name: Divi
Theme URI: http://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: http://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ías poner eso en una etiqueta de estilo en el encabezado de cualquier página que escribas. Definitivamente funcionaría, pero esa es una codificación apestosa y no para qué sirven 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 descubierto exactamente cómo debería verse su sitio y está satisfecho con él.

Entonces, ¿por qué necesitas 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 mejor apariencia de su sitio, no los elementos individuales esenciales y los aspectos destacados especiales. A veces, es más trabajo de lo que vale la pena lanzar un fragmento de código único en una hoja de estilo.

Ahí es cuando las etiquetas de estilo se vuelven realmente útiles. Además, a veces es necesario modificar un solo elemento o hacer una elección de estilo específica 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ías etiquetas de estilo en tu sitio es si estás tratando con un elemento único en tu página. Puede ser una gran molestia (por muy poca devolución, si es que hay alguna) 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 barra lateral que necesita una fuente especial, puede ponerlo en un div, darle al div una identificación 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 gran problema.

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

<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 en particular. (Y sí, me doy cuenta de que el uso de una fuente nueva y diferente probablemente entre en conflicto con el resto de su diseño. Pero es un ejemplo).

Una página simple

A veces, tiene una página única y muy simple en su sitio. Puede ser una página de presentación o una página de compresión. Probablemente solo necesite algunos ajustes en su estilo aquí, pero necesita que se apliquen 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 supondría una presión demasiado grande para las conexiones de los usuarios y, honestamente, no vale la pena agregarlo a una hoja de estilo. (Y para ser justos, este CSS es espantoso y no vale la pena agregarlo a ningún sitio. ¡Tee hee!)

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

Sin embargo, el punto aquí es que HTML 5 está bien con que agregue etiquetas de estilo en el encabezado de su sitio web para que pueda modificar las hojas de estilo existentes. Si bien las etiquetas ! Importantes definitivamente no son necesarias en este caso (rara vez lo son), creo que esta es, quizás, la única vez que las use porque no van a causar muchos espaguetis 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 medios son tus aliadas. 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, principalmente usará esto para asegurarse de que sus sitios funcionen en diferentes dispositivos. Cuando necesite capacidad de respuesta en todo el sitio, se incluirá 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.

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

Stylin 'y Profilin'

CSS es una parte tan importante del desarrollo web ahora que es algo que casi todo el mundo tiene que saber y utilizar. E incluso más que conocer 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 de toda la Web un lugar más agradable para estar, pero también puedes usar etiquetas de estilo simples y darle a tus sitios un toque extra.

Entonces, ¿cómo se usan las etiquetas de estilo fuera de las hojas de estilo .css? ¿Qué información le puede dar a la gente?

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