Si desea convertirse en un experto en CSS, no basta con dominar el uso de selectores de CSS. También radica en la planificación general del trabajo, dominar el flujo de trabajo y mejorar la mantenibilidad y eficiencia de la hoja de estilo. En este artículo, Jina Bolton selecciona 10 técnicas de aplicación CSS de 12 diseñadores destacados y las recomienda a todos.
Últimamente, he estado buscando formas de crear hojas de estilo más atractivas. Usando CSS podemos crear los maravillosos sitios web que queramos, y escribir CSS es un placer en sí mismo.
¿Cómo crear una hoja de estilo más atractiva? ¿Qué características debería tener tu hoja de estilo?
Hace unos meses, tuve el placer de asistir a la Conferencia Web Vision 2007 en Portland, Oregon, EE.UU. Para este evento, investigué a 12 diseñadores que han hecho contribuciones destacadas al diseño y desarrollo web. Los resultados de esta investigación, combinados con mi propia experiencia laboral, me ayudaron a resumir un conjunto de buenos métodos para crear hermosas hojas de estilo.
01. No dejes que CSS tenga demasiadas etiquetas.
Vincular o importar hojas de estilo puede parecer una tarea confusa. Pero quiero enfatizar por qué esto es tan importante. He visto a muchos desarrolladores de sitios web tener documentos CSS limpios y bien organizados, pero lentamente, porque es posible que no puedan actualizarlos rápidamente en un corto período de tiempo, o simplemente son demasiado vagos para administrarlos, las exquisitas hojas de estilo creadas anteriormente. se perdieron.
Imagine que está trabajando en un sitio web enorme que necesita publicar cientos de contenidos. Debido a que el tiempo es limitado, es necesario realizar cambios o actualizaciones rápidas anidando u organizando CSS. Pasa año tras año, y esta costumbre continúa, hasta que un día te dicen que la web va a ser rediseñada por completo (pero el contenido seguirá siendo el mismo) y sólo tienes una semana para crearla (pruebas incluidas).
Normalmente, actualizar una hoja de estilo es un método muy sencillo. A menos que realice cambios en áreas dispersas del sitio web durante mucho tiempo. No se puede tener una idea general de la estructura de la hoja de estilo del sitio web. Entonces ahora tienes dos opciones: a. Organizar todo y rediseñarlo dentro de un mes (buena suerte); b.
No dejes que tu trabajo se vuelva así. Vincular o importar su hoja de estilo no es un asunto casual. Crea una hoja de estilo limpia y ordenada y mantenla ahí, y serás más feliz en el trabajo.
Nota: No agregue demasiadas marcas a su hoja de estilo. Si intenta crear una nueva hoja de estilo cada vez que actualiza o agrega contenido nuevo, definitivamente se está metiendo en problemas. Demasiados enlaces y hojas de estilo importadas dificultarán la eliminación de errores y dificultarán el mantenimiento de su hoja de estilo. Es comprensible que los sitios web más grandes creen hojas de estilo separadas para diferentes partes. Sólo tenga cuidado de no ir demasiado al extremo.
Vale la pena mencionar que agregar muchas hojas de estilo aumentará el número de solicitudes http, lo que también puede afectar el trabajo posterior. Además, el navegador Microsoft IE6 tiene ciertas restricciones en la hoja de estilo de 32 conexiones. .
02. La semántica no es sólo una palabra de la industria
Ya sabes, tengo que mencionarlo, la semántica será tu buena amiga. Además de elegir los elementos más apropiados y significativos para expresar tu contenido, también debes asegurarte de elegir los valores de los atributos de clase e identificación. Fuera de tu trabajo, te simplificará la vida (y también simplificará la vida de tu equipo de trabajo, si trabajas en equipo). Eche un vistazo a la definición a continuación:
.l13k {color: #369}
Si acaba de llegar a trabajar y ve esta clase en este archivo CSS, ¿la encontraría inmediatamente? Probablemente no sea posible, porque el nombre de esta clase probablemente sea una abreviatura, por lo que no existe una forma precisa de saberlo de inmediato. O tal vez lo pusiste ahí y sabes lo que significa hoy, pero ¿puedes garantizar que seguirás sabiendo lo que significa muchos años después?
Ahora, veamos esta definición:
.izquierda-azul {color: #369}
Probablemente sabrá inmediatamente lo que hace este selector de clases, al igual que sabe que el módulo azul en la columna de la izquierda está ahí, lo que significa que funciona. Mencioné anteriormente que es posible que necesites rediseñar dentro de una semana. Durante el rediseño, este módulo se colocó a la derecha y todavía estaba en rojo. Esta clase ya no tiene el valor de existir. Así que ahora tengo que elegir, cambiar todos los valores de los atributos o dejarlo como está. (Esto puede generar más confusión).
Es mejor no agregar color o dimensiones de largo y ancho a los atributos de su clase. Debe evitar cualquier valor de propiedad que sea palabra literal. Los atributos directos (como el cuadro) pueden provocar la separación del contenido.
Finalmente, veamos una convención de nomenclatura más apropiada:
.descripción del producto { color: #369 }
Aquí puedes verlo. La descripción del producto definida en este estilo es muy clara sin importar cómo la cambies.
03.Beneficios de agregar comentarios
Si sus comentarios están bien organizados y dentro del alcance de CSS, etiquete cada sección claramente. Es mejor asegurarse de que los comentarios sean visualmente destacados para que puedan ubicarse rápidamente cuando se desplaza el contenido y se miran diez líneas. Luego, comentar en su documento CSS será de gran ayuda para usted o para otros en el desarrollo futuro. La mayoría de los comentarios básicos darán pistas sobre por qué se utiliza esta regla aquí.
Consejos y notas
Agregar comentarios puede ayudarlo a usted o a futuros desarrolladores a evitar confusiones innecesarias. Mantenga este hábito. Ver ejemplo:
/* Desactivar bordes para imágenes vinculadas */
img { borde: 0 }
Hora y firma
A algunos diseñadores y desarrolladores les gusta indicar la fecha y hora de la última actualización de un documento CSS, junto con su nombre y estado inicial. Esta información puede brindarle información sobre quién estuvo involucrado, así como una pista sobre cuál es la documentación más reciente.
/* Estilos de tipografía de Sushimonster
Actualizado: jueves 18.10.07 a las 5:15 p.m.
Autor: Jina Bolton
-------------------------------------------------- --*/
Esta es una buena idea, especialmente si trabaja en equipo; tenga en cuenta que algunos equipos deben omitir esta información (algunas empresas prefieren no tener estos nombres y fechas en el documento). Por lo tanto, es una buena idea simplemente tomar una Mira, ¿es necesaria esta información?
Clasificación de organizaciones
Es una buena idea utilizar comentarios para describir brevemente varias partes de su CSS. Por ejemplo, si todos los tipos de títulos están agrupados, deberás mirarlos para distinguirlos.
/* ENCABEZADO
-------------------------------------------------- --*/
Explicaré esto más adelante cuando hable de "diferenciar entre tipos".
marcado de anotaciones
Si su documento CSS organiza estilos dispersos como dije anteriormente, el marcado de comentarios puede ayudarlo a que sea más fácil cuando desee encontrar esa parte del archivo. Puede utilizar símbolos de funciones, palabras clave y encontrar el resultado final.
/* =ENCABEZADO
-------------------------------------------------- --*/
Esto resulta útil en hojas de estilo largas y complejas. Puedes leer sobre esto en Stop Design. .
referirse a