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

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.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. THANK YOU