Desarrollar CSS eficiente y optimizado
CSS se puede comparar con el conjunto de herramientas de un escultor; al igual que los escultores en el trabajo, los diseñadores usamos CSS para crear diseños estructurados de sitios web.
Con los años, este proceso se ha vuelto más organizado; se han establecido reglas para crear las mejores prácticas de codificación.
En este artículo, echaremos un vistazo a algunas ideas que puede usar al escribir hojas de estilo para acelerar su código.
Efficient CSS es fácil de administrar y fácil de leer, y puede ser un recurso para los diseñadores web. Organizarse es un gran paso, pero usar CSS puede ser un poco más complicado que eso.
Mientras lee este artículo, tenga en cuenta sus propias preferencias; El mejor consejo que puede obtener de cualquier desarrollador es encontrar su propia forma de trabajar. Combine algunas de las técnicas aquí con sus propios métodos para obtener el mayor beneficio.
¿Por qué Bother racionalizar CSS?
Muchos diseñadores confunden los lenguajes front-end y back-end cuando hablan sobre el código de análisis. CSS y HTML son lenguajes de diseño frontales utilizados para formatear y estilizar elementos en un sitio web. Los archivos son descargados y analizados por el navegador del visitante, lo que significa que el código del front-end tiene un tiempo de carga sustancial.
El código descargado y analizado por el navegador toma tiempo para ser leído y computado, al igual que el código escrito en los lenguajes de back-end (como PHP o Ruby). El CSS optimizado puede beneficiar mucho a un sitio web porque puede acortar los tiempos de carga y acelerar la estructuración de elementos de página.
Los beneficios pueden no ser obvios con las conexiones de alta velocidad de hoy en día y los sistemas operativos avanzados. Es posible que desee ver su sitio web en un navegador móvil para comparar los tiempos de carga y ver cómo se carga el sitio web.
Cuando CSS se codifica de manera eficiente, debería ver la forma y el estilo de los elementos del sitio web a medida que se procesan. Esto puede verse diferente de un navegador a otro, pero aún sucede. Cuanto más pruebe el código de su sitio web, más lo verá.
Mantenga su código estandarizado y simple. Si está actualizando su blog o sitio web personal unos meses después del desarrollo inicial, agilizar los estilos CSS con los que está familiarizado es más fácil que lidiar con otros nuevos. Adaptándose a estándares establecidos ayuda en el largo plazo.
Cómo trabajar con código eficiente
Para comenzar a codificar los estilos con la máxima eficiencia, deberá adoptar algunas ideas nuevas. Estas son técnicas básicas de CSS utilizadas actualmente por los mejores sitios web y desarrolladores de aplicaciones de Internet.
Mantenga su código simple
Esto puede ser pasado por alto fácilmente. Cuando diseñe un conjunto de datos para sus estilos, manténgalo simple. Crea conjuntos de datos en una pila de columnas si es necesario.
Comience por crear una lista de diferentes secciones para trabajar en sus estilos. Puede incluir texto, formularios, cuadros de diseño, encabezados, pies de página y cualquier otra cosa que pueda necesitar. Para organizarse realmente, puede dividirlo en algunos estilos conocidos, como un id o class para enlaces de navegación.
Este primer paso ayuda a crear un plano para su sitio web usando palabras simples, antes de ingresar a cualquier lenguaje de estilo. Después, sentarse a escribir código será mucho más simple; tener la lista de recursos en frente de ti te ayudará a verter el código a una velocidad casi sobrehumana.
Mantenga los bloques de código delineados y escasos
Existe un debate continuo sobre cómo se debe escribir el código CSS. Cuando comencé, usaba la notación de bloque porque era todo lo que había visto en mi vida. Pero la notación de una sola línea es mucho más rápida cuando se trata de analizar texto y hacerlo legible.
No estoy haciendo un caso para ignorar CSS de estilo bloque, ni mucho menos. Cuando se trata de un elemento importante o id que tiene seis o siete propiedades principales, mantenerlo en forma bloqueada será más fácil. Aislará las partes importantes de su estilo, haciéndolos más fáciles de encontrar de un vistazo.
Leer estilos largos en notación de bloque también es más fácil porque la mayoría de los editores de texto envuelven líneas largas, y leer pares de valor de propiedad puede ser confuso cuando tienes que pasar 10 o más. Al ser el diseñador web, debe hacer una llamada sobre cómo espaciar el código CSS. Mantenga la eficiencia en mente y use su mejor juicio.
Trabajando con otros desarrolladores
Si eres un diseñador web profesional o aspiras a serlo, es probable que tarde o temprano trabajes con un equipo. Esto puede ser una bendición o una maldición, dependiendo del equipo.
Los diseñadores a menudo son reacios a realizar cambios importantes en su trabajo. El código CSS es un poco diferente porque estás tratando de crear un diseño hermoso usando solo valores de propiedad, y los archivos pueden desordenarse cuando se pasan entre unas pocas manos. Entonces, mantente organizado.
Los comentarios son una gran ayuda. Si las líneas o bloques de código pueden confundir o confundir a otros, los comentarios le ahorrarán horas. Explique todo lo que ponga en la hoja de estilos de la manera más elegante posible.
Asegúrese de que no se sobrescriban los estilos duplicados o anexados. Imagina que el h1 a h4 los encabezados tienen un estilo muy alto en un documento CSS, pero luego algunos códigos más abajo cambian sus fuentes. Esto podría ser inmensamente confuso para alguien que no escribió el código y ahora tiene que pasar y corregir el error.
La comunicación también es crítica. Podría escribir el código más eficiente, pero la falta de comunicación condenará a su equipo. Concéntrese en la tarea a mano y trabaje con las ideas creativas producidas colectivamente por el equipo (no solo las suyas).
Mantenga un registro de los documentos CSS separados
Otra forma de mantener el código limpio y organizado es mantener los tipos de estilo separados. Esto funciona bien para sitios web grandes en los que mantener todos los estilos en un solo documento sería poco realista.
Facebook es un buen ejemplo. Es probable que tenga muchos estilos diferentes para todas sus páginas: perfil, búsqueda, registro, fotos, etc. Si los estilos estuvieran todos consolidados en un solo archivo, no me gustaría ser el tipo que tiene que ordenar el código solo para arreglar un error simple
Facebook recibe mucho más tráfico que tu sitio web, pero los principios son los mismos. Si la organización es una preocupación, hojas de estilo separadas pueden recorrer un largo camino. Los diseñadores web a menudo organizan código en función del aspecto del documento que estructura (por ejemplo, layout.css , text.css , forms.css ).
No todos los estilos deben cargarse en cada página. Y aquí radica el beneficio: el método permite una mayor personalización al construir su sitio web. Reducirá enormemente el tiempo de análisis simplemente creando vistas y estilos separados.
Pruebas de soporte para IE
Los desarrolladores web siempre han pintado Internet Explorer como el villano, especialmente con CSS. Afortunadamente, puede aplicar comentarios condicionales (que parecen comentarios regulares a la mayoría de los navegadores) al HTML.
Puede usarlos para aplicar estilos en Internet Explorer. Echa un vistazo a los comentarios condicionales si no estás familiarizado con ellos; pueden ser invaluables cuando las propiedades CSS no funcionan correctamente y necesita una alternativa.
Con el lanzamiento de Internet Explorer 9 Beta , nos estamos acercando cada vez más a una experiencia de Internet unificada. El único problema es la cantidad de personas que aún ejecutan navegadores tan antiguos como IE6 e IE7, que tienen errores de procesamiento serios (debido a motores de procesamiento defectuosos) y, en ocasiones, requieren estilos externos. Afortunadamente, el soporte ha mejorado y Microsoft parece estar cambiando las cosas.
Agregar una tabla de contenido
Este paso es opcional, pero creo que funciona de maravilla para mis hojas de estilo. Puede almacenar la tabla fuera del documento CSS en sí, pero he encontrado que esto es algo contraproducente, especialmente porque agregar comentarios en línea es muy fácil.
Las principales razones para poner una tabla de contenidos en sus estilos son que facilita el acceso y optimiza el proceso de edición. Ponga marcadores al comienzo de su documento para separar el código en divisiones lógicas.
Crear sus propias claves es un buen enfoque. Por ejemplo, si planea dividir su tabla de acuerdo con las áreas principales del documento (diseño, fuente, encabezado, navegación, etc.), puede ingresar las secciones con caracteres únicos.
Podrías usar =!layout y =!font para delinear las secciones de diseño y fuente, respectivamente. Probablemente no se encontrará con esas secuencias exactas de caracteres en ninguna parte del código, por lo que agregarlas a su tabla y al comienzo de cada sección de comentarios debería ser seguro. Luego, use la función de búsqueda en su editor de texto para saltar a la sección que desee.
Esta es también una buena estrategia para proyectos en los que muchas personas mirarán el código. Mantiene todo organizado y accesible.
Hay muchas maneras de optimizar el código y hacerlo más eficiente, y estos consejos son un gran comienzo. CSS está evolucionando y se están formando muchas ideas nuevas al respecto.
Necesitas pasión y dedicación para triunfar en la industria del diseño. Si puede aferrarse a su pasión por el diseño digital, mantenerse al día con las mejores prácticas de CSS no debería ser difícil. Llegar a otros en esta gran comunidad global de diseñadores web puede ser de gran ayuda; los expertos de la industria suelen estar felices de compartir sus técnicas e innovaciones.
Esta publicación fue escrita exclusivamente para Webdesigner Depot por Jake Rocheleau , un apasionado diseñador de páginas web y entusiasta de las redes sociales. A Jake le encanta leer y escribir sobre las últimas tendencias digitales y de Internet y las redes con la comunidad de diseño. Para saber más sobre su trabajo, búscalo en Twitter @ jakerocheleau .
¿Cuáles son sus métodos para simplificar CSS? ¿Alguna sugerencia para desarrolladores CSS noveles? ¿Qué características nuevas o soporte adicional le gustaría ver en futuras versiones de CSS?