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.
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