1 / 53

Semantics & Maintenance

Learn how to code semantically and maintain your code effectively with tips on using the right code/tags, avoiding presentational IDs and class names, and optimizing your HTML and CSS.

fross
Download Presentation

Semantics & Maintenance

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

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

  3. Semantics

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

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

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

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

  8. 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>

  9. Be semantic

  10. Be semantic • The specs is your friend

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

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

  13. 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

  14. 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

  15. 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

  16. 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

  17. 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

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

  19. Use Generic ids & class names

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

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

  22. 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

  23. You are not alone

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

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

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

  27. Optimize your HTML & CSS

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

  29. Optimize your HTML & CSS

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

  31. 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

  32. 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

  33. Adhere to a style guide

  34. Adhere to a style guide

  35. Adhere to a style guide • Prepare it beforehand

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

  37. Summary

  38. Summary • Be concise

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

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

More Related