Tópicos Avanzados de

programación

Tecnológico Nacional de México Instituto Tecnológico de Zacatecas

Nombre de la Carrera: ingeniería en sistemas computacionales

Nombre de la Materia: Tópicos Avanzados de Programación

Web

Nombre del Estudiante: Sandra Paulina De Santiago Martínez

Nombre del Trabajo: 1.3 Herramientas para CSS

Números de control: 20450255

Fecha de entrega: 19/02/2024

1
Qué es CSS

CSS son las siglas en inglés para «hojas de estilo en cascada» (Cascading Style
Sheets). Básicamente, es un lenguaje que maneja el diseño y presentación de las
páginas web, es decir, cómo lucen cuando un usuario las visita. Funciona junto con
el lenguaje HTML que se encarga del contenido básico de los sitios.
Se les denomina hojas de estilo «en cascada» porque puedes tener varias y una de
ellas con las propiedades heredadas (o «en cascada») de otras.

Para qué sirve CSS

Con CSS, puedes crear reglas para decirle a tu sitio web cómo quieres mostrar la
información y guardar los comandos para elementos de estilo (como fuentes,
colores, tamaños, etc.) separados de los que configuran el contenido.
Además, puedes crear formatos específicos útiles para comunicar tus ideas y
producir experiencias más agradables, en el aspecto visual, para los usuarios del
sitio web.

Ventajas de usar CSS

Separación de la estructura y la presentación. CSS permite separar el contenido
HTML de su presentación visual. Es decir, te permite mantener el código HTML
limpio y estructurado, mientras que el estilo se define en un archivo CSS separado.
Este orden mejora la legibilidad del código y facilita el mantenimiento, así como la
actualización de los estilos.

Consistencia y mantenibilidad. Al utilizar CSS, puedes aplicar estilos de manera

consistente a un sitio o aplicación web. Los estilos se definen una vez y se aplican
a múltiples elementos en las páginas, lo que favorece la renovación de la apariencia
visual de todo el proyecto.

Eficiencia en el rendimiento. CSS permite cargar estilos externos en un archivo

separado. Con esto, el navegador almacenará en caché los estilos y los aplicará a
todas las páginas del sitio, lo que mejora el rendimiento al reducir la cantidad de
datos que deben transferirse entre el servidor y el cliente.

Flexibilidad y control. Asimismo, ofrece una amplia gama de propiedades y

selectores con los que tendrás un control preciso sobre el estilo de los elementos
HTML. Podrás modificar, de forma sencilla, los colores, fuentes, márgenes,
tamaños, diseños, etc.

Gracias a estas características, podrás personalizar y adaptar a varios dispositivos

y tamaños de pantalla tu sitio web.

2
Desventajas de usar CSS
Curva de aprendizaje. CSS puede tener una curva de aprendizaje empinada, en
particular, para los principiantes. Entender, por completo, todas las propiedades,
selectores y conceptos avanzados puede llevar tiempo y práctica.

Compatibilidad entre navegadores. Aunque los estándares de CSS son de los más
aceptados, algunos navegadores podrían interpretar y renderizar los estilos de
manera diferente. Esto puede resultar en inconsistencias visuales y requerir
pruebas o ajustes adicionales para garantizar la compatibilidad entre plataformas.
Especificidad y herencia.

CSS utiliza reglas de especificidad y herencia para determinar qué estilos se aplican
a los elementos. En ocasiones, el orden de las reglas y la jerarquía pueden generar
resultados inesperados. Esto requiere una comprensión cuidadosa de cómo
funcionan estas reglas para evitar conflictos y problemas de estilo.

Limitaciones en la maquetación. Aunque CSS ofrece una amplia gama de

propiedades para el diseño y la maquetación, puede presentar limitaciones en
ciertos casos más complejos. Algunos diseños específicos pueden requerir
soluciones adicionales o el uso de técnicas más avanzadas para lograr el resultado
deseado.

Cómo funciona CSS

CSS funciona como complemento a la información que forma parte de un sitio web.
Mientras que el código en HTML incluye todos los datos, el código en CSS se
encarga de darles formato y presentarlos visualmente a través de un navegador.

Características de CSS

1. Es un lenguaje de programación diferente a HTML.

2. Permite el apilamiento de instrucciones para definir formatos específicos.
3. Es utilizable en todos los navegadores y plataformas.
4. Optimiza el funcionamiento de las páginas web.
5. Tiene una sintaxis específica.
6. Permite personalizar totalmente la apariencia de las páginas.

¿Qué es LESS?
LESS extiende CSS para dotarlo de un comportamiento dinámico a través de
variables, mixins, operaciones y funciones.

¿Cómo funciona?
Para utilizar LESS no necesitas un plug-in ni nada especial. La idea detrás de la
herramienta es que el navegador interpreta código CSS normal y corriente
producido a través de un proceso de compilación de nuestras plantillas escritas
en LESS.

3
Lo único que cambia es la forma que tenemos de compilar las plantillas LESS. Si
usamos un servidor Web basado en Node.js o bien servimos nuestras hojas de
estilo CSS a través de un script en cualquier lenguaje como PHP, Python, Ruby o
Perl (por ejemplo), podemos compilar nuestras plantillas LESS en tiempo de
ejecución (del servidor) utilizando para ello Node.js

Cómo se usa
Hay varias formas de utilizar LESS CSS, una de ellas es a través de javascript del
lado de servidor usando node.js, otra es utilizando javascript del lado del cliente
con less.js y por último usando una aplicación que compile los estilos .less a .css.
Al iniciar a trabajar con LESS CSS es un error querer utilizar la versión de javascript
del lado del cliente.

Es un error porque esta versión se consideró para uso en ambientes de desarrollo

—al ser más rápido de corregir en caso de error—, además es lenta y aumenta el
riesgo de fallar al depender completamente de javascript. Para hacer hacer
experimentos locales o iniciar está muy bien pero para producción no se
recomienda.

Más adelante escribiré sobre aplicaciones recomendadas para compilar. less a .css
y las ventajas de cada una, pero por ahora, para comenzar, les digo que le den un
vistazo a simpleless(multiplataforma), less.app (mac), o si buscan una solución a la
medida pueden recurrir a Less PHP, una librería que permite compilar less css
utilizando PHP permitiendo generar estilos dinámicamente, en tiempo real o
creando cache.

Con LESS puedes hacer esto entre muchas cosas más.

Los Mixins: te permiten embeber todas las propiedades de una clase dentro de otra
clase simplemente incluyendo el nombre de la misma como una de sus
propiedades.

Reglas Anidadas: Cuando programamos en LESS no es necesario que escribamos

largos selectores para especificar la herencia de nuestras reglas. Podemos usar
selectores anidados dentro de otros selectores. Esto convierte a la herencia en
algo limpio y elegante.

Funciones de color: LESS nos ofrece una variedad de funciones para transformar
colores. Primero son transformados aHSL y después son manipulados a nivel de
canal.

Emulación de Javascript: Se pueden evaluar expresiones JavaScript dentro de los

archivos .less, para ello, es necesario envolver la expresión con back-ticks (acentos
cerrados)

4
Conclusión

La evolución de las herramientas para CSS y la adopción de lenguajes como LESS

han marcado un antes y un después en el desarrollo web. Estas tecnologías no solo
optimizan el flujo de trabajo de los desarrolladores, sino que también elevan el nivel
de las interfaces de usuario que se pueden crear, haciendo la web un espacio más
interactivo, accesible y visualmente atractivo. Al integrar estas herramientas y
lenguajes en sus proyectos, los desarrolladores y diseñadores no solo mejoran su
productividad y la calidad de su trabajo, sino que también se aseguran de estar al
frente de las tendencias y mejores prácticas en el desarrollo web.

Fuentes bibliográficas

https://blog.hubspot.es/website/que-es-
css#:~:text=CSS%20son%20las%20siglas%20en,contenido%20b%C3%A1sico%2
0de%20los%20sitios.

https://www.liftingroup.com/expertise/less-el-lenguaje-dinamico-de-hojas-de-estilo/