El reciclaje es palabra de moda y en el desarrollo Web significa que no es diferente. Se conserva la energía, en términos de esfuerzo!
En los últimos años de la escritura y la creación de HTML CSS a partir de diseños, que han seguido una serie de prácticas recomendadas, en la búsqueda de ahorro de tiempo y energía en lo que generalmente llamamos "re-inventar la rueda". Una y otra vez, me he dicho que tengo que crear unas cuantas plantillas, algún estándar reutilizables CSS que iba a usar fuera de la caja en mi trabajo futuro. Aunque no por completo, pero me las arreglé para conseguir algunos de los objetivos.
En la promoción, re-uso de CSS, he echado un vistazo a los pocos marcos de CSS que están comúnmente disponibles para nosotros y decidió ponerlas en práctica, ya que estos son de probada eficacia y creado por los desarrolladores experimentados tanto, que yo mismo. Más importante aún "Evite volver a inventar".
Aunque el conocimiento común a los veteranos, he tratado de pluma algunos de los principales conceptos y mejores prácticas y pensamientos que ha pasado en la creación de estos marcos de referencia, para hacer reciclaje de CSS es posible. Espero que esto ayudará a que algunos desarrolladores de CSS que están a punto de y, recientemente, abordaron el tren CSS!
Teclas de ciclismo Re de CSS:
Utilice Convenciones de nomenclatura
Esto tiene que ser el factor más importante en la toma de la CSS / HTML reutilizable. Dar nombres consistentes en elementos de página permite la reutilización de los componentes de la página y sus estilos con poca o modificaciones. En línea con este argumento, HTML5 Incluso, en un cambio importante cambio respecto a sus predecesores, es decir introducir algunas etiquetas estructural. <article>, <sección>, <header>, <aside> y <nav> [ ¿Qué va a aportar HTML5? ]. Incluso con HTML 4 (o inferior), lo mejor es llamar a las secciones habituales de la página consistanly como en el ejemplo sencillo a continuación ...
Recuerde, la mayoría páginas de su proyecto, llegar a tener los elementos básicos estructurales mismas. Identificar los elementos básicos comunes página ....
<div id="contenedor">
<div id="cabecera"> ... </ div>
<div id="nav"> ... </ div>
<div id="sidebar"> ... </ div>
<div id="footer"> ... </ div>
</ Div> Restablecer estilos predeterminados Restablece (CSS): Si usted utiliza un marco o escribir el suyo propio, debe proporcionar Restablece CSS [ ¿Cuáles son Restablece CSS? ], ya que reducir o eliminar las incoherencias a veces visuales que se producen entre distintos navegadores. En palabras simples, el mecanismo de restablecimiento CSS establece los estilos de elemento HTML en los valores de cero o nula, reemplazando así los valores por defecto del navegador pueden plantea. Esto proporciona un borrón y cuenta nueva para establecer las propiedades de estos elementos sin efecto de los impagos User-Agent [ Agente de usuario CSS2.1 predeterminados de hojas de estilo ]. Todos los marcos de la CSS no tiene mecanismo de restablecimiento. Si va a escribir usted el propietario de Restablece CSS, una palabra de advertencia es que si te olvidas de restablecer una propiedad clave, y podría conducir a problemas de cross-browser, que son muy difíciles de depurar. Recuerde, mantenga una copia de los estilos de reinicio y colóquelos en cada proyecto nuevo que cree.
cuerpo, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
antes, la forma, fieldset, de entrada, selección, área de texto,
p, blockquote, mesa, th, td
{
border: 0px;
margin: 0;
padding: 0;
} Establecer valores predeterminados (Estilos de línea de base) a los elementos:
Después de haber establecido (en cero o nulo) los valores por defecto de ciertos atributos de ciertos elementos de HTML, es necesario aplicar algunos de los estilos a través de todas las instancias de estos elementos. Estos ajustes por defecto puede variar según el diseño o de acuerdo con las mejores prácticas que siguen.
La mayoría de los marcos de CSS, siempre introduce algunos nuevos valores por defecto, además de restablecer los estilos predeterminados del navegador.
Estos valores por defecto es vacío de los valores predeterminados de User-Agent (despojado por el restablecimiento CSS), estos serán en todos los navegadores.
Recuerde, los estilos de línea de base se utilizan para definir los estilos que van ser utilizados en todo el diseño. por ejemplo.
html {font-size: 77%; font-family: Arial, sans-serif;}
fuerte, h1, h2, h3, h4, h5, h6 {font-weight: bold;} Estilos Resumen de componentes comunes de HTML y clases comunes:
La mayor parte del proyecto que consta de varias páginas se tienen en común los elementos HTML utilizados en todo el sitio, por ejemplo, algún tipo de formularios, alertas y los errores, ventanas emergentes personalizados, Mesas de luz, etc Dado que tales componentes se utilizan de nuevo a través de proyectos, que serán útiles para proporcionar una un conjunto de clases asociadas con estilos predefinidos para estos componentes y usted puede ahorrar mucho tiempo.
Aparte de la definición de las definiciones de estilos reutilizables para los componentes comunes de HTML, podríamos clases de estilos abstractos relacionados con la tipografía, el color o el diseño, incluso. Yo mismo tiendo a usar ... las clases comunes como Clearfix, Font08, FontGrey, AlignL, etc DisplayB
formulario de entrada {border: 0px; background: # ffffff; padding: 0px 10px; _padding: 0px 0px; altura: 26px; color: # 000000; line-height: 30px; font-size: 1.1em;}
forma textarea {border: 0px; background: # ffffff; color: # 000000; font-size: .9 em, line-height: 1.5em; overflow: visible;}
. Fbold {font-weight: bold; color: # cccccc;}
. Fgrey {color: # 666666;}
. Flightgrey {color: # bbbbbb;}
. Clearfix {clear: both;}
. Divisor de {border-top: 1px solid # 647B06; border-bottom: 1px solid # 9CC00A; altura: 0px;}
. Displayb {display: block;}. Displayn {display: none;}
. Alignr {text-align: right}. Alignc {text-align: center}
. Floatr {float: right;}. Floatl {float: left;} Soluciones a errores comunes peculiaridades navegador
Diversos navegadores poner en práctica el código CSS y proporcionar diferente nivel de apoyo a las especificaciones de CSS. El resultado de esta .... "Caprichos del navegador", que los desarrolladores se dejan de abordar. Sobre todo, persigue a los codificadores de la mayoría de IE6 CSS con un plazo que cumplir. La buena noticia es que la experiencia ha reunido a las posibles soluciones reutilizables para estas cuestiones (a menudo denominado como hacks CSS ).
Recuerde, mantenga estos hacks / correcciones a mano
/ * El zoom lo siguiente: 1 regla es específicamente para IE6 + IE7. * /
* Html. Clearfix,
*:. First-child + html {clearfix
zoom: 1;
} Siga ajustando su CSS
- El hábito de reciclaje, no vendrá a ti en el día. Tiene que desarrollado. Así que el plan de su reciclaje. Téngalo en cuenta que usted podría defecto estilos abstractos, las definiciones de la tipografía, diseños, estilos de elementos HTML, etc Trate de pensar en el futuro.
- También mirar hacia atrás en sus proyectos anteriores, le ayudará a identificar los estilos que tienden a utilizar con frecuencia a través porjects. Resumen ella.
- Retire todos los estilos no utilizados. Esta práctica se mantendrá el marco de CSS de un síntoma común que se llama "Hinchazón" -
- Quitar estilos repetitivos.
- Construir un conjunto de estilos que son lo suficientemente flexibles como para transportarlo a través de proyectos.
Una mirada a los marcos CSS
Por último. Si está inspirado y va a utilizar uno o más de los marcos de CSS, Heres es una lista rápida de algunos de los más populares ....
- 960 Grid System : El sistema de cuadrícula 960 es un esfuerzo para racionalizar el flujo de trabajo de desarrollo web, proporcionando las dimensiones de uso común, sobre la base de un ancho de 960 píxeles. Existen tres variantes: 12, 16 y columnas 24, que pueden ser utilizados por separado o en tándem. Nada de pensamiento que no se puede crear uno para su propia facilidad, El marco proporciona plantillas de la red para la impresión en formato PDF, que se puede utilizar para trazar su designs.Bet página, se haría una impresión profesional, si usted lleva unas cuantas hojas cuando usted va a un cliente para la recogida de requisitos de interfaz de usuario. También ofrece plantillas básicas de red para el software de diseño popular como Fireworks, Flash, InDesign, Illustrator, Photoshop, Visio, etc proporcionar un "Starter for Ten" para comenzar su trabajo de diseño.
- Blueprint : Blueprint proporciona claramente clasificados para el restablecimiento de los archivos CSS, rejillas, formularios, impresión, tipografía, Plugins para los botones, pestañas y sprites, etc También proporciona soporte para IE como por separado incluyen.
- SenCSs : A diferencia de los dos anteriores, SenCSs (pronunciado sentido), no tiene definiciones CSS para la maquetación. Se incluye fuentes, rellenos, márgenes, tablas, listas, encabezados, Tabulaciones, formas y mucho más.
- BlueTrip : Su demanda principal a la fama fue eso, fue una combinación de las mejores características proporcionadas por otros marcos de otros como Blue oli de impresión, de viaje ... de ahí su nombre. Su conjunto de características incluye 24-columna de la cuadrícula, los estilos de tipografía, estilos de ORM, de impresión, botones, etc
- Rejillas de YUI : Presentado a usted por la red de desarrolladores Yahooo, soporta ancho de líquido (100%), así como los diseños preestablecidos diseños de ancho fijo en 750px, 950px, 974px, y, y la posibilidad de personalizar fácilmente a cualquier número. Como se puede ver, su punto de vista técnico sólo los componentes de diseño. YUI también proporcionó HTML / CSS para los conjuntos de elementos de página
- YAML (Sin embargo, otro diseño de varias columnas)
- Emastic
Recuerda que el uso de marcos CSS no implica que usted es perezoso para crear uno propio ... Esto implica que usted es inteligente para aprender de la experiencia de otros y errores, ahorrar tiempo y aumentan la productividad!!
