JavierEspaña                                              BUENAS PRÁCTICAS DE CSS                                         ...
SI TE INTERESA LA CHARLA                     Y quieres que la exponga en un evento, empresa o                         conf...
PEQUEÑA INTRODUCCIÓNJavierEspaña              Contacto                          Web: javierespana.com / Blog: moonward.net...
UNAS PALABRAS SOBRE MÍ                                                                        javierespana.comJavierEspaña...
ALGUNOS DE MIS TRABAJOS            MTV EMA 2011                                      Steve Argyle                         ...
ALGUNOS DE MIS TRABAJOS            Cuenca D’Amico                                   MTV at the Movies                     ...
ACERCA DE ESTA CHARLAJavierEspaña              Contacto                          Web: javierespana.com / Blog: moonward.ne...
BUENAS PRÁCTICASJavierEspaña                Contacto                            Web: javierespana.com / Blog: moonward.net...
SEAMOS ORGANIZADOS  Crear y mantener una correcta estructura de carpetas                                                  ...
SEAMOS ORGANIZADOS  Sectorizar el CSS usando comentariosJavierEspaña                 Contacto                             ...
UTILIZAR COMENTARIOS  Aprovechemos esta herramienta para dejar registro y comunicar                                       ...
HOJAS DE RESET  Son escenciales para el correcto desarrollo cross-browserJavierEspaña                  Contacto           ...
ATENCIÓN A LOS NOMBRES  Darle sentido semántico a las clases                                                              ...
ATENCIÓN A LOS NOMBRES  Facilitar la lectura utilizando nombres de clases en minúsculas                                   ...
ATENCIÓN A LOS NOMBRES  Agrupar selectores para facilitar la lectura y futuras actualizaciones                            ...
CUIDEMOS LA ESCRITURA  Tomemos una decisión y hagámosla cumplirJavierEspaña               Contacto                        ...
CUIDEMOS LA ESCRITURA  Escribir de manera sencilla y fácil de seguir para otrosJavierEspaña                   Contacto    ...
CUIDEMOS LA ESCRITURA  Aprovechemos las notaciones cortas de cada propiedad                                               ...
CUIDEMOS LA ESCRITURA  Agrupemos selectores con el mismo comportamiento                                                   ...
CUIDEMOS LA ESCRITURA  Evitemos el exceso de selectores innecesarios                                                      ...
UN PARÉNTESIS                          SOBRE ESPECIFICIDADJavierEspaña                 Contacto                           ...
¿QUÉ ES LA ESPECIFICIDAD?  La manera en que se determina que regla toma precedencia por sobre otra             0          ...
¿QUÉ ES LA ESPECIFICIDAD?  La manera en que se determina que regla toma precedencia por sobre otra       0                ...
¿QUÉ ES LA ESPECIFICIDAD?  La manera en que se determina que regla toma precedencia por sobre otra       0                ...
VOLVIENDO A                          BUENAS PRÁCTICASJavierEspaña                Contacto                            Web: ...
DISTINTOS NAVEGADORES  Diferencias entre múltiples hojas de estilo y hacks de CSS                Javascript               ...
APROVECHEMOS                    LAS NUEVAS OPCIONESJavierEspaña              Contacto                          Web: javier...
CONDICIONALES IE  Utilizar condicionales para declarar clases en los documentosJavierEspaña                  Contacto     ...
ORDENEMOS EL CSS3  Si utilizamos nuevas ventajas de CSS3 mantenerlas ordenadas para evitar problemas                      ...
CUIDADOS GENERALESJavierEspaña              Contacto                          Web: javierespana.com / Blog: moonward.net /...
IMPORTANTES DETALLES  Cosas para no olvidar en nuestros desarrollos                 Validar                               ...
¡MUCHAS GRACIAS!JavierEspaña                Contacto                            Web: javierespana.com / Blog: moonward.net...
SIGAMOS EN CONTACTO                               Web: javierespana.com                                     Blog: moonward...
¡GRACIAS POR TODO!JavierEspaña                 Contacto                             Web: javierespana.com / Blog: moonward...
Próxima SlideShare
Cargando en…5
×

Buenas Prácticas de CSS

1.610 visualizaciones

Publicado el

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.

Publicado en: Tecnología, Empresariales
0 comentarios
1 recomendación
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
1.610
En SlideShare
0
De insertados
0
Número de insertados
24
Acciones
Compartido
0
Descargas
3
Comentarios
0
Recomendaciones
1
Insertados 0
No insertados

No hay notas en la diapositiva.

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

×