Qué hacen los desarrolladores de CSS y por qué necesita uno

Los desarrolladores de CSS son profesionales web cuya principal responsabilidad es entregar un producto pulido y con estilo al navegador del visitante. Prácticamente todos los sitios web usan CSS, pero CSS a menudo no se considera un "igual" en la pila de desarrollo web moderna. Desafortunadamente, esta percepción errónea puede llevar a que CSS se dé por hecho, o incluso se pase por alto hasta cierto punto.

Permitir que los desarrolladores que no usan CSS manejen CSS a menudo resulta en la introducción de errores y errores de CSS en su código, y puede causar una frustración innecesaria para los desarrolladores. En este artículo, me gustaría familiarizar a todos con lo que abarca el trabajo para que puedan comprender mejor por qué cada sitio necesita un desarrollador de CSS profesional y confiable.

¿Qué hacen los desarrolladores de CSS?

Empecemos con lo básico. ¿Por qué es tan importante CSS y qué se supone que deben hacer exactamente los desarrolladores de CSS?

CSS es un lenguaje específico y, como tal, no puede existir por sí solo. Requiere HTML para tener sentido. Entonces, lo primero que hacen los desarrolladores de CSS es escribir código HTML.

Escribir HTML ordenado siempre importa

Escribir HTML sencillo, limpio y adecuadamente organizado es una gran responsabilidad porque el humilde documento HTML es lo primero que entrega a sus usuarios finales.

Si está escribiendo un documento HTML listo para producción, debe tratar de asegurarse de incluir todas las etiquetas requeridas y opcionales en el encabezado del documento para aprovechar al máximo su sitio web. Me refiero a configurar el tipo de documento, el idioma, las metaetiquetas, los favicons, las técnicas de carga y el SEO correctos.

Todo lo que podría ayudar a que su sitio web sea más eficaz, más accesible y brinde más exposición a su audiencia y motores de búsqueda, así como otros servicios y herramientas. El cuerpo del documento HTML tampoco debe estar inflado. Saber cuándo usar etiquetas HTML semánticas, cómo agregar los atributos HTML requeridos y cómo evitar el anidamiento profundo o las divisiones no debe ignorarse, sino implementarse desde el comienzo del proyecto. Ningún desarrollador profesional comienza a seguir las mejores prácticas a la mitad del proyecto, pero incluso las cosas aparentemente básicas, como HTML, a menudo se hacen mal.

El diseño general a menudo determina cómo organizamos varios componentes HTML. Los desarrolladores de CSS trabajan en estrecha colaboración con los diseñadores, y no todos los diseñadores usan la misma herramienta para proporcionar el diseño. Estar familiarizado con Sketch, Photoshop, InVision o Figma, y ​​ser capaz de "cortar" el diseño, son habilidades imprescindibles para los desarrolladores de CSS. Siempre se debe tener en cuenta cómo estructurar un componente para que sea posible aplicar el diseño al mismo tiempo. El uso de una buena convención de nomenclatura, como BEM u OOCSS, debería evitar escribir HTML inflado o código CSS que no se puede mantener.

JavaScript está en todas partes

Algunos componentes deben ser interactivos, como modales o información sobre herramientas. Eso a menudo requiere una buena comprensión de JavaScript, no de JavaScript "profundo", sino de eventos de JavaScript y manejo de DOM. El manejo de DOM podría ser un desafío porque no desea agotar los recursos de su usuario y hacer que su sitio web sea lento o, lo que es peor, colapsarlo y dejarlo completamente insensible.

El mundo de JavaScript está evolucionando rápidamente y, a veces, parece que aparecen nuevos marcos y herramientas todos los días. Debido a la inmensa popularidad de JavaScript, mantenerse informado es fundamental si desea utilizar las prácticas recomendadas más recientes y ofrecer la experiencia más agradable a los usuarios finales.

CSS

Eso también es cierto para CSS, aunque muchos argumentarían que no evoluciona casi al mismo ritmo que JavaScript. Sin embargo, las nuevas funciones, como las variables CSS, la cuadrícula CSS o incluso Flexbox, requieren algo de tiempo para dominarlas.

Luego, está la compatibilidad con navegadores, que todavía puede representar un problema incluso hoy. Su sitio puede parecer un millón de dólares en un navegador moderno, pero no tanto en los navegadores heredados. Es posible que Flexbox sea compatible con IE11, pero, de nuevo, es posible que no funcione como se esperaba. Saber cómo evitar estos problemas es parte del trabajo de un desarrollador de CSS.

Afortunadamente, la comunidad es muy útil y sitios como Flexbugs o Gridbugs pueden ahorrar mucho tiempo.

Herramientas, técnicas y principios de CSS

A veces, podemos confiar en herramientas como ejecutores de tareas o paquetes como Grunt, Gulp y webpack para ayudarnos a entregar un código confiable. Puede sobrecargar su código con linters, minificadores, babel o PostCSS para transpilar el código.

Luego, debemos tener en cuenta varias fuentes, tipografías, imágenes, iconos, fuentes de iconos, animaciones, transiciones y otros aspectos abstractos que forman parte de las tareas cotidianas de los desarrolladores de CSS. Cada característica individual tiene su especificidad, limitaciones, problemas y soluciones. Cuantas más características y técnicas domine, más fácil será diseñar e implementar componentes en su proyecto.

Hay un número significativo de propiedades y valores CSS, y uno no puede saberlo todo. Afortunadamente, nuestras herramientas nos ayudan allí, especialmente los editores de código y las herramientas de desarrollo. Sin embargo, incluso las herramientas no pueden ayudar a resolver dolores de cabeza cuando necesita resolver un problema de índice z. Fracasar es la mejor manera de aprender.

Diría que esto es especialmente cierto cuando se trabaja con CSS, y es por eso que:

Si nunca ha intentado resolver el problema del índice z, nunca aprenderá sobre el contexto de apilamiento. Si nunca ha intentado anular la clase Bootstrap, nunca aprenderá sobre la especificidad. Si nunca ha tratado de solucionar el problema del flotador, nunca aprenderá sobre el modelo de caja.

A veces, la solución es simple, pero solo hacer una pregunta es difícil. En comparación con otros idiomas, no puede preguntar por qué mi bucle no funciona. Necesitas el contexto completo para resolver el problema en CSS, y esto es a menudo algo que muchos no entienden: la cascada .

Cascade es la mejor característica de CSS y debería funcionar para usted, no en su contra. Algunos desarrolladores lo solucionan inventando enfoques personalizados como CSS-in-JS. Si empaqueta su CSS en un entorno encapsulado como React, no puede usarlo en ningún otro lugar. Dudo que este sea el enfoque que desea en su plataforma escalable. Si tiene problemas con la cascada, aprenda a abrazarla y luego aprenda a domarla.

Mientras preparaba este artículo, Max Bock escribió sobre la mentalidad de CSS, y esto es precisamente lo que deben hacer los desarrolladores de CSS. Los desarrolladores de CSS piensan dentro de la caja, predicen modificaciones de contenido y evitan números fijos siempre que sea posible mientras intentan escribir la menor cantidad de código posible sin anular los valores predeterminados y el contexto.

¿Por qué necesita un desarrollador de CSS?

La mayoría de los desarrolladores frontend o incluso full-stack podrían escribir el código CSS. Pero no todos ellos pudieron corregir todos los errores de CSS o implementar el diseño sin complicar el código HTML o confiar en JavaScript donde no es necesario.

Un desarrollador profesional de CSS se preocupa por el código hasta el último detalle, disfruta creando diseños y componentes, incluso los más complicados, y sabe cómo resolver cada problema o error.

Estándares de codificación CSS

Antes de escribir cualquier código, generalmente es una buena idea tener algunas reglas básicas sobre cómo escribir código. Los desarrolladores de CSS deben respetar el estándar de codificación; es esencial para la capacidad de mantenimiento y la escalabilidad del proyecto.

Elija qué convención de nomenclatura usar en todo el proyecto. Establecer una convención de nomenclatura desde el principio puede ayudar a los desarrolladores a producir un código mejor y más organizado. También puede ayudar a todos los involucrados en el proyecto a comprender la estructura de los componentes y la relación entre los componentes y los elementos leyendo solo el código HTML.

Decida cómo manejar la sangría, los tipos de selector, las propiedades abreviadas, las unidades en CSS. Por ejemplo, evite usar unidades de píxeles si el estándar de codificación propone el uso de unidades rem. Todo el mundo tiene un estilo distinto de escritura/codificación, pero como profesional, debe ser capaz de adoptar y, lo que es más importante, comprender cada concepto.

Implementación de diseño CSS

Antes de convertir el diseño en código, debe tomarse el tiempo para comprender cada página, diseño y componente. Si es posible, analice cada página, cree una lista de páginas y componentes e intente encontrar un patrón.

Si observa un componente que está presente en más páginas, debe reconocer el entorno que lo rodea y tratar de pensar en él como un componente independiente. Si hay componentes similares, como tarjetas o listas, podría tener una variación del mismo componente. De esta manera, podría reutilizar el código HTML y escribir solo un poco de código CSS para que parezca modificado.

También es una buena idea tratar de encontrar patrones en otras áreas, como la tipografía y el espaciado. A veces, esto lleva a tener clases auxiliares que podrían usarse en todo el proyecto en lugar de páginas individuales.

Organice su código CSS

Los desarrolladores de CSS deben organizar su código y crear una estructura significativa para todos. Al usar herramientas como procesadores CSS, los desarrolladores de CSS deben documentar el proceso de generación del código compilado.

Si es necesario, los desarrolladores de CSS pueden crear guías de estilo. Las guías de estilo pueden ser una referencia al crear nuevas páginas o decidir cómo abordar las existentes. Mi consejo es hacer que la guía de estilo esté disponible globalmente para todo el equipo porque a menudo es mucho más fácil tomar una decisión cuando se tiene un contexto visual. Las guías de estilo pueden contener paletas de colores, reglas tipográficas, estándares de codificación e incluso páginas estáticas. No hay límites, excepto el presupuesto y tu imaginación.

Código CSS en Producción

Escribir código CSS implica manejar problemas, errores, animaciones, transiciones, capacidad de respuesta y estilos de impresión entre navegadores. Muchas de estas funciones no son fácilmente manejables por los desarrolladores completos. Iría tan lejos y diría que estas son las tareas CSS menos favoritas en general, y no todos los desarrolladores saben cómo manejarlas. Por otro lado, los desarrolladores de CSS especializados saben (o al menos deberían saber) cómo producir código teniendo en cuenta cada error, navegador y entorno.

El uso de enfoques modernos es una forma de hacerlo, pero tampoco se debe ignorar la compatibilidad con navegadores más antiguos y el respeto de la configuración del usuario, como movimientos reducidos.

Los desarrolladores de CSS también escriben código HTML y JavaScript. Eso significa que la entrega de activos es responsabilidad del desarrollador de CSS. Los desarrolladores de CSS deben ser responsables de cargar fuentes, extraer CSS crítico, usar la carga de JavaScript diferida y asíncrona y proporcionar imágenes receptivas.

Ninguna de estas técnicas es fácil de implementar, y no existe una bala de plata.

Lo que los desarrolladores de CSS pueden hacer por usted

Todo lo anterior explica por qué necesita un desarrollador de CSS dedicado. Estas son solo algunas de las cosas cruciales que manejan:

• Asegúrese de que cada miembro del proyecto cumpla con el estándar de codificación
• Implementar diseño
• Organizar el código
• escribe el codigo
• Corregir errores
• Aprende sobre nuevas técnicas.
• mejorar el codigo

Terminando

Durante demasiado tiempo, la cuestión de la existencia y la importancia del papel de los desarrolladores de CSS fomentó discusiones no particularmente constructivas y bien intencionadas. Tratemos de estar de acuerdo y reconocer al desarrollador de CSS como un rol adecuado de una vez por todas.

En su artículo, The Great Divide , Chris Coyier cita a algunos de los líderes tecnológicos, y la mayoría de ellos está de acuerdo en que debería haber una división, debería haber un rol basado en CSS que no requiera el conocimiento de los marcos de JavaScript modernos. Podría ayudar si sabe más que "solo CSS", pero el rol debe existir y debe aceptarse como igual a los roles basados ​​en JavaScript.

Después de todo, ¿quieres dejar tu producto en manos de un profesional especializado que pueda pulirlo a la perfección, o te conformarás con lo suficiente ?

Lecturas adicionales en el blog de ingeniería de Toptal:

• Cómo acercarse a las animaciones SVG en CSS