Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Php Indonesia x Bliblidotcom - Architecting Scalable CSS

Php Indonesia x Bliblidotcom - Architecting Scalable CSS

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

D83b3739651001461f48763639b90b50?s=128

Irfan Maulana

February 24, 2017
Tweet

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