CSS Good Practices
0 likes304 views
The document discusses best practices for managing CSS in large-scale web development projects to prevent disorganization and chaos among team members. It emphasizes strategies such as maintaining a clear folder structure, using comments for future developers, ensuring semantic naming for classes, and understanding CSS specificity. The talk also invites questions and offers a way to contact the presenter for potential conferences.
CSS Good Practices
- 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