We've all been through the bad experience of taking a project and find absolute chaos on the stylesheet and/or discover that each member of the team has done things their way. Let's not even talk about retaking a project after a long time and not being able to find what we did or how we did it. This talk tries to give solutions to these issues for a better development and the organization of our projects, specially in the use of CSS.

1. JavierEspaña
CSS GOOD PRACTICES
FOR TEAMWORK AND BIG SCALE PROJECTS
We've all been through the bad experience of taking a project and find
absolute chaos on the stylesheet and/or discover that each member of
the team has done things their way. Let's not even talk about retaking a
project after a long time and not being able to find what we did or how
we did it.
This talk tries to give solutions to these issues for a better
development and the organization of our projects, specially in the use
of CSS.
Introduction Practices Questions
A brief intro to the talk and my 10 years of We will lay out the issues of big scale I’ll hear your questions and we’ll try to find
experience in design and web development. development and it’s solutions. solutions to them.
Contact
©JavierEspaña Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana

2. INTERESTED IN THIS TALK?
If you want me to give this conference at your event,
company or even via online meeting contact me:
info@javierespana.com
Please don’t steal this material
JavierEspaña Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 1
DESIGN AND WEB DEVELOPMENT

3. BRIEF INTRODUCTION
JavierEspaña Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 2
DESIGN AND WEB DEVELOPMENT

4. SOME WORDS ABOUT ME
javierespana.com
JavierEspaña Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 3
DESIGN AND WEB DEVELOPMENT

5. SOME OF MY WORKS
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 Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 4
DESIGN AND WEB DEVELOPMENT

6. SOME OF MY WORKS
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 Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 5
DESIGN AND WEB DEVELOPMENT

7. ABOUT THIS TALK
JavierEspaña Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 6
DESIGN AND WEB DEVELOPMENT

8. GOOD PRACTICES
JavierEspaña Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 7
DESIGN AND WEB DEVELOPMENT

9. BE ORGANIZED
Create and mantain a correct folder structure for your projects
vs
JavierEspaña Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 8
DESIGN AND WEB DEVELOPMENT

10. BE ORGANIZED
Separate and index CSS using comments
JavierEspaña Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 9
DESIGN AND WEB DEVELOPMENT

11. USE COMMENTS
Take advantage of them to leave notes for future developers
+
JavierEspaña Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 10
DESIGN AND WEB DEVELOPMENT

12. USE RESET STYLESHEETS
They are essential for any good cross-browser development
JavierEspaña Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 11
DESIGN AND WEB DEVELOPMENT

13. PAY ATTENTION TO NAMES
Give classes semantic sense
vs
JavierEspaña Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 12
DESIGN AND WEB DEVELOPMENT

14. PAY ATTENTION TO NAMES
Make reading the CSS easier using lowercase selectors and properties
vs
JavierEspaña Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 13
DESIGN AND WEB DEVELOPMENT

15. PAY ATTENTION TO NAMES
Group up selectors to make the reading and updates easier
vs
JavierEspaña Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 14
DESIGN AND WEB DEVELOPMENT

16. MIND YOUR WRITING
Take a team desition and make it count
JavierEspaña Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 15
DESIGN AND WEB DEVELOPMENT

17. MIND YOUR WRITING
Choose and easy way for everyone to follow
JavierEspaña Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 16
DESIGN AND WEB DEVELOPMENT

18. MIND YOUR WRITING
Short notation help you keep the code clean
vs
JavierEspaña Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 17
DESIGN AND WEB DEVELOPMENT

19. MIND YOUR WRITING
Again, group up selectors with the same behavior
vs
JavierEspaña Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 18
DESIGN AND WEB DEVELOPMENT

20. MIND YOUR WRITING
Avoid using long selectors without a need
vs
JavierEspaña Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 19
DESIGN AND WEB DEVELOPMENT

21. A QUICK NOTE
ABOUT SPECIFICITY
JavierEspaña Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 20
DESIGN AND WEB DEVELOPMENT

22. WHAT IS SPECIFICITY?
It’s the way CSS determines which rule takes precedence for an object
0 1 2 3
Inline IDs Classes Elements
Pseudo-classes & Attributes Pseudo-Elements
JavierEspaña Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 21
DESIGN AND WEB DEVELOPMENT

23. WHAT IS SPECIFICITY?
It’s the way CSS determines which rule takes precedence for an object
0 0 0 0
0 0 1 0
Inline IDs Classes Elements
Pseudo-classes & Attributes Pseudo-Elements
JavierEspaña Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 22
DESIGN AND WEB DEVELOPMENT

24. WHAT IS SPECIFICITY?
It’s the way CSS determines which rule takes precedence for an object
0 1 1 1
1 0 0 0
Inline IDs Classes Elements
Pseudo-classes & Attributes Pseudo-Elements
JavierEspaña Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 23
DESIGN AND WEB DEVELOPMENT

25. BACK TO
GOOD PRACTICES
JavierEspaña Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 24
DESIGN AND WEB DEVELOPMENT

26. DIFFERENT BROWSERS
You can approach the issue with different stylesheets or CSS hacks
Javascript Condicionales IE CSS Hacks
JavierEspaña Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 25
DESIGN AND WEB DEVELOPMENT

27. TAKE ADVANTAGE
OF THE NEW PRACTICES
JavierEspaña Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 26
DESIGN AND WEB DEVELOPMENT

28. CONDITIONAL IE COMMENTS
Declare your documents using different classes for each browser
JavierEspaña Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 27
DESIGN AND WEB DEVELOPMENT

29. ORGANIZE YOUR CSS3
Keep your new CSS3 declarations ordered correctly to avoid future issues
+
JavierEspaña Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 28
DESIGN AND WEB DEVELOPMENT

30. GENERAL RULES
JavierEspaña Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 29
DESIGN AND WEB DEVELOPMENT

31. IMPORTANT DETAILS
Things we should not forget in our developments
Validate Minify Techniques / Scripts
JavierEspaña Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 30
DESIGN AND WEB DEVELOPMENT

32. THANK YOU!
JavierEspaña Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 31
DESIGN AND WEB DEVELOPMENT

33. KEEP IN TOUCH
Web: javierespana.com
Blog: moonward.net
Twitter: @javierespana
QUESTIONS?
JavierEspaña Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 32
DESIGN AND WEB DEVELOPMENT

34. THANKS FOR YOUR TIME!
JavierEspaña Contact
Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 33
DESIGN AND WEB DEVELOPMENT