Php Indonesia x Bliblidotcom - Architecting Scalable CSS

Story telling about blibli.com journey to finding a better solution to write and maintain CSS code

Transcript

1. ARCHITECTING SCALABLE CSS By Irfan Maulana
2. WHO AM I ? • Name : Irfan Maulana (mazipan) • Job : Software Development Engineer • Specialize : Front End Web Developer
3. WHO WE ARE ? • We are Blibli.com • Indonesian 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. OUR WEBSITES • We have 3 section commerce website that have different goods for sell. • Retail Commerce : https://www.blibli.com/ Retail Goods • Blibli.com Pulsa : https://www.blibli.com/pulsa Pulsa, Data, PLN Token • Blibli.com Travel : https://www.blibli.com/travel Hotel Booking, KAI Ticket
5. OUR TOPIC TODAY Architecting Scalable CSS : Find better way to write and maintain CSS code in Large Scale Project.
6. Outline • Problem Analyzing • Set Goals • Finding Solution • Implementation • Challenges • Conclusion
7. Problem Analyzing What things do you hate when coding CSS ?
8. Problem Analyzing What do you think about this code ?
9. Problem Analyzing What about this ?
10. Problem Analyzing These are common problem in CSS : • 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.
11. Set Goals • Modular • Re-usable, Easy to extends, Easy to override • Readable and Easy Tracking • Less bloated code (Unused code) • Has Good Conventions • Easy to learn even for veteran developers
12. Finding Solution
13. Finding Solution First we found that css pre-processor is one of key to solving our css problem. CSS Pre-Processor let us to write CSS code better with more logically, re-usable function and variable, and many more advance syntax. We choose SASS as our pre-processor.
14. Finding Solution
15. Finding Solution We found many alternative for standardize our CSS code. Atomic, OOCSS, BEM, SMACSS, DRYCSS, etc. All those thing have same goals, to set a good structure in our CSS code.
16. Implementation • This part will not tell you the best technical part to implement the solutions. This part will tell you about our journey in implementing to our code.
17. Implementation • When I come to Blibli.com in 2015, Blibli.com have not implementing any cool tech in frontend side especially in CSS. • Then we choose SASS for improve our CSS code. • In the end of 2015, we migrate our retail mobile web with full SASS code.
18. Implementation • In early 2016, we start develop Blibli.com Pulsa with full SASS code.
19. Implementation • After a while, our code become bigger and complex, we face our old problem even we have implemented SASS. • In last 2016, we start develop Blibli.com Travel and trying to find another solution for fixing that problem.
20. Implementation
21. Implementation • We choose BEM and Blibli.com Travel now live in production with full BEM + SASS code • BEM offer better CSS code collaboration especially when we are in big team and complex project. • BEM works like charm with SASS advance supported.
22. Implementation
23. Implementation See full sample code here : https://github.com/mazipan/bem-kit
24. Challenges • Library that built in top of BEM is less, so better to build our own. • Keep BEM to be not bloated. • Make the team to have same vision. • Mixing BEM code with JS Framework that component based. • Spread an Indonesian to be mindBEMding.
25. Lookup Our Goals • Modular • Re-usable, Easy to extends, Easy to override • Readable and Easy Tracking • Less bloated code (Unused code) • Has Good Conventions • Easy to learn even for veteran developers
26. Conclusion • Scalable CSS is when your code was easy to learn, easy to maintain in the future, easy to refactor, easy to tracking the problem. • SASS (*or other pre-processor) is must when you want your CSS code become better. • Strict BEM convention make you have confidence to add/update/remove CSS without side effect.
27. Yes WE’RE HIRING a RockStars Engineer https://www.blibli.com/page/karir
28. 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
29. References • 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/
30. THANK YOU