BlogCode

Cómo optimizar tu CSS

manteniendo su CSS Los archivos pequeños y organizados son muy importantes, especialmente si pasará algún tiempo editando su sitio en el futuro (o si otros usarán el código, es decir, los clientes). Afortunadamente, hay una serie de técnicas diferentes que se pueden usar para ayudar a su organización y tamaño CSS archivos para simplificarlos. Habiendo más aerodinámico CSS le ahorrará tiempo y estrés a largo plazo, por lo que es importante hacerlo bien. Primero, mantener una sola hoja de estilo, normalmente llamada style.css, es un buen lugar para comenzar en su organización. CSS. Tener una sola hoja de estilo para la mayor parte (si no todo) de su sitio web mantiene todo junto en un solo lugar, lo que hace que el proceso de edición sea más eficiente.

Código con estilo

Código con estilo

Para mantenerte CSS archivos de manera más eficiente, es importante comenzar usando un buen editor de código como TextWrangler en tu Mac o Bloc de notas++ en Windows Esto tiene una serie de ventajas clave. Además de ser fácil de usar, un programa como TextWrangler también codifica diferentes partes del código, lo que ayuda al progreso de la codificación. Esto es muy útil para asegurarse de que cada estilo que ha definido esté escrito correctamente, ya que el estilo no cambiará de color a menos que TextWrangler lo reconozca como un CSS estilo. Las pestañas son otra buena característica de TextWrangler, que le permite mantener varios archivos abiertos a la vez, lo que facilita la verificación cruzada. Para hacerlo aún más eficiente CSS es una buena idea establecer un diseño que se use en todos sus archivos CSS hojas de estilo Quizás la técnica más utilizada es la definición. identificación o clase (usando # o . respectivamente), luego una llave abierta { seguida de una nueva línea con sangría para comenzar el estilo, así:

#header {
 width:500px;
 height:250px;
 }

Seguir esta técnica de uso común hará que su hoja de estilo esté más organizada y sea más fácil de codificar. Las siguientes técnicas ayudarán a garantizar que su apariencia sea consistente a lo largo de su viaje. CSS archivos

Organizar por ubicación

Organizar por ubicación

Con cualquier sitio el número de CSS Los ID y las clases utilizadas pueden llegar fácilmente a un gran número, por lo que es vital que CSS la hoja de estilo está bien organizada. Una técnica que es extremadamente útil es ordenar sus ID y Clases según el lugar en el que aparecen en el sitio real. P.ej; COLOCACIÓN CSS estilo de encabezado hacia la parte superior de la hoja de estilo y estilo de pie de página hacia la parte inferior. Al mantener esto consistente en todos los sitios web que codifica, siempre que abra una hoja de estilo que haya creado, sabrá exactamente dónde buscar para encontrar el estilo que desea editar. Además, para ayudar aún más a organizar los estilos, es aconsejable nombrar los elementos con nombres obvios, como encabezado, pie de página, barra lateral, contenido principal, etc., lo que le permite saber a qué se refiere cada pieza de estilo, lo que ayuda aún más a la organización. Sin embargo, si los elementos cambian de propósito, asegúrese de que sus nombres reflejen los cambios; tener un elemento llamado Encabezado que se encuentra en la parte inferior de la página puede volverse muy confuso y hacer que ordenar por ubicación sea una tarea más desalentadora.

CSS Comentarios

Comentarios CSS

Esto lleva a utilizar CSS comentarios de las hojas de estilo. Aunque no siempre se usa, CSS Los comentarios son muy útiles para distinguir las diferentes partes de la hoja de estilo. Si ha estructurado sus hojas de estilo con estilos vinculados desde el encabezado hasta la parte superior y viceversa, entonces puede usar CSS comentarios para marcar el principio y el final de diferentes secciones, como encabezado y pie de página o elementos de contenido principal. USANDO CSS Los comentarios son simples. En cualquier parte de la hoja de estilo el comentario comienza con /* y luego asegúrese de terminar el comentario con */ . Esencialmente, nada en el comentario, ya sea código o texto, será analizado por el navegador, lo que hace CSS comentarios muy útiles para dejar notas y descripciones sobre diferentes partes de la hoja de estilo. Tal vez dos usos más para CSS comentarios podría ser dejar comentarios para sus clientes, por lo que si desean realizar más cambios en su sitio en el futuro, tienen una guía para ayudarlo. Además, puede haber diferentes estilos para una misma cosa. identificación o clase que desea conservar para un posible uso o prueba. En lugar de etiquetar los ID y las clases con un 2 al final, por ej. header2impidiendo que el estilo sea analizado simplemente envuelva lo que sería header2 en el /* y */. Además de mantener la hoja de estilo más organizada, así como usar 2 técnica» puede ensuciarse fácilmente, esta técnica también ayuda a crear diferentes versiones del estilo en la hoja de estilo de una manera no obstructiva, con facilidad de redistribución (copiar y pegar en lugar de cambiar números y eliminar el estilo anterior). Sin embargo, mientras CSS los comentarios son muy útiles, también es importante tener en cuenta el tamaño y la longitud de la hoja de estilo y equilibrarla en consecuencia. Los comentarios no deben ocupar más espacio que los comentarios reales. CSS; deben ser breves y al grano. También es importante tener esto en cuenta en relación con las diferentes versiones. ¿Realmente necesita todas las versiones que ha guardado en su hoja de estilo? ¿Podría guardar una hoja de estilo duplicada en otro lugar? Tener múltiples versiones de estilos en su hoja de estilo puede resultar confuso, por lo que es crucial considerar alternativas, como guardar archivos duplicados.

Evite la duplicación

Una vez que la hoja de estilo está estructurada de manera accesible, puede ser fácil detectar duplicaciones innecesarias en el estilo. gracias a la naturaleza CSS, ID y clases heredan automáticamente el estilo de su padre, lo que elimina la necesidad de duplicar el estilo. Quizás la técnica más fácil es definir una serie de estilos clave al comienzo de la hoja de estilo. Definir estilos universales para enlaces y texto es útil y elimina la necesidad de definir constantemente el estilo para cada uno. identificación y la clase En particular, esta también es una forma efectiva de mantener un estilo consistente en un sitio web y también tiene un impacto positivo en la reducción del tamaño de la hoja de estilo. Con una herramienta como el Inspector de Google Chrome, es posible ver qué estilos se heredan y de dónde, lo que ayuda aún más a eliminar la duplicación de hojas de estilo no deseadas.

Usa lo que necesitas

A continuación, para simplificarlo aún más CSS considera lo que CSS las clases que implementas. ¿Tienes que usarlos todos? Es fácil dejarse llevar y definir clases que no necesita de inmediato pero que cree que podría necesitar en el futuro; para mantenerte CSS simplificación de la hoja de estilo, solo uso pequeño y organizado CSS clases que son una parte integral de cómo funciona su sitio Codifique solo lo que sea necesario. Para lograr esto, evite duplicar estilos como se mencionó y recuerde eliminar los estilos no utilizados y que ya no sean relevantes.

Conclusión

Siguiendo estas sencillas técnicas es posible crear mejor organizado y más pequeño CSS archivos que son fáciles de navegar y editar, tanto ahora como en el futuro, para usted y sus clientes. ¿Tiene algún buen consejo para mantener CSS organizado y simplificado? ¡Dinos en los comentarios!

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba
Cerrar