El documento presenta las buenas prácticas de CSS para trabajar en equipo y a gran escala. Propone organizar los archivos CSS, usar comentarios para sectorizar el código y darle sentido a los nombres de clases. También recomienda hojas de reset, escribir el CSS de forma sencilla y aprovechar las nuevas opciones de CSS3.

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 Consultas
Un repaso de la charla y mis más de 10 años Plantearemos los inconvenientes del Escucharé sus preguntas y trataremos de
en 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. 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 material
JavierEspaña Contacto
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 1
DISEÑO Y DESARROLLO WEB

3. PEQUEÑA INTRODUCCIÓN
JavierEspaña Contacto
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 2
DISEÑO Y DESARROLLO WEB

4. UNAS PALABRAS SOBRE MÍ
javierespana.com
JavierEspaña Contacto
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 3
DISEÑO Y DESARROLLO WEB

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 4
DISEÑO Y DESARROLLO WEB

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 5
DISEÑO Y DESARROLLO WEB

7. ACERCA DE ESTA CHARLA
JavierEspaña Contacto
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 6
DISEÑO Y DESARROLLO WEB

8. BUENAS PRÁCTICAS
JavierEspaña Contacto
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 7
DISEÑO Y DESARROLLO WEB

9. SEAMOS ORGANIZADOS
Crear y mantener una correcta estructura de carpetas
vs
JavierEspaña Contacto
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 8
DISEÑO Y DESARROLLO WEB

10. SEAMOS ORGANIZADOS
Sectorizar el CSS usando comentarios
JavierEspaña Contacto
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 9
DISEÑO Y DESARROLLO WEB

11. UTILIZAR COMENTARIOS
Aprovechemos esta herramienta para dejar registro y comunicar
+
JavierEspaña Contacto
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 10
DISEÑO Y DESARROLLO WEB

12. HOJAS DE RESET
Son escenciales para el correcto desarrollo cross-browser
JavierEspaña Contacto
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 11
DISEÑO Y DESARROLLO WEB

13. ATENCIÓN A LOS NOMBRES
Darle sentido semántico a las clases
vs
JavierEspaña Contacto
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 12
DISEÑO Y DESARROLLO WEB

14. ATENCIÓN A LOS NOMBRES
Facilitar la lectura utilizando nombres de clases en minúsculas
vs
JavierEspaña Contacto
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 13
DISEÑO Y DESARROLLO WEB

15. ATENCIÓN A LOS NOMBRES
Agrupar selectores para facilitar la lectura y futuras actualizaciones
vs
JavierEspaña Contacto
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 14
DISEÑO Y DESARROLLO WEB

16. CUIDEMOS LA ESCRITURA
Tomemos una decisión y hagámosla cumplir
JavierEspaña Contacto
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 15
DISEÑO Y DESARROLLO WEB

17. CUIDEMOS LA ESCRITURA
Escribir de manera sencilla y fácil de seguir para otros
JavierEspaña Contacto
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 16
DISEÑO Y DESARROLLO WEB

18. CUIDEMOS LA ESCRITURA
Aprovechemos las notaciones cortas de cada propiedad
vs
JavierEspaña Contacto
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 17
DISEÑO Y DESARROLLO WEB

19. CUIDEMOS LA ESCRITURA
Agrupemos selectores con el mismo comportamiento
vs
JavierEspaña Contacto
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 18
DISEÑO Y DESARROLLO WEB

20. CUIDEMOS LA ESCRITURA
Evitemos el exceso de selectores innecesarios
vs
JavierEspaña Contacto
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 19
DISEÑO Y DESARROLLO WEB

21. UN PARÉNTESIS
SOBRE ESPECIFICIDAD
JavierEspaña Contacto
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 20
DISEÑO Y DESARROLLO WEB

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
Atributos
JavierEspaña Contacto
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 21
DISEÑO Y DESARROLLO WEB

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
Atributos
JavierEspaña Contacto
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 22
DISEÑO Y DESARROLLO WEB

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
Atributos
JavierEspaña Contacto
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 23
DISEÑO Y DESARROLLO WEB

25. VOLVIENDO A
BUENAS PRÁCTICAS
JavierEspaña Contacto
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 24
DISEÑO Y DESARROLLO WEB

26. DISTINTOS NAVEGADORES
Diferencias entre múltiples hojas de estilo y hacks de CSS
Javascript Condicionales IE CSS Hacks
JavierEspaña Contacto
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 25
DISEÑO Y DESARROLLO WEB

27. APROVECHEMOS
LAS NUEVAS OPCIONES
JavierEspaña Contacto
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 26
DISEÑO Y DESARROLLO WEB

28. CONDICIONALES IE
Utilizar condicionales para declarar clases en los documentos
JavierEspaña Contacto
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 27
DISEÑO Y DESARROLLO WEB

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 28
DISEÑO Y DESARROLLO WEB

30. CUIDADOS GENERALES
JavierEspaña Contacto
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 29
DISEÑO Y DESARROLLO WEB

31. IMPORTANTES DETALLES
Cosas para no olvidar en nuestros desarrollos
Validar Minificar Técnicas / Scripts
JavierEspaña Contacto
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 30
DISEÑO Y DESARROLLO WEB

32. ¡MUCHAS GRACIAS!
JavierEspaña Contacto
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 31
DISEÑO Y DESARROLLO WEB

33. SIGAMOS EN CONTACTO
Web: javierespana.com
Blog: moonward.net
Twitter: @javierespana
¿PREGUNTAS?
JavierEspaña Contacto
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 32
DISEÑO Y DESARROLLO WEB

34. ¡GRACIAS POR TODO!
JavierEspaña Contacto
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 33
DISEÑO Y DESARROLLO WEB