Semantics & Maintenance

1. Semantics & Maintenance Mae Paulino Front-end Developer syndeolabs | g2ix

12. Semantics & Maintenance Mae Paulino Front-end Developer syndeolabs | g2ix

13. Semantics

14. Semantic code Using the right code/tag/element, IDs and class names that describesthe content

15. Wrong: <p class=“entry-title”> <strong> This is a title </strong> </p>

16. Wrong: <p class=“entry-title”> <strong> This is a title </strong> </p> Right: <h2> This is a title </h2>

17. Wrong: <table> <tr> <td width=“40%”> <img /> </td> <td width=“40%”> <img /> </td> </tr> </table>

18. Wrong: <table> <tr> <td width=“40%”> <img /> </td> <td width=“40%”> <img /> </td> </tr> </table> Right: <ul class=“images-list”> <li> <img /> </li> <li> <img /> </li> </ul>

19. Be semantic

20. Be semantic • The specs is your friend

21. Be semantic • The specs is your friend • Look at your page with and without the style

22. Be semantic • The specs is your friend • Look at your page with and without the style • Think of the hierarchy

23. Be semantic • The specs is your friend • Look at your page with and without the style • Think of the hierarchy • Not limited to just tags

24. Be semantic • The specs is your friend • Look at your page with and without the style • Think of the hierarchy • Not limited to just tags • Avoid presentational IDs and class names

25. Be semantic • The specs is your friend • Look at your page with and without the style • Think of the hierarchy • Not limited to just tags • Avoid presentational IDs and class names • Be generic and descriptive

26. Be semantic • The specs is your friend • Look at your page with and without the style • Think of the hierarchy • Not limited to just tags • Avoid presentational IDs and class names • Be generic and descriptive Use: images-list-vertical

27. Be semantic • The specs is your friend • Look at your page with and without the style • Think of the hierarchy • Not limited to just tags • Avoid presentational IDs and class names • Be generic and descriptive Use: images-list-vertical images-home-list

28. Use Generic ids & class names As much as possible. Keep in mind the future uses of the class names.

29. Use Generic ids & class names

30. Use Generic ids & class names • Don’t be afraid to rewrite/revise

31. Use Generic ids & class names • Don’t be afraid to rewrite/revise • IDs for main parts of the site, classes for everything else

32. Use Generic ids & class names • Don’t be afraid to rewrite/revise • IDs for main parts of the site, classes for everything else CSS: • Avoid adding specific height/width in every element as much as possible

33. You are not alone

34. You are not alone • Comment everything (Or at least make the IDs and class names self-explanatory)

35. You are not alone • Comment everything (Or at least make the IDs and class names self-explanatory) • Organize CSS (hierarchy)

36. You are not alone • Comment everything (Or at least make the IDs and class names self-explanatory) • Organize CSS (hierarchy) Example: #header {} #header ul {}

37. Optimize your HTML & CSS

38. Optimize your HTML & CSS But don’t overdo it!

39. Optimize your HTML & CSS

40. Optimize your HTML & CSS • If you get dizzy just by looking at your newly optimized CSS/HTML files, you might have overdone it

41. Optimize your HTML & CSS • If you get dizzy just by looking at your newly optimized CSS/HTML files, you might have overdone it • Delete markups and selectors that aren’t in use and properties like the following: • border:0 solid #000

42. Optimize your HTML & CSS • If you get dizzy just by looking at your newly optimized CSS/HTML files, you might have overdone it • Delete markups and selectors that aren’t in use and properties like the following: • border:0 solid #000 • Use only what is necessary

43. Adhere to a style guide

44. Adhere to a style guide

45. Adhere to a style guide • Prepare it beforehand

46. Adhere to a style guide • Prepare it beforehand • Be strict in implementing it

47. Summary

48. Summary • Be concise

49. Summary • Be concise • Use structural classes and IDs and/or add comments

50. Summary • Be concise • Use structural classes and IDs and/or add comments • Optimize your code