Successfully reported this slideshow.
Your SlideShare is downloading. ×

Php Indonesia x Bliblidotcom - Architecting Scalable CSS

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 30 Ad
Advertisement

More Related Content

Slideshows for you (20)

Viewers also liked (20)

Advertisement

Similar to Php Indonesia x Bliblidotcom - Architecting Scalable CSS (20)

Advertisement

Recently uploaded (20)

Php Indonesia x Bliblidotcom - Architecting Scalable CSS

  1. 1. ARCHITECTING SCALABLE CSS By Irfan Maulana
  2. 2. WHO AM I ? • Name : Irfan Maulana (mazipan) • Job : Software Development Engineer • Specialize: Front End Web Developer
  3. 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. 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. 5. OUR TOPIC TODAY Architecting Scalable CSS : Find better way to write and maintain CSS code in Large Scale Project.
  6. 6. Outline • Problem Analyzing • Set Goals • Finding Solution • Implementation • Challenges • Conclusion
  7. 7. Problem Analyzing What things do you hate when coding CSS ?
  8. 8. Problem Analyzing What do you think about this code ?
  9. 9. Problem Analyzing What about this ?
  10. 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. 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. 12. Finding Solution
  13. 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. 14. Finding Solution
  15. 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. 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. 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. 18. Implementation • In early 2016, we start develop Blibli.com Pulsa with full SASS code.
  19. 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. 20. Implementation
  21. 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. 22. Implementation
  23. 23. Implementation See full sample code here : https://github.com/mazipan/bem-kit
  24. 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. 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. 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. 27. Yes WE’RE HIRING a RockStars Engineer https://www.blibli.com/page/karir
  28. 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. 29. References • http://sass- lang.com/documentation/file.SASS_REFERENCE.ht ml • 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. 30. THANK YOU

×