Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Css Architecture

6,540 views

Published on

Published in: Technology, Education
  • Be the first to comment

Css Architecture

  1. 1. CSS Architecture<br />Standards and Best Practices<br />
  2. 2. “CSS starts out being a pain for everyone. Don&apos;t worry. You&apos;re not stupid, CSS is.” - John Manoogian<br />
  3. 3. Reasons for this <br />Common issues throughout the sites<br />Knowledge sharing<br />Advice on overcoming problems<br />
  4. 4. Multiple CSS files create confusionPeterson’s homepage<br />
  5. 5. Combine CSS files <br />One master CSS file for common elements <br />One project level CSS file for project specific styles <br />One CSS file for print specific<br />Other CSS filesOne CSS file for each cobrandOne CSS file for IE specific styles <br />
  6. 6. Inline Styles and Internal Stylesheets<br />
  7. 7. Inline Styles and Internal Stylesheets<br />
  8. 8. HTML Structure<br />
  9. 9. Naming Conventions<br />Be consistent<br />name your elements what they are, not what they do (semantic vs. presentational)<br />
  10. 10. Hacks<br />
  11. 11. Hacks<br />THIS DOESN’T WORK!<br />
  12. 12. Hacks<br />
  13. 13. Hacks<br />Can I code it in a way that doesn’t require any specific targeting in the first place?<br />Can I instead use a conditional comment?<br />
  14. 14. Tables aren’t the enemyThere are many places where using tables is entirely appropriate<br />
  15. 15. Tables aren’t the enemy<br />
  16. 16. Tables have their place, but not for layout<br />
  17. 17. Main Navigation HTML (yes, that’s all there is to it!)<br />
  18. 18. Main Navigation CSSThe heavy lifting<br />
  19. 19. Selectors<br />You don’t need to add a class to every element<br />
  20. 20. Selectors<br />
  21. 21. Selectors<br />
  22. 22. Don’t Repeat Yourself<br />Combine styles where possible<br />
  23. 23. Don’t Repeat Yourself<br />Use shorthand wherever possible<br />
  24. 24. Commenting<br />Color/Layout glossary<br />Flag different sections<br />
  25. 25. Validation<br />Not just for HTML, but for CSS too<br />Ensures your code is error free and interpreted in the right way for browsers<br />Search engines<br />
  26. 26. Floats<br />Wrapping content around an element<br />Horizontally, not vertically<br />To stop content from wrapping, you must clear the float<br />
  27. 27. DON’T PANIC<br />

×