ARCHITECTING SCALABLE CSS

A story for searching solution for better CSS management code.

Transcript

1. ARCHITECTING SCALABLE CSS By Irfan Maulana
2. About Me • Name : Irfan Maulana (mazipan) • Job : Software Development Engineer • Specialize : Front End Web Developer
3. Who we are ? • We are Blibli.com • E-commerce that start from 5 years ago. • We want to be no.1 E-commerce in Indonesia with the most Loyal and Satisfy customer.
4. What we will talk about ? • Finding a better way in write and maintain CSS code
5. Agenda 1. Analyzing Problem 2. Set Acceptance Criteria 3. Finding Solution 4. Challenge 5. Conclusion
6. 1. Analyzing Problem What things do you HATEwhen developing CSS
7. 1. Analyzing Problem Do you want to see our problem ? WHAT DO YOU THINK ?
8. 1. Analyzing Problem • Less modularity • Too much file and classes that not represent its function or places. • Tons of confusions e.g. not clear dependency (we are afraid about removing and adding things) • Problem with scalability, consistency and on- boarding new developers. • Specificity. Too deep selector. • Have no standard. • 1 page always giving to 1 person.
9. 2. Set Acceptance Criteria After got the problems, lets set our acceptance criteria to any new solution options…
10. 2. Set Acceptance Criteria • Modular and Independent • Re-usable, Easy to extends, Easy to override • Readable and Easy Tracking • Less bloated code (Unused code) • Has Good Conventions (Standard) • Easy to learn
11. 3. Finding Solution We found our problem, we have set our acceptance criteria. Lets finding the solution together…
12. 3. Finding Solution Find solution for CSS modular and independent ?
13. 3. Finding Solution Lucky ! Google show the way… Google says that SASS is one of solution to reach our first acceptance criteria. So what is SASS ya ?
14. 3. Finding Solution Sass is CSS Pre-Processor, lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again. But wait, Lets try to find another specific keyword…
15. 3. Finding Solution
16. 3. Finding Solution Lets see the red line. Pre-processor is good for modularity but not giving an independence. Independence gain after implement one of architectures or conventions… Hmmm, Architectures in CSS ? Conventions ? Sounds interesting.
17. 3. Finding Solution There is many convention, ex : SMACSS, OOCSS, BEM, Atomic, DRY CSS, etc. After reading some of architecture out there, I feel in love with one of them. BEM
18. 3. Finding Solution B. LOCK E. LEMENT M. ODIFIER
19. 3. Finding Solution
20. 3. Finding Solution
21. 3. Finding Solution Lookup to our acceptance criteria… • Modular and Independent • Re-usable, Easy to extends, Easy to override • Readable and Easy Tracking • Less bloated code (Unused code) • Has Good Conventions (Standard) • Easy to learn
22. SASS + BEM See the BEM : https://mazipan.github.io/ See the Framework : https://github.com/mazipan/bem-kit
23. 4. Challenge • SASS is good pre-processor for newbies but for simplify your code you need to learn advance syntax in SASS. • BEM is just convention, need commitment from developer to follow the rules. • Keep the independence of blocks in BEM is hard if we still have a page based vision. • Managing BEM is not easy for team that has different knowledge.
24. 5. Conclusion Scalable CSS means that your code is easy to learn, easy to update, easy to track by team. Scalable CSS should make you have fast development in new feature without breaking old feature. Scalable CSS should have good and proven convention/standard to make it keep controllable. Scalable CSS should performance first concern with less unused code.
25. Contact Me • Facebook : /mazipanneh • Twitter : @mazipan • Linkedin : /in/irfanmaulanamazipan • Slideshare : /IrfanMaulana21 • Speakerdeck : /mazipan • Github : mazipan • Gh Pages : mazipan.github.io • Blog : mazipanneh, @mazipanneh • Email : mazipanneh@gmail.com
26. Reference • http://sass-lang.com/documentation/file.SASS_REFERENCE.html • http://getbem.com/ • https://medium.com/@_perlik/css-architecture-guidelines- 9f78fdb142e4#.kp23dsxal • http://mathayward.com/modular-css-with-sass-and-bem/ • http://bradfrost.com/blog/post/css-architecture-for-design-systems/
27. Thank You Yes, We’re Hiring RockStars Engineer https://www.blibli.com/page/karir