Presented @ Geek Talk, Ice House

1. HTML & CSS Best Practices

2. HTML
Some say it’s a forgiving language.
Successful rendering != semantically correct.

3. Continually Refactor Code
Take time 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
DOCTYPE is an instruction to the web browser about what version of HTML the page is written in.

6. HTML content/structure/css/images of your 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 attribute value should be a unique value.
Class attribute can be used multiple times.

9. Semantic Elements
Using semantic tags gives you many more hooks for styling your content

11. Syntax Organized

12. Avoid Inline CSS
Inline CSS can’t be reused.

13. Practical Class Values
Class value not relate on function/content.

14. Class value not relate on function/content.

15. Use multiple values in class attribute.

17. CSS
Focus on keeping code lean and well organized

18. Comments
Keep our styles organized in logical groups.
Provide a comment noting what the following styles pertain to.

19. Practical Class Name
Class name should be modular

20. Shorthand Property

22. Modular Styles

23. CSS Preprocessor
Better file organization
Nested syntax
Variables
Mixins
Mathematical functions
Operational functions (such as “lighten” and “darken”)
Multiple files to generate only one.
Avoid repetitions
SASS / LESS

24. SASS

25. File Organization

27. Overly Nested Rules
Use Specific Classes When Necessary

28. Extend Ruleset
Use @extend to help you reuse other ruleset

29. Resource
Case studies, co-workers, internet

30. Goal
Be well organized & be modular and flexible.

31. Fin.