5 Pasos a escribir mejor CSS Parte II
Esta es la segunda parte de 5 pasos para escribir mejor CSS. Hay un montón de tutoriales de CSS están disponibles en Internet, pero pocos son los tutoriales útiles. En este tutorial se encuentra 5 pasos para escribir mejor código CSS para su proyecto de página web siguiente. Espero que disfruten de este tutorial.
1. Mantenga las declaraciones CSS en una línea
Se recomienda mantener siempre las declaraciones CSS en una sola línea, que ayuda a mantener tu archivo CSS limpio y más pequeños. También ayuda a quitar los espacios no deseados y los personajes.
Código de buenas
; color : # 333333 ; background : #cccccc ; } h2 (font-size: 18px; color: # 333333; background: # cccccc;)
Bad Código
; color : # 333333 ; background : #cccccc ; } h2 (font-size: 18px; color: # 333333; background: # cccccc;)
2. Los elementos se combinan
Una de la mejor manera de ahorrar líneas de código es mediante la agrupación de selectores. Hay algunos ejemplos a continuación de lo que me refiero.
Código de buenas
H1, H2, H3 ( ; color : # 333 ; font-family: Arial, Helvetica, sans-serif; color: # 333; )
Bad Código
h1 ( ; color : # 333 ; font-family: Arial, Helvetica, sans-serif; color: # 333; ) h2 ( ; color : # 333 ; font-family: Arial, Helvetica, sans-serif; color: # 333; ) h3 ( ; color : # 333 ; font-family: Arial, Helvetica, sans-serif; color: # 333; )
3. Use "margen" a Centro de Diseño de
Muchos principiantes a CSS no puede entender por qué no se puede simplemente utilizar float: center para lograr ese efecto se centró en elementos de bloque. Si sólo fuera tan fácil! Lamentablemente, tendrás que utilizar.
Código
# Container ( ; /* top, bottom - and left, right*/ margin: 0 auto; / * arriba, abajo - y la izquierda, derecha * / width: xxxpx; )
4. Comentario tu CSS
Es una gran idea para comentar su código en secciones. Para añadir un comentario, simplemente añadir / * detrás del comentario, y * / para cerrarlo, así:
Código
/******** Código de inicio AQUÍ ********/
5. Usar CSS Comprimir Herramientas
si no quieren perder su tiempo en la modificación de sus hojas de estilo antiguo puede simplemente usar CSS en línea comprimir herramientas, que hacen su trabajo en segundos.
comprobar esta css línea comprimir herramientas ...
CSS Tidy
Limpieza Css
Optimizador de CSS
Flumpcakes optimizador de Css
cssdrive Css Comperasor
W3C CSS Validator
Conclusión
Estos son sólo algunos de los consejos que me ayudan a escribir mejor código. Espero que el tutorial también le ayudará a escribir mejor y limpiar el código. Aplique estos consejos para sus proyectos en curso y el próximo, y seguramente apreciarán el esfuerzo.
Si usted piensa que tutorial puede ser más mejor, por favor comparta con nosotros. Coméntanos
Si usted desea recibir más tutoriales de nosotros, por favor considera suscribirte a nuestro feed de RSS o por correo electrónico.
Promover Us
Artículos relacionados:
Si ha disfrutado leyendo este artículo, por favor, echa un vistazo a otros artículos relacionados a continuación:
Revell, dice el: 27 de noviembre 2009 a las 9:05 am Said:
Hola,
En primer lugar, el artículo nice! No hay muchos artículos que tratan el estilo de escritura de CSS. Tengo algunas ideas sobre el primer punto sin embargo. En mi opinión es mejor utilizar el estilo de escritura mucho tiempo en desarrollo y tienen una secuencia de comandos "minimizar las" tu CSS cuando la utilice en un entorno real.
Dave dice el: 27 de noviembre 2009 a las 10:06 am Said:
Estoy totalmente de acuerdo con el punto 1. Cuando tienes 3 declaraciones, 1 línea de código es grande, pero cuando hay 6 o 7, se vuelve realmente difícil de leer.
Todo esto para salvar a tal 1KB? Yo no lo entiendo.
Aparte de que uno, algunas ideas decente aquí.
Pasado del blog de Dave .. 2 más must-have de CMS que permite plugins para WordPress
Fasce Nicolo ', dice el: 27 de noviembre 2009 a las 10:34 am Said:
Estoy de acuerdo con Dave, el punto 1 está mal, simplemente porque si usted trabaja en un equipo que es muy difícil de leer un código de línea.
Usted también debe escribir el código en orden alfabético para el mismo propósito.
EJ Semeijn dice el: 27 de noviembre 2009 a las 10:57 am Said:
¿Por qué dejar de publicar estos consejos? Internet está lleno de estos consejos básicos. Y también está de acuerdo con # 1. No tiene su código más fácil de entender, simplemente hace más difícil.
Mis consejos sería poner la estructura de la página en tu CSS, hacer secciones para el reajuste, las partidas, las formas, los elementos HTML, fuentes, etc De esta manera tu CSS será más fácil de entender.
safetycopy dice el: 27 de noviembre 2009 a las 9:38 pm Said:
Estoy de acuerdo con varios comentarios de otras personas - el punto 1 del ejemplo de código malo es el código no está mal - es sólo un estilo alternativo. Este anuncio sólo sería útil para completar novatos y no queremos empezar a enseñar a los supuestos malos ya!
último blog safetycopy's .. Photo
Josh dice el: 29 de noviembre 2009 a las 4:38 am Said:
Hago todos estos excepto el último. No me parece que es útil para comprimir mi CSS, pero a diferencia de todos los lectores anteriores Estoy muy de acuerdo en el punto # 1. Acabo de empezar a escribir mi CSS en una línea y ha sido tremendo. El desplazamiento ha sido mucho menor. Supongo que esto es una preferencia personal. Algo que ayuda es que el editor que utilizo envuelve el código hasta la siguiente línea de lo que no hay desplazamiento horizontal.
Pasado del blog de Josh .. Addicted to Flickr
FAQPAL dice el: 29 de noviembre 2009 a las 4:06 pm Said:
Consejos para principiantes Bueno, yo no minimizar las CSS mi tampoco, tal vez un proyecto mucho más grande se beneficiarían de minifying, pero el sitio medio no necesita realmente.
En cuanto a # 1, pienso que la redacción es lo que está echando a la gente, en lugar de decir, "Bad Código", quizá debería decir como safetycopy ha sugerido, "Alternate Código".
Último blog FAQPAL's .. efecto de las burbujas con CSS
favshare dice el: 30 de noviembre 2009 a 12:49 am Said:
Este artículo ha sido compartido en favSHARE.net. Ir a votar ya!
último blog favshare's .. 25 Tutoriales Diseño Web
Jean-Patrick Smith, dice el: 11 de diciembre 2009 a las 11:15 am Said:
Por lo general crear un archivo PHP que incluye todos los archivos CSS, minifies, y añade la compresión + expira cabeceras.
De esa manera no tienen que estar de acuerdo con el punto # 1 ...
Lo que es más importante que tener todas tus CSS en una sola línea es reducir el número de llamadas HTTP con los sprites CSS y combinar todas sus CSS / JS en un archivo.