More Related Content
Viewers also liked
Viewers also liked (14)
Similar to OOCSS and SMACSS Case Study
Similar to OOCSS and SMACSS Case Study (20)
Recently uploaded
Recently uploaded (20)
OOCSS and SMACSS Case Study
- 1. #iiofficecebu OOCSS and SMACSS Case Study
- 2. #iiofficecebu KOTA FUJISHIRO Front-end web developer Twitter:@fujineko_kota Facebook:kota fujishiro
- 3. #iiofficecebu It is easy to write CSS codes. But , It is difficult to design CSS.
- 4. #iiofficecebu selector { property : value }
- 5. #iiofficecebu #main h2{ … } #main .contact .header h2{ … } #sidebar h2{ … } #main #sidebar
- 6. #iiofficecebu #main h2 { … } #main .contact .header h2 { … } #sidebar h2 { … } .somewhere .title h2 { … } In this case, the title h2 depends on the parent. It is not flexible or reusable.
- 10. #iiofficecebu !important You will meet problems about the specificity
- 11. #iiofficecebu In the end , your source code will be messy.
- 12. #iiofficecebu Break into smaller parts and Follow the rule.
- 14. #iiofficecebu OOCSS SMACSS Object Oriented CSS Scalable and Modular Architecture for css
- 16. #iiofficecebu What is the OOCSS?
- 17. #iiofficecebu Make a website with objects like LEGO block.
- 19. #iiofficecebu Make a website with objects like LEGO block.
- 21. #iiofficecebu What is the SMACSS?
- 22. #iiofficecebu The main concept of SMACSS is to categorize CSS into 5 rules. 1.Base 2.Layout 3.Module 4.State 5.Theme
- 23. #iiofficecebu
- 24. #iiofficecebu
- 26. #iiofficecebu
- 28. #iiofficecebu
- 30. #iiofficecebu
- 31. #iiofficecebu
- 33. #iiofficecebu Let’s create modular and scalable CSS by using OOCSS and SMACSS