Get best of the week

Desarrolladores CSS: ¿por qué el mundo los necesita?

La versión de audio en ruso (Yandex.Music) / iTunes

En los últimos diez años, CSS ha crecido exponencialmente al agregar más y más funciones, por lo que gradualmente se vuelve bastante complicado y confuso. El CSS de nuestros días es muy diferente del CSS de la década 2001-2010.

Antes de comenzar a explicar por qué el mundo necesita desarrolladores de CSS, debemos volver y mirar el historial de CSS.

Portada del poste de pato amarillo

Disclaimer:
.
 .
 , , .


CSS


En la década 2001-2010, cuando Internet estaba conquistando el mundo, CSS se detuvo. Internet Explorer 6-7-8 fue el navegador líder. Microsoft en ese momento no prestó mucha atención a las especificaciones CSS, no mostró ningún interés en agregarle nuevas funciones. CSS se ha mantenido en la versión 2.1 durante todos estos años.

Desde 2007, los navegadores modernos Firefox y Chrome comenzaron a aparecer. Incluso en este momento, aún teníamos que admitir Internet Explorer. Esto detuvo nuestro desarrollo. Como el principal navegador de gobierno en ese momento, IE instaló una velocidad de desarrollo CSS casi inexistente y casi nula. Era la "edad oscura" de Internet.

Ilustración de Dark Times CSS

Eventos fundamentales de la nueva era de CSS


Yo era desarrollador en ese momento y, por lo tanto, vi dos eventos importantes que cambiaron el mundo de CSS y la web en general:

  1. El comienzo de la era de los teléfonos inteligentes (29 de junio de 2007) : todo comenzó con el lanzamiento del primer iPhone. Esta versión requería el soporte de nuevas funciones CSS que se ajustaran a la nueva categoría de dispositivos web.
  2. Versión del navegador Chrome (2 de septiembre de 2008) : Chrome era un nuevo navegador que comenzó como una aplicación de escritorio. Hasta entonces, Internet Explorer era el principal gobernante de Internet y dictaba su desarrollo.

Navegador Chrome y Steve Jobs con iPhone en la conferencia de 2007, collage

¿Por qué los desarrolladores frontend manejan tanto CSS como JavaScript?


En ese momento, la idea de que los desarrolladores de Frontend deberían administrar todas las capacidades del cliente era bastante común. Luego solo había unas pocas reglas CSS. CSS ahora se ha expandido, y esa visión ya no es relevante.

CSS 3, HTML 5 y JavaScript: una nueva era


Es difícil decir exactamente cuándo surgió CSS ​​3, ya que se ha desarrollado desde 1999. El verdadero apoyo en Internet comenzó en 2011. Chrome y Firefox estaban aumentando su cuota de mercado en ese momento. Los teléfonos inteligentes se han vuelto muy populares. Con sus propios navegadores, todos comenzaron a admitir las primeras características nuevas de CSS 3.

Estos cambios redujeron la popularidad de Internet Explorer. En ese momento, todavía era un navegador importante, sin embargo, Microsoft se dio cuenta de que debería comenzar a prestar atención a las especificaciones y al desarrollo de CSS. Lanzaron Internet Explorer 9.

CSS nuevo


CSS 3 tiene ahora 10 años, ¿por qué no CSS 4? CSS 3, a diferencia de CSS 2.1, es un estándar abierto. Gracias a esto, se actualiza constantemente. No es necesario nombrar la nueva versión "CSS 4", ya que CSS 3 es un desarrollo continuo, una versión para todos los tiempos.
imagen

Desde 2011, cada actualización del navegador incluye nuevas funciones de CSS. En los últimos años, la mayoría de los navegadores (Chrome, Firefox, Opera, Edge) se actualizan casi todos los meses (Safari se actualiza principalmente una vez al año). Esta frecuencia significa que obtenemos nuevas características de CSS casi tan pronto como aparecen.

¿Qué hay de nuevo en CSS en los últimos 10 años?


En los últimos diez años, han aparecido muchas especificaciones nuevas para diferentes tipos
de módulos CSS, por ejemplo:

  1. Layout — , Flexbox, CSS-, , writing mode ;
  2. Typography — , font-variant, line-breaking;
  3. Shapes & Graphics — , , blend-mode, clip-path, shapes ..
  4. Animations & Transforms — CSS/SVG , transitions, transforms, will-change.
  5. Units — viewport vw/vh/vmin/vmax, rem, calc(), contain, fit-content, min-content, max-content;
  6. CSS preprocessor — sass, less, stylus, postCSS
  7. — SVG, @support, CSS .

Puede notar que muchas características nuevas son responsabilidad del desarrollador de la interfaz. Esto significa que debe ganar experiencia en todos ellos. Pero esto ni siquiera es una lista completa.

En la vida real, es casi imposible para un desarrollador web tener incluso un nivel básico de comprensión de todas estas nuevas características. Además, JavaScript se desarrolló en paralelo. Y se desarrolló, tal vez incluso más que CSS. Esto hace que sea aún más difícil para una persona mantenerse al día con todos los desarrollos.

Gran error de la industria web


Esta situación, en la que los desarrolladores frontend no pudieron hacer frente a la nueva complejidad en CSS, creó un nuevo movimiento llamado "Cómo no aprender CSS".
Un nuevo movimiento llamado "No aprenda CSS"

Los primeros marcos CSS


Este error comenzó con marcos como Bootstrap y Foundation. El primer lanzamiento de cada uno de ellos tuvo lugar en 2011. Esta fecha en particular no es accidental: estos fueron los primeros años de CSS3, diseño receptivo, sitios web móviles y tipografía entre navegadores.

Nunca intenté profundizar en Bootstrap, ya que nunca me gustó su convención de nombres CSS no semántica. Al ayudar a otros desarrolladores web en la comunidad , rápidamente me di cuenta de que Bootstrap solo es adecuado para esos casos cuando lo usas tal cual, sin intentar personalizarlo por ti mismo.

Captura de pantalla de marcado de Bootstrap
Bootstrap HTML: la mayoría de las clases no son semánticas.

Angular 2: el primer marco compatible con JavaScript


El nuevo Angular fue el primero en introducir estilos encapsulados. Era una forma de librar al desarrollador web inexperto de la necesidad de comprender la cascada de CSS. Con este método, puede crear estilos globales y seguir teniendo estilos locales para cada componente.

De todas las diversas ideas de desarrollo, la idea de los estilos encapsulados es, en mi opinión, buena porque todavía puede crear estilos globales y estilos encapsulados para componentes. Además, todavía tenemos una separación de preocupaciones por CSS / SASS, HTML y JavaScript. Podemos disfrutar de una manera simple de descargar solo los estilos necesarios.

Captura de pantalla de la estructura de archivos en un proyecto con Angular

Reaccionar: ¡la muerte de la semántica!


React lleva esta idea más allá y escribe todo el HTML y CSS dentro de JavaSscript. El objetivo de crear estilos reutilizables murió con React. Genera automáticamente nombres de clase CSS; por lo tanto, el código se vuelve ilegible e imposible de entender, tanto por los nombres de clase CSS como por el HTML no semántico. Desde mi punto de vista, esto es similar a cómo se escribieron CSS y HTML al comienzo de Internet, cuando no importaba cómo se veían CSS o HTML mientras trabajaban.

Captura de pantalla de marcado de código de reacción
Reaccionar - nombres de clase css ilegibles

¿Por qué es tan malo? Cuando tiene un problema de CSS real y un desarrollador frontend normal no puede resolverlo y necesita un desarrollador de CSS experimentado, el código React confuso se interpone en el camino. Sí, ambos desarrolladores web pueden resolverlo juntos, pero lleva tiempo de dos desarrolladores web experimentados.

¡Despierta!


¡Los desarrolladores frontend no arrastran CSS! Alguien tiene que decirlo en voz alta! Sí, sé que esta es una generalización cruda y, por lo tanto, no es 100% correcta, pero no estoy tratando de ser 100% correcta.
Antes de continuar, deberías saber un poco más sobre mí.

Gallo en el fondo del sol naciente, fotografía
Despierta: ¡los desarrolladores frontend no arrastran CSS!

Quién soy


Comencé como desarrollador frontend a principios de 2007.
A principios de 2012, dejé de escribir JavaScript casi por completo, la razón principal fue que me encantaba CSS y JavaScript era mucho menos.

Desde 2012 hasta el presente, dado que me concentré solo en CSS, he desarrollado una ventaja en esta área. A lo largo de los años, escribí muchos artículos sobre CSS , fundé la comunidad CSS local con 5.000 miembros y tuve innumerables conversaciones en reuniones, seminarios y conferencias.

Estoy con un micrófono en una conferencia, fotografía
Hablo en ConFrontJS 2019 en Varsovia, Polonia.

¿Por qué te cuento todo esto?Porque todavía soy una especie de unicornio en mi país y en la industria web. Sí, tengo muchas gracias, ¡pero hay una gran pero! Aunque esto funciona para mí porque soy conocido en la industria web de mi país, es difícil para otros convertirse en lo mismo porque la industria web todavía está tratando de mantener el "antiguo nombre del desarrollador Frontend" (lo que significa intentar escribir JavaScript y CSS de primera clase) .

En mi país, conozco a los mejores desarrolladores de Frontend. Como estoy interesado en comprender la industria de la web, siempre les pregunto a los principales talentos de Frontend si creen que son buenos en CSS. Su respuesta continúa sorprendiéndome: la mayoría de ellos se sienten inseguros sobre CSS, y siempre se sorprenden de los desarrolladores como yo que aman el CSS.

La industria web necesita cambiar


A pesar de que esto funcionó hasta 2010, no puede continuar en 2020. La industria web ha cambiado, y es hora de madurar y abandonar los primeros puestos de trabajo en la industria web y pasar a un nuevo posicionamiento.
Posicionamiento que satisfaga las necesidades de nuestro tiempo. Al principio, grandes empresas. Luego a todos los demás.

Figuras 2020 hermosa fuente, ilustración

¿Cuál es el interés de las empresas?


En 2020, CSS es una habilidad importante. Si bien las empresas intentan ahorrar dinero, pueden terminar gastando más dinero. A lo largo de los años de trabajo como desarrollador web, vi cómo los desarrolladores dedicaban demasiado tiempo a lo que un desarrollador CSS especializado podía resolver en 10 minutos y con un código más productivo.
En 2020, CSS es una habilidad importante.

¿Qué pueden ser los nuevos títulos de trabajo?


En los últimos ocho años, he cambiado de posición varias veces. Hice esto para explicar mis habilidades a las personas que ven mi perfil de LinkedIn .

Al principio me llamé CSS Master (por el nombre de la comunidad que fundé: CSS Masters Israel ). Fue divertido verlo poco después de este anuncio de trabajo con ese titular. Me di cuenta de que hay compañías que necesitan un desarrollador de CSS, pero no saben cómo nombrarlo adecuadamente.

Una fotografía de un formulario de solicitud de empleo, una imagen sin sentido

Más tarde, cambié el nombre de mi publicación varias veces (UI / CSS - Desarrollador / Desarrollador de interfaz / Ingeniero / Arquitecto / Experto), tratando de adaptar mis habilidades al nombre del trabajo.

No seas solo un desarrollador de CSS


En estos días tenemos varios tipos de desarrolladores que se especializan en la parte visual, como CSS y, por ejemplo, SVG. Intentaré definir estos tipos aquí :

Desarrollador CSS : este nombre es para profesionales de nivel medio CSS. Estos son desarrolladores que pueden tomar el diseño y convertirlo fácilmente a CSS.

Arquitecto CSS- Esta categoría está destinada a desarrolladores, como yo, que además de crear CSS de manera eficiente, son expertos en planificar la separación de CSS y convertirlo en una estructura de construcción compleja. A diferencia de los desarrolladores de CSS, los arquitectos de CSS tienen más experiencia y saben cómo escalar proyectos grandes de manera inteligente, con desarrolladores de CSS adicionales trabajando en su equipo. Además, se comunican con otros desarrolladores web, gerentes de proyecto y diseñadores web.

Muchos patos de goma amarilla diferentes mostrando una variedad de profesiones, ilustración
¡La variedad es maravillosa!

Desarrollador de animaciones CSS : hoy en día podemos mejorar la experiencia del usuario casi sin esfuerzo utilizando animaciones CSS o animaciones SVG, convirtiendo así un buen proyecto en uno fantástico. Este trabajo puede ser adecuado para grandes empresas.

Estas son las necesidades más comunes para 2020, pero hay otros tipos de desarrolladores especializados, como:


Puede haber más: ¡las posibilidades son infinitas!

Finalmente


En este artículo, traté de crear conciencia sobre un tema que, me parece, aún no se ha cubierto. Mi objetivo es poner en marcha la industria web.

Además de mi artículo, también hay artículos sobre este tema desde otros puntos de vista:


En el final


Si te gustó este artículo, te agradecería que lo compartieras con otros para que esta idea pueda crear una nueva conciencia en la industria web.

¿Quién soy?


Mi nombre es Elad Shechter, soy un desarrollador web especializado en arquitectura CSS y HTML. Yo trabajo para investing.com .

Mi twitter y sitio web .

Estoy en el fondo del proyector, hablando sobre el proyecto, la fotografía.

More articles:


All Articles