Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ARCHITECTING SCALABLE CSS
By Irfan Maulana
WHO AM I ?
• Name : Irfan Maulana (mazipan)
• Job : Software Development Engineer
• Specialize: Front End Web Developer
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 I...
OUR WEBSITES
• We have 3 section commerce website that have different
goods for sell.
• Retail Commerce : https://www.blib...
OUR TOPIC TODAY
Architecting Scalable CSS
:
Find better way to write
and maintain CSS code in
Large Scale Project.
Outline
• Problem Analyzing
• Set Goals
• Finding Solution
• Implementation
• Challenges
• Conclusion
Problem Analyzing
What things do you hate when coding
CSS ?
Problem Analyzing
What do you think about this code ?
Problem Analyzing
What about this ?
Problem Analyzing
These are common problem in CSS :
• Less modularity
• Too much file and classes that not represent its
f...
Set Goals
• Modular
• Re-usable, Easy to extends, Easy to override
• Readable and Easy Tracking
• Less bloated code (Unuse...
Finding Solution
Finding Solution
First we found that css pre-processor is one of
key to solving our css problem.
CSS Pre-Processor let us ...
Finding Solution
Finding Solution
We found many alternative for standardize our
CSS code.
Atomic, OOCSS, BEM, SMACSS, DRYCSS, etc.
All thos...
Implementation
• This part will not tell you the best technical
part to implement the solutions.
This part will tell you a...
Implementation
• When I come to Blibli.com in 2015, Blibli.com
have not implementing any cool tech in
frontend side especi...
Implementation
• In early 2016, we start develop Blibli.com
Pulsa with full SASS code.
Implementation
• After a while, our code become bigger and
complex, we face our old problem even we
have implemented SASS....
Implementation
Implementation
• We choose BEM and Blibli.com Travel now
live in production with full BEM + SASS code
• BEM offer better C...
Implementation
Implementation
See full sample code here :
https://github.com/mazipan/bem-kit
Challenges
• Library that built in top of BEM is less, so
better to build our own.
• Keep BEM to be not bloated.
• Make th...
Lookup Our Goals
• Modular
• Re-usable, Easy to extends, Easy to override
• Readable and Easy Tracking
• Less bloated code...
Conclusion
• Scalable CSS is when your code was easy to
learn, easy to maintain in the future, easy to
refactor, easy to t...
Yes
WE’RE HIRING
a RockStars Engineer
https://www.blibli.com/page/karir
Contact Me
• Facebook : /mazipanneh
• Twitter : @mazipan
• Linkedin : /in/irfanmaulanamazipan
• Slideshare : /IrfanMaulana...
References
• http://sass-
lang.com/documentation/file.SASS_REFERENCE.ht
ml
• http://getbem.com/
• https://medium.com/@_per...
THANK YOU
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
Journey To The Front End World - Part1 - The Skeleton
Next
Upcoming SlideShare
Journey To The Front End World - Part1 - The Skeleton
Next
Download to read offline and view in fullscreen.

Share

Php Indonesia x Bliblidotcom - Architecting Scalable CSS

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • ishaqmuchamad

    Apr. 5, 2017
  • YufiEkoFirmansyah

    Mar. 3, 2017

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

Views

Total views

749

On Slideshare

0

From embeds

0

Number of embeds

1

Actions

Downloads

29

Shares

0

Comments

0

Likes

2

×