¿Debería utilizar un framework CSS?

Muchas veces nos preguntamos si vale la pena utilizar un framework como Bootstrap o MaterialUI. En este artículo analizamos la situacion.

Normalmente las personas que producen el código HTML son programadores y los que realizan el trabajo de estilo son diseñadores. Es normal que ambos tengan formaciones muy diversas y que tengan que trabajar en conjunto. El problema es que, para economizar recursos, normalmente se pide a los programadores que también se ocupen del diseño.

Un programador puro, no tiene nociones de estilo, pues no es necesariamente su área. Entonces, para solucionar ese problema aparecieron los framework CSS, siendo probablemente el más popular "Bootstrap", aunque últimamente tiene mucho peso el "Material UI" de Google.

¿Cómo funciona un framework CSS?

Los framework CSS son, en esencia, varias líneas de código CSS que ya contienen estilos y nombres de clase o atributos. Por ejemplo, en Bootstrap la clase "alert" y "alert-warning" tienen ya todas las propiedades de tamaño de fuente, bordes, colores y fondo para un mensaje de alerta. Entonces lo único que debe hacer un programador es escribir en código HTML:



Y tendrá el siguiente resultado:

Para algunos componentes de los frameworks también se necesita de código JavaScript. Por ejemplo, para componentes complejos, como un acordeón o un menú desplegable se necesita el enlace al código JS.

¿Cómo se instala un framework CSS?

La forma más sencilla de instalar un framework CSS es el de utilizar un enlace externo. Por ejemplo, para instalar Bootstrap basta copiar las siguientes líneas de código en la sección "head" de nuestra página:

Otra forma es la de copiar y pegar los archivos y cargarlos en nuestro servidor. O podemos ir aún más lejos, y copiar y pegar el código CSS de esos frameworks directamente en nuestros archivos.

¿Cuáles son las desventajas de usar un framework CSS?

Como vimos, los frameworks son bastante útiles para programar rápidamente un sitio. Pero, la mayor desventaja es que no tenemos mucha libertad en términos de diseño. Es claro que el estilo que nos proponen se ve muchísimo mejor que el estilo por defecto de los navegadores, sin embargo, sigue siendo un estilo básico.

La mejor opción para un diseño especializado es el de hacer todo el CSS desde cero, así el programador tiene un control total sobre cada elemento. Los frameworks deberían ser solamente usados para prototipos genéricos o sitios que no tengan requerimientos extremos de estilo.

126 me gusta
511 vistas
Anterior ¿Qué sucede si no uso estilos CSS en mi página?
Programar en HTML y CSS

Programar en HTML y CSS

En esta lista de tutoriales veremos como programar de forma clara y directa en código HTML y CSS que son la base de la web.

¿Cómo se escribe en código HTML?

En esta sección veremos los elementos y la forma en la que se debe escribir el código de hipertexto o HTML.
Tiene video

Esquema de una página HTML

En este artículo veremos el esquema básico de una página en HTML5, la última version de código HTML que existe.

¿Existen reglas para escribir código HTML?

En este artículo analizaremos la forma correcta de escribir en código HTML.

¿Para qué sirve el código CSS?

Aquí veremos para que sirven las hojas de estilo y su uso en los sitios web.

Unidades de medida CSS

En esta sección analizamos todas las unidades de medida que existen en CSS

Propiedades de estilo CSS de bloques

En este artículo vemos las propiedades de estilo que tienen los bloques utilizando una hoja de estilos CSS.

Propiedades CSS para los textos

Aquí veremos como se puede dar estilo a los textos utilizando las propiedades de estilo CSS.

Selectores de estilo CSS

En esta sección vamos a analizar lo básico sobre los selectores de estilo CSS.

¿Qué sucede si no uso estilos CSS en mi página?

En esta sección analizaremos qué es lo que sucede cuando no se utiliza ninguna hoja de estilos CSS en un sitio web.

¿Debería utilizar un framework CSS?

Muchas veces nos preguntamos si vale la pena utilizar un framework como Bootstrap o MaterialUI. En este artículo analizamos la situacion.