No escribas CSS
Escriba en un preprocesador como Sass, Stylus o LESS que compila a CSS. Probablemente va a reutilizar estilos en toda su aplicación, pero necesitará mezclarlo con otros. Los preprocesadores le brindan la capacidad de utilizar fragmentos reutilizables de CSS y extenderlos en otros contextos. También tienen variables, lo que significa que puede configurar los colores base, las fuentes y las medidas en un solo lugar y usarlas en su código.
Escribe mejor HTML
- REST vs. SOAP: ¿Cómo elegir el mejor servicio web?
- Cómo ver tablas de bases de datos en MySQL
- ¿Hay alguna mejor empresa de diseño de sitios web en Dubai?
- ¿Cuáles son algunos componentes buenos y gratuitos de Angular 2 que todo desarrollador debería tener?
- Cómo optimizar correos electrónicos
Es difícil escribir un buen CSS si tu HTML es basura. Use etiquetas semánticas HTML5 para mantener su contenido ordenado y con un nombre razonable. Los navegadores también proporcionan CSS predeterminado para ciertas etiquetas HTML5 que simplemente puede reutilizar, o su archivo normalize.css hará lo mismo, pero de una mejor manera. (Ver siguiente punto)
Use un archivo normalize.css
Antes de escribir una sola línea de su propio CSS, los navegadores proporcionan el suyo propio que puede dejar o anular. El problema es que no es muy bueno y difiere entre los navegadores. http://necolas.github.io/normali… es la respuesta a ese problema. Anula estos valores predeterminados del navegador y proporciona otros nuevos que deberían verse bastante consistentes en todos los navegadores. También está disponible para varios preprocesadores.
Primero móvil
Su CSS resultará mucho mejor si funciona primero en dispositivos móviles y utiliza consultas min-width @media para agregar excepciones a su apariencia en pantallas más grandes. Piénselo, diseñar hasta tamaños de pantalla más grandes generalmente implica agregar, no eliminar. Las cosas tienden a ser más grandes, mejor espaciadas y, lo que es más importante, se apoyan en los estilos que ya tiene para su sitio móvil. Me parece que escribo mucho menos código cuando escribo móvil primero.
Usa flexbox si puedes
Este nuevo conjunto de propiedades CSS resuelve muchos de los molestos problemas con el diseño (pie de página adhesivo, cuadrículas, centrado vertical, incluso espaciado) que anteriormente eran difíciles o sin sentido en CSS anteriores. Verifique el Módulo de diseño de caja flexible para ver si cumple con los requisitos de su navegador.
Usa rems si puedes.
… y si no puedes, usa ems. Los píxeles no son una buena forma de definir el tamaño, especialmente cuando las densidades de píxeles comienzan a diferir de una pantalla a otra. Por lo menos, no le brinda información útil sobre cómo se relaciona el tamaño con el resto del documento. El sucesor de esto fue “em” (por ejemplo, tamaño de fuente: 1.1 em;) Esto definió una proporción del tamaño del elemento padre. Los ems de raíz son diferentes solo porque son proporcionales al tamaño de la raíz. Por lo tanto, defina el tamaño de fuente de su etiqueta html como 16px, luego use rem (por ejemplo, font-size: 1.1rem;) para definir la proporción de su tamaño a este tamaño base. Su texto será grande y legible por defecto y las excepciones le indicarán claramente el contexto de cómo es diferente.
Utilice nombres de clase que se refieran al contenido, no al estilo en sí.
.col-3, .left-pane, .red-box … estos son nombres que describen cómo aparecen las cosas, pero para eso es el CSS en sí. Originalmente no teníamos que hacer esto porque algo como .left-pane era una clase reutilizable que podría ser diferentes tipos de contenido. Con los preprocesadores (ver primer punto), podemos escribir .news, .share, .updates, etc., y simplemente extendernos desde el bloque .left-pane que definimos.
Si puede, use solo un margen inferior en los bloques de texto
No puedo decirte cuántas veces he necesitado ajustar el espacio entre líneas y bloques de texto solo para descubrir que necesito jugar con el margen inferior del texto encima, el margen superior del bloque en sí y el relleno / margen de otros elementos en la página. El diseño del texto es un proceso meticuloso cuando se hace correctamente, pero apegarse a dar bloques de texto con margen 0 a excepción de la parte inferior es un método sorprendentemente útil para hacer esto mucho más fácil.
Mantenga un archivo separado “kludges.css” para soluciones rápidas y listas para la entrega
Imagine que su fecha límite se acerca rápidamente. No importa cuán disciplinado sea al escribir CSS, encuentro que puedo terminar el 10% restante del proyecto antes de una fecha límite si solo agrego algo de CSS que sea rápido, efectivo, pero terrible para mantener el código limpio y extensible. Piense en mover las cosas a su lugar acolchándolas hasta la muerte (estremecimiento) en lugar de refactorizar la estructura. Sin embargo, hacer esto último me llevará mucho más tiempo. Ponga ese 10% en un archivo CSS separado llamado “kludges.css”. Una vez que tenga más tiempo para regresar y hacerlo bien, simplemente puede eliminar este archivo y seguir transportando en camiones.
Un agradecimiento especial al colega Neo Jono Mallanyk por algunos de estos consejos.
