css in iterations

Download Css In Iterations

If you can't read please download the document

Post on 14-Aug-2015

63 views

Category:

Education

2 download

Embed Size (px)

TRANSCRIPT

  1. 1. CSS IN ITERATIONS Created by Vladimir Zhydal
  2. 2. LEVEL 1 Html/Css are for html coders only
  3. 3. INLINE STYLES
  4. 4. RESULTS Almost impossible to maintain. Almost impossible to make themes. Widespread duplication of code.
  5. 5. IMPULSE I can avoid duplication.
  6. 6. div{ margin:10px padding:10px }
  7. 7. RESULTS There is no so many copy-paste. Super hard to maintain. Super hard to make themes.
  8. 8. IMPULSE I can separate content and styles.
  9. 9. LEVEL UP
  10. 10. LEVEL 2 Lets see how html coders do that
  11. 11. FIRST STEPS OF SEPARATION Lets use separate files for styles and html. Lets use ids (just because they are fast).
  12. 12.

div{ margin:10px padding:10px } #redcontainer{ background:red } #greencontainer{ background:green } #bluecontainer{ background:blue } 13. RESULTS Possible to make themes. Still hard to maintain. High coupling. A lot of side effects. 14. IMPULSE Id => class (because ids cannot be reused through the html code). Think about structure. Think about semantics in naming. 15. COMMENTS FOR DEFINING STRUCTURE .container{ margin:10px padding:10px } /******HEADER*******/ .header{ background:red } /******ENDHEADER*******/ /******BODY*******/ .content{ background:red } /******ENDBODY*******/ 16. RESULTS A bit easier to maintain (just because its easier to find some logical parts). There is a big chance to place a style to a wrong group. 17. IMPULSE Place logical parts of your styles in separate files. Performance optimizations shouldn't affect project structure. Its possible to use build tools instead of developing in one file. 18. DEEP NESTING (CSS COUPLED TO DOM) .containerdiv{ color:red } .containerdiv.containerul{ color:green } .containerdiv.containerulliaspan{ color:blue } 19. RESULTS Hard to maintain. Hard to read and modify. Hard to override. 20. ONE LINE STYLES .containerdiv{color:red} .containerdiv.containerul{color:green} .containerdiv.containerulliaspan{color:blue} 21. RESULTS Big problems with VCS. Hard to maintain. Super hard to read and modify. Hard to override. 22. IMPULSE I can make my project more structured and maintainable with some modules. Naming and semantic are really important. 23. LEVEL UP 24. LEVEL 3 Im not an html coder, but Im a programmer. I can do better! 25. THINK ABOUT SCALABLE AND MODULAR CSS Scalable and Modular Architecture for CSS Object Oriented CSS Dont Repeat Yourself CSS Block, Element, Modifier 26. THINK IN MODULES After getting a mockup try to split it to modules. Make it possible to reuse your modules. Write container independent CSS. Use strong naming conventions.