Download as PDF, PPTX
Uploaded byDen Widhana
HTML CSS Best Practices
HTML and CSS best practices include having proper document structure with a DOCTYPE, loading HTML content before scripts, using semantic elements, avoiding inline CSS, keeping code lean and well organized with comments, using practical class names, and utilizing CSS preprocessors for better file organization and avoiding repetitions. The overall goals are to have code that is well organized, modular, flexible, easy to read, edit, and maintain.
HTML CSS Best Practices
- 1. HTML & CSSBest Practices
- 2. HTML Some say it’sa forgiving language. Successful rendering != semantically correct.
- 3. Continually Refactor Code Taketime to evaluate and refactor your codes after you write it, looking for ways to condense it and make it more manageable.
- 4. Goal Be well organized,so that it is easy to read, edit, and maintain Be modular and flexible, allowing us to reuse code and patterns as necessary
- 5. Proper Document Structure DOCTYPEis an instruction to the web browser about what version of HTML the page is written in.
- 6. HTML content/structure/css/images ofyour page will be loaded first, Your users don't have to wait for a script to finish downloading before they see something in your page.
- 7. Standards-Compliant Markup ID attributevalue should be a unique value. Class attribute can be used multiple times.
- 9. Semantic Elements Using semantictags gives you many more hooks for styling your content
- 11.
- 12. Avoid Inline CSS InlineCSS can’t be reused.
- 13. Practical Class Values Classvalue not relate on function/content.
- 14. Class value notrelate on function/content.
- 15. Use multiple valuesin class attribute.
- 17. CSS Focus on keepingcode lean and well organized
- 18. Comments Keep our stylesorganized in logical groups. Provide a comment noting what the following styles pertain to.
- 19. Practical Class Name Classname should be modular
- 20.
- 22.
- 23. CSS Preprocessor Better fileorganization Nested syntax Variables Mixins Mathematical functions Operational functions (such as “lighten” and “darken”) Multiple files to generate only one. Avoid repetitions SASS / LESS
- 24.
- 25.
- 27. Overly Nested Rules UseSpecific Classes When Necessary
- 28. Extend Ruleset Use @extendto help you reuse other ruleset
- 29.
- 30. Goal Be well organized& be modular and flexible.
- 31.