Buenas Prácticas de CSS

1,625 views

Published on

Todos pasamos por la mala experiencia de tomar un proyecto para encontrarnos con un cáos total en la hoja de estilos y/o descubrir que cada miembro del equipo ha hecho las cosas a su manera. Ni hablar de retomar un trabajo luego de mucho tiempo y no poder entender ni encontrar lo que hicimos ni cómo lo hicimos. Esta charla pretende plantear soluciones a estos problemas para un mejor desarrollo y organización de nuestros proyectos, particularmente en el uso del CSS.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,625
On SlideShare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Buenas Prácticas de CSS

  1. 1. JavierEspaña BUENAS PRÁCTICAS DE CSS TRABAJO EN EQUIPO Y A GRAN ESCALA Todos pasamos por la mala experiencia de tomar un proyecto para encontrarnos con un caos total en la hoja de estilos y/o descubrir que cada miembro del equipo ha hecho las cosas a su manera. Ni hablar de retomar un trabajo luego de mucho tiempo y no poder entender ni encontrar lo que hicimos ni cómo lo hicimos. Esta charla pretende plantear soluciones a estos problemas para un mejor desarrollo y organización de nuestros proyectos, particularmente en el uso del CSS. Introducción Prácticas ConsultasUn repaso de la charla y mis más de 10 años Plantearemos los inconvenientes del Escucharé sus preguntas y trataremos deen diseño y desarrollo web. desarrollo a gran escala y sus soluciones. llegar a resoluciones aptas. Contacto©JavierEspaña Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana
  2. 2. SI TE INTERESA LA CHARLA Y quieres que la exponga en un evento, empresa o conferencia no dudes en contactarme a: info@javierespana.com Por favor no robes este materialJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 1DISEÑO Y DESARROLLO WEB
  3. 3. PEQUEÑA INTRODUCCIÓNJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 2DISEÑO Y DESARROLLO WEB
  4. 4. UNAS PALABRAS SOBRE MÍ javierespana.comJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 3DISEÑO Y DESARROLLO WEB
  5. 5. ALGUNOS DE MIS TRABAJOS MTV EMA 2011 Steve Argyle Kid’s Choice Awards 2011 http://ema.mtv.co.uk/ http://www.steveargyle.com/ http://kca.mundonick.com/JavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 4DISEÑO Y DESARROLLO WEB
  6. 6. ALGUNOS DE MIS TRABAJOS Cuenca D’Amico MTV at the Movies Sunmesa Events http://www.cuencadamico.com.ar/ http://movies.mtv.co.uk/ http://www.sunmesaevents.com/JavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 5DISEÑO Y DESARROLLO WEB
  7. 7. ACERCA DE ESTA CHARLAJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 6DISEÑO Y DESARROLLO WEB
  8. 8. BUENAS PRÁCTICASJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 7DISEÑO Y DESARROLLO WEB
  9. 9. SEAMOS ORGANIZADOS Crear y mantener una correcta estructura de carpetas vsJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 8DISEÑO Y DESARROLLO WEB
  10. 10. SEAMOS ORGANIZADOS Sectorizar el CSS usando comentariosJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 9DISEÑO Y DESARROLLO WEB
  11. 11. UTILIZAR COMENTARIOS Aprovechemos esta herramienta para dejar registro y comunicar +JavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 10DISEÑO Y DESARROLLO WEB
  12. 12. HOJAS DE RESET Son escenciales para el correcto desarrollo cross-browserJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 11DISEÑO Y DESARROLLO WEB
  13. 13. ATENCIÓN A LOS NOMBRES Darle sentido semántico a las clases vsJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 12DISEÑO Y DESARROLLO WEB
  14. 14. ATENCIÓN A LOS NOMBRES Facilitar la lectura utilizando nombres de clases en minúsculas vsJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 13DISEÑO Y DESARROLLO WEB
  15. 15. ATENCIÓN A LOS NOMBRES Agrupar selectores para facilitar la lectura y futuras actualizaciones vsJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 14DISEÑO Y DESARROLLO WEB
  16. 16. CUIDEMOS LA ESCRITURA Tomemos una decisión y hagámosla cumplirJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 15DISEÑO Y DESARROLLO WEB
  17. 17. CUIDEMOS LA ESCRITURA Escribir de manera sencilla y fácil de seguir para otrosJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 16DISEÑO Y DESARROLLO WEB
  18. 18. CUIDEMOS LA ESCRITURA Aprovechemos las notaciones cortas de cada propiedad vsJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 17DISEÑO Y DESARROLLO WEB
  19. 19. CUIDEMOS LA ESCRITURA Agrupemos selectores con el mismo comportamiento vsJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 18DISEÑO Y DESARROLLO WEB
  20. 20. CUIDEMOS LA ESCRITURA Evitemos el exceso de selectores innecesarios vsJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 19DISEÑO Y DESARROLLO WEB
  21. 21. UN PARÉNTESIS SOBRE ESPECIFICIDADJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 20DISEÑO Y DESARROLLO WEB
  22. 22. ¿QUÉ ES LA ESPECIFICIDAD? La manera en que se determina que regla toma precedencia por sobre otra 0 1 2 3 Inline IDs Clases Elementos Pseudo-clases y Pseudo-Elementos AtributosJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 21DISEÑO Y DESARROLLO WEB
  23. 23. ¿QUÉ ES LA ESPECIFICIDAD? La manera en que se determina que regla toma precedencia por sobre otra 0 0 0 0 0 0 1 0 Inline IDs Clases Elementos Pseudo-clases y Pseudo-Elementos AtributosJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 22DISEÑO Y DESARROLLO WEB
  24. 24. ¿QUÉ ES LA ESPECIFICIDAD? La manera en que se determina que regla toma precedencia por sobre otra 0 1 1 1 1 0 0 0 Inline IDs Clases Elementos Pseudo-clases y Pseudo-Elementos AtributosJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 23DISEÑO Y DESARROLLO WEB
  25. 25. VOLVIENDO A BUENAS PRÁCTICASJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 24DISEÑO Y DESARROLLO WEB
  26. 26. DISTINTOS NAVEGADORES Diferencias entre múltiples hojas de estilo y hacks de CSS Javascript Condicionales IE CSS HacksJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 25DISEÑO Y DESARROLLO WEB
  27. 27. APROVECHEMOS LAS NUEVAS OPCIONESJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 26DISEÑO Y DESARROLLO WEB
  28. 28. CONDICIONALES IE Utilizar condicionales para declarar clases en los documentosJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 27DISEÑO Y DESARROLLO WEB
  29. 29. ORDENEMOS EL CSS3 Si utilizamos nuevas ventajas de CSS3 mantenerlas ordenadas para evitar problemas +JavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 28DISEÑO Y DESARROLLO WEB
  30. 30. CUIDADOS GENERALESJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 29DISEÑO Y DESARROLLO WEB
  31. 31. IMPORTANTES DETALLES Cosas para no olvidar en nuestros desarrollos Validar Minificar Técnicas / ScriptsJavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 30DISEÑO Y DESARROLLO WEB
  32. 32. ¡MUCHAS GRACIAS!JavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 31DISEÑO Y DESARROLLO WEB
  33. 33. SIGAMOS EN CONTACTO Web: javierespana.com Blog: moonward.net Twitter: @javierespana ¿PREGUNTAS?JavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 32DISEÑO Y DESARROLLO WEB
  34. 34. ¡GRACIAS POR TODO!JavierEspaña Contacto Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 33DISEÑO Y DESARROLLO WEB

×