CSS Good Practices

381 views

Published on

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.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
381
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSS Good Practices

  1. 1. JavierEspaña CSS GOOD PRACTICES FOR TEAMWORK AND BIG SCALE PROJECTS Weve 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. Lets 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 QuestionsA 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 findexperience 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. 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 materialJavierEspaña Contact Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 1DESIGN AND WEB DEVELOPMENT
  3. 3. BRIEF INTRODUCTIONJavierEspaña Contact Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 2DESIGN AND WEB DEVELOPMENT
  4. 4. SOME WORDS ABOUT ME javierespana.comJavierEspaña Contact Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 3DESIGN AND WEB DEVELOPMENT
  5. 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 4DESIGN AND WEB DEVELOPMENT
  6. 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 5DESIGN AND WEB DEVELOPMENT
  7. 7. ABOUT THIS TALKJavierEspaña Contact Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 6DESIGN AND WEB DEVELOPMENT
  8. 8. GOOD PRACTICESJavierEspaña Contact Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 7DESIGN AND WEB DEVELOPMENT
  9. 9. BE ORGANIZED Create and mantain a correct folder structure for your projects vsJavierEspaña Contact Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 8DESIGN AND WEB DEVELOPMENT
  10. 10. BE ORGANIZED Separate and index CSS using commentsJavierEspaña Contact Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 9DESIGN AND WEB DEVELOPMENT
  11. 11. USE COMMENTS Take advantage of them to leave notes for future developers +JavierEspaña Contact Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 10DESIGN AND WEB DEVELOPMENT
  12. 12. USE RESET STYLESHEETS They are essential for any good cross-browser developmentJavierEspaña Contact Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 11DESIGN AND WEB DEVELOPMENT
  13. 13. PAY ATTENTION TO NAMES Give classes semantic sense vsJavierEspaña Contact Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 12DESIGN AND WEB DEVELOPMENT
  14. 14. PAY ATTENTION TO NAMES Make reading the CSS easier using lowercase selectors and properties vsJavierEspaña Contact Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 13DESIGN AND WEB DEVELOPMENT
  15. 15. PAY ATTENTION TO NAMES Group up selectors to make the reading and updates easier vsJavierEspaña Contact Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 14DESIGN AND WEB DEVELOPMENT
  16. 16. MIND YOUR WRITING Take a team desition and make it countJavierEspaña Contact Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 15DESIGN AND WEB DEVELOPMENT
  17. 17. MIND YOUR WRITING Choose and easy way for everyone to followJavierEspaña Contact Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 16DESIGN AND WEB DEVELOPMENT
  18. 18. MIND YOUR WRITING Short notation help you keep the code clean vsJavierEspaña Contact Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 17DESIGN AND WEB DEVELOPMENT
  19. 19. MIND YOUR WRITING Again, group up selectors with the same behavior vsJavierEspaña Contact Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 18DESIGN AND WEB DEVELOPMENT
  20. 20. MIND YOUR WRITING Avoid using long selectors without a need vsJavierEspaña Contact Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 19DESIGN AND WEB DEVELOPMENT
  21. 21. A QUICK NOTE ABOUT SPECIFICITYJavierEspaña Contact Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 20DESIGN AND WEB DEVELOPMENT
  22. 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-ElementsJavierEspaña Contact Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 21DESIGN AND WEB DEVELOPMENT
  23. 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-ElementsJavierEspaña Contact Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 22DESIGN AND WEB DEVELOPMENT
  24. 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-ElementsJavierEspaña Contact Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 23DESIGN AND WEB DEVELOPMENT
  25. 25. BACK TO GOOD PRACTICESJavierEspaña Contact Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 24DESIGN AND WEB DEVELOPMENT
  26. 26. DIFFERENT BROWSERS You can approach the issue with different stylesheets or CSS hacks Javascript Condicionales IE CSS HacksJavierEspaña Contact Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 25DESIGN AND WEB DEVELOPMENT
  27. 27. TAKE ADVANTAGE OF THE NEW PRACTICESJavierEspaña Contact Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 26DESIGN AND WEB DEVELOPMENT
  28. 28. CONDITIONAL IE COMMENTS Declare your documents using different classes for each browserJavierEspaña Contact Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 27DESIGN AND WEB DEVELOPMENT
  29. 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 28DESIGN AND WEB DEVELOPMENT
  30. 30. GENERAL RULESJavierEspaña Contact Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 29DESIGN AND WEB DEVELOPMENT
  31. 31. IMPORTANT DETAILS Things we should not forget in our developments Validate Minify Techniques / ScriptsJavierEspaña Contact Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 30DESIGN AND WEB DEVELOPMENT
  32. 32. THANK YOU!JavierEspaña Contact Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 31DESIGN AND WEB DEVELOPMENT
  33. 33. KEEP IN TOUCH Web: javierespana.com Blog: moonward.net Twitter: @javierespana QUESTIONS?JavierEspaña Contact Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 32DESIGN AND WEB DEVELOPMENT
  34. 34. THANKS FOR YOUR TIME!JavierEspaña Contact Web: javierespana.com / Blog: moonward.net / Twitter: @javierespana 33DESIGN AND WEB DEVELOPMENT

×