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

ARCHITECTING SCALABLE CSS

ARCHITECTING SCALABLE CSS

A story for searching solution for better CSS management code.

D83b3739651001461f48763639b90b50?s=128

Irfan Maulana

February 03, 2017
Tweet

Transcript

  1. ARCHITECTING SCALABLE CSS By Irfan Maulana

  2. About Me • Name : Irfan Maulana (mazipan) • Job

    : Software Development Engineer • Specialize : Front End Web Developer
  3. Who we are ? • We are Blibli.com • 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. What we will talk about ? • Finding a better

    way in write and maintain CSS code
  5. Agenda 1. Analyzing Problem 2. Set Acceptance Criteria 3. Finding

    Solution 4. Challenge 5. Conclusion
  6. 1. Analyzing Problem What things do you HATEwhen developing CSS

  7. 1. Analyzing Problem Do you want to see our problem

    ? WHAT DO YOU THINK ?
  8. 1. Analyzing Problem • 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.
  9. 2. Set Acceptance Criteria After got the problems, lets set

    our acceptance criteria to any new solution options…
  10. 2. Set Acceptance Criteria • Modular and Independent • Re-usable,

    Easy to extends, Easy to override • Readable and Easy Tracking • Less bloated code (Unused code) • Has Good Conventions (Standard) • Easy to learn
  11. 3. Finding Solution We found our problem, we have set

    our acceptance criteria. Lets finding the solution together…
  12. 3. Finding Solution Find solution for CSS modular and independent

    ?
  13. 3. Finding Solution Lucky ! Google show the way… Google

    says that SASS is one of solution to reach our first acceptance criteria. So what is SASS ya ?
  14. 3. Finding Solution Sass is CSS Pre-Processor, lets you use

    features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again. But wait, Lets try to find another specific keyword…
  15. 3. Finding Solution

  16. 3. Finding Solution Lets see the red line. Pre-processor is

    good for modularity but not giving an independence. Independence gain after implement one of architectures or conventions… Hmmm, Architectures in CSS ? Conventions ? Sounds interesting.
  17. 3. Finding Solution There is many convention, ex : SMACSS,

    OOCSS, BEM, Atomic, DRY CSS, etc. After reading some of architecture out there, I feel in love with one of them. BEM
  18. 3. Finding Solution B. LOCK E. LEMENT M. ODIFIER

  19. 3. Finding Solution

  20. 3. Finding Solution

  21. 3. Finding Solution Lookup to our acceptance criteria… • Modular

    and Independent • Re-usable, Easy to extends, Easy to override • Readable and Easy Tracking • Less bloated code (Unused code) • Has Good Conventions (Standard) • Easy to learn
  22. SASS + BEM See the BEM : https://mazipan.github.io/ See the

    Framework : https://github.com/mazipan/bem-kit
  23. 4. Challenge • SASS is good pre-processor for newbies but

    for simplify your code you need to learn advance syntax in SASS. • BEM is just convention, need commitment from developer to follow the rules. • Keep the independence of blocks in BEM is hard if we still have a page based vision. • Managing BEM is not easy for team that has different knowledge.
  24. 5. Conclusion Scalable CSS means that your code is easy

    to learn, easy to update, easy to track by team. Scalable CSS should make you have fast development in new feature without breaking old feature. Scalable CSS should have good and proven convention/standard to make it keep controllable. Scalable CSS should performance first concern with less unused code.
  25. 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
  26. Reference • 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/
  27. Thank You Yes, We’re Hiring RockStars Engineer https://www.blibli.com/page/karir