Durante los primeros días del desarrollo de front-end, entre todos los problemas complejos y las soluciones que ofrece JavaScript (y sus marcos), muchos programadores tienden a subestimar el papel de CSS en un sitio web.
La razón es bastante simple: el CSS básico es fácil de comprender y la mayoría de los obstáculos con los que se encuentra, puede encontrar la solución en el desbordamiento de pila. Sin embargo, los problemas de CSS pueden volverse tediosos si el enfoque inicial es defectuoso y también pueden provocar que los sitios web de bajo rendimiento arruinen la experiencia del usuario.
1. Herramientas para desarrolladores de navegadores
Este puede parecer simple, pero tendemos a infrautilizar las herramientas de desarrollo cuando se trata de estilo.
Depurar mejor
Los estilos CSS se anulan varias veces en un sitio web complejo, especialmente si los nombres de las clases se reutilizan en diferentes lugares. Antes de buscar en el código tratando de averiguar por qué el color de su botón no es rojo, inspecciónelo. Le ahorrará mucho tiempo durante la depuración.
Innovar sobre la marcha
Dev Tools también te permite actualizar estilos sobre la marcha. ¿Se pregunta cómo se vería en azul? Bueno, ya no hay necesidad de preguntarse.
2. Contenedores y clases reutilizables
Esta práctica, si se sigue, le ayudará a cosechar sus beneficios en los años venideros. El desarrollo de aplicaciones lleva tiempo para ir de principio a fin, y ningún diseño permanece como estaba al principio.
Sin embargo, los componentes centrales se verían iguales en diferentes páginas para mantener la coherencia, pase lo que pase.
Clases de reutilización
Identifique los componentes que se reutilizan en toda la aplicación (como, por ejemplo, botones, modales, encabezados, pies de página, etc.) y escriba estilos para ellos primero. Reutilice estas clases donde lo necesite, de modo que incluso si el diseño cambia, necesitaría ajustar el número mínimo de líneas en su código. De esta manera, se asegura de que su código resista la prueba del tiempo.
Wrap para anular
Puede haber situaciones en las que necesite cambiar algunas cosas en uno de sus componentes principales, solo para una página específica. En tales casos, utilice la clase wrapper.
3. Propiedad: Box sizing
4. Enfoque centrado en los dispositivos móviles
Esto puede parecer un poco trivial al principio, pero resulta útil en el gran esquema de las cosas y es bastante fácil de adaptar, si se convierte en una práctica. La compatibilidad con dispositivos móviles ocupa un lugar cada vez más alto en la lista de verificación de todos los diseñadores web en este momento, y los desarrolladores tienen dos opciones: el escritorio primero y el móvil primero.
Sin embargo, en el enfoque de escritorio primero, para un dispositivo móvil, cargaría primero el CSS común y luego anularía esos estilos después de buscar en la consulta de medios. Sin embargo, para una computadora de escritorio, no se molestaría en mirar la consulta de medios en absoluto, lo que ahorra algo de tiempo de rendimiento.
Pero esta vez sería más útil para un dispositivo móvil que para una computadora de escritorio, ya que las computadoras de escritorio generalmente están mejor equipadas.
Por eso, se recomienda seguir un enfoque de móvil primero desde el principio, aunque es comprensiblemente tentador ir primero al escritorio mientras se codifica.