SlideShare a Scribd company logo
1 of 30
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 Indonesia with the
most Loyal and Satisfy customer.
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
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
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.
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
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 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.
Finding Solution
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.
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.
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.
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.
• In last 2016, we start develop Blibli.com
Travel and trying to find another solution for
fixing that problem.
Implementation
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.
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 the team to have same vision.
• Mixing BEM code with JS Framework that
component based.
• Spread an Indonesian to be mindBEMding.
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
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.
Yes
WE’RE HIRING
a RockStars Engineer
https://www.blibli.com/page/karir
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
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/
THANK YOU

More Related Content

What's hot

How to make WordPress your friend
How to make WordPress your friendHow to make WordPress your friend
How to make WordPress your friendKerch McConlogue
 
Tech Stack Ideas
Tech Stack IdeasTech Stack Ideas
Tech Stack Ideasnsclark
 
Catch 22: FLex APps
Catch 22: FLex APpsCatch 22: FLex APps
Catch 22: FLex APpsYash Mody
 
Introduction To Single Page Application
Introduction To Single Page ApplicationIntroduction To Single Page Application
Introduction To Single Page ApplicationKMS Technology
 
Joomla as a mobile App backend - ideas, examples and experiences
Joomla as a mobile App backend - ideas, examples and experiencesJoomla as a mobile App backend - ideas, examples and experiences
Joomla as a mobile App backend - ideas, examples and experiencesAndy_Gaskell
 
Web development - Developing Web as A Team
Web development -  Developing Web as A TeamWeb development -  Developing Web as A Team
Web development - Developing Web as A TeamMuhammad Akbar Yasin
 
WebAssembly in Houdini CSS, is it possible?
WebAssembly in Houdini CSS, is it possible?WebAssembly in Houdini CSS, is it possible?
WebAssembly in Houdini CSS, is it possible?Alexandr Skachkov
 
Presentation 1 Web--dev
Presentation 1 Web--devPresentation 1 Web--dev
Presentation 1 Web--devaltsav
 
11 Live Node.js CMS Frameworks
11 Live Node.js CMS Frameworks11 Live Node.js CMS Frameworks
11 Live Node.js CMS FrameworksiScripts
 
Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...
Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...
Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...Eric Greene
 
Introduction to Web Technology Stacks
Introduction to Web Technology StacksIntroduction to Web Technology Stacks
Introduction to Web Technology StacksPrakarsh -
 
Building WordPress sites with AngularJS and the RESTful plugin JSON API
Building WordPress sites with AngularJS and the RESTful plugin JSON APIBuilding WordPress sites with AngularJS and the RESTful plugin JSON API
Building WordPress sites with AngularJS and the RESTful plugin JSON APIEric Greene
 
Introduction to Web Development
Introduction to Web DevelopmentIntroduction to Web Development
Introduction to Web DevelopmentParvez Mahbub
 
Webservices: connecting Joomla! with other programs.
Webservices: connecting Joomla! with other programs.Webservices: connecting Joomla! with other programs.
Webservices: connecting Joomla! with other programs.Herman Peeren
 
Using MAMP for Web Development
Using MAMP for Web DevelopmentUsing MAMP for Web Development
Using MAMP for Web DevelopmentEric Greene
 
WordPress Multilingual: WordCamp Antwerp 2016
WordPress Multilingual: WordCamp Antwerp 2016WordPress Multilingual: WordCamp Antwerp 2016
WordPress Multilingual: WordCamp Antwerp 2016Octavio Andrés Cifuentes
 
Angular.js in XPages
Angular.js in XPagesAngular.js in XPages
Angular.js in XPagesMark Roden
 
What is a good technology stack today?
What is a good technology stack today?What is a good technology stack today?
What is a good technology stack today?Netlight Consulting
 
Multisite core concepts final
Multisite core concepts finalMultisite core concepts final
Multisite core concepts finalUmesh Chaudhary
 

What's hot (20)

How to make WordPress your friend
How to make WordPress your friendHow to make WordPress your friend
How to make WordPress your friend
 
Tech Stack Ideas
Tech Stack IdeasTech Stack Ideas
Tech Stack Ideas
 
Catch 22: FLex APps
Catch 22: FLex APpsCatch 22: FLex APps
Catch 22: FLex APps
 
Introduction To Single Page Application
Introduction To Single Page ApplicationIntroduction To Single Page Application
Introduction To Single Page Application
 
MEAN Stack
MEAN Stack MEAN Stack
MEAN Stack
 
Joomla as a mobile App backend - ideas, examples and experiences
Joomla as a mobile App backend - ideas, examples and experiencesJoomla as a mobile App backend - ideas, examples and experiences
Joomla as a mobile App backend - ideas, examples and experiences
 
Web development - Developing Web as A Team
Web development -  Developing Web as A TeamWeb development -  Developing Web as A Team
Web development - Developing Web as A Team
 
WebAssembly in Houdini CSS, is it possible?
WebAssembly in Houdini CSS, is it possible?WebAssembly in Houdini CSS, is it possible?
WebAssembly in Houdini CSS, is it possible?
 
Presentation 1 Web--dev
Presentation 1 Web--devPresentation 1 Web--dev
Presentation 1 Web--dev
 
11 Live Node.js CMS Frameworks
11 Live Node.js CMS Frameworks11 Live Node.js CMS Frameworks
11 Live Node.js CMS Frameworks
 
Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...
Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...
Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...
 
Introduction to Web Technology Stacks
Introduction to Web Technology StacksIntroduction to Web Technology Stacks
Introduction to Web Technology Stacks
 
Building WordPress sites with AngularJS and the RESTful plugin JSON API
Building WordPress sites with AngularJS and the RESTful plugin JSON APIBuilding WordPress sites with AngularJS and the RESTful plugin JSON API
Building WordPress sites with AngularJS and the RESTful plugin JSON API
 
Introduction to Web Development
Introduction to Web DevelopmentIntroduction to Web Development
Introduction to Web Development
 
Webservices: connecting Joomla! with other programs.
Webservices: connecting Joomla! with other programs.Webservices: connecting Joomla! with other programs.
Webservices: connecting Joomla! with other programs.
 
Using MAMP for Web Development
Using MAMP for Web DevelopmentUsing MAMP for Web Development
Using MAMP for Web Development
 
WordPress Multilingual: WordCamp Antwerp 2016
WordPress Multilingual: WordCamp Antwerp 2016WordPress Multilingual: WordCamp Antwerp 2016
WordPress Multilingual: WordCamp Antwerp 2016
 
Angular.js in XPages
Angular.js in XPagesAngular.js in XPages
Angular.js in XPages
 
What is a good technology stack today?
What is a good technology stack today?What is a good technology stack today?
What is a good technology stack today?
 
Multisite core concepts final
Multisite core concepts finalMultisite core concepts final
Multisite core concepts final
 

Viewers also liked

Journey To The Front End World - Part1 - The Skeleton
Journey To The Front End World - Part1 - The SkeletonJourney To The Front End World - Part1 - The Skeleton
Journey To The Front End World - Part1 - The SkeletonIrfan Maulana
 
Bliblidotcom - SASS Introduction
Bliblidotcom - SASS IntroductionBliblidotcom - SASS Introduction
Bliblidotcom - SASS IntroductionIrfan Maulana
 
Journey To The Front End World - Part2 - The Cosmetic
Journey To The Front End World - Part2 - The  CosmeticJourney To The Front End World - Part2 - The  Cosmetic
Journey To The Front End World - Part2 - The CosmeticIrfan Maulana
 
Sencha ExtJs Learning Part 1 - Layout And Container in Sencha ExtJs - By Irfa...
Sencha ExtJs Learning Part 1 - Layout And Container in Sencha ExtJs - By Irfa...Sencha ExtJs Learning Part 1 - Layout And Container in Sencha ExtJs - By Irfa...
Sencha ExtJs Learning Part 1 - Layout And Container in Sencha ExtJs - By Irfa...Irfan Maulana
 
Sencha ExtJs Learning Part 2 - MVC And MVVM Architecture in ExtJs [ENGLISH]
Sencha ExtJs Learning Part 2 - MVC And MVVM Architecture in ExtJs [ENGLISH]Sencha ExtJs Learning Part 2 - MVC And MVVM Architecture in ExtJs [ENGLISH]
Sencha ExtJs Learning Part 2 - MVC And MVVM Architecture in ExtJs [ENGLISH]Irfan Maulana
 
PHP Indonesia - Understanding UI UX from Developer Side
PHP Indonesia - Understanding UI UX from Developer SidePHP Indonesia - Understanding UI UX from Developer Side
PHP Indonesia - Understanding UI UX from Developer SideIrfan Maulana
 
PHP Indonesia - Nodejs Web Development
PHP Indonesia - Nodejs Web DevelopmentPHP Indonesia - Nodejs Web Development
PHP Indonesia - Nodejs Web DevelopmentIrfan Maulana
 
Bliblidotcom - Reintroduction BEM CSS
Bliblidotcom - Reintroduction BEM CSSBliblidotcom - Reintroduction BEM CSS
Bliblidotcom - Reintroduction BEM CSSIrfan Maulana
 
conjoon - The Open Source Webmail Client
conjoon - The Open Source Webmail Clientconjoon - The Open Source Webmail Client
conjoon - The Open Source Webmail ClientThorsten Suckow-Homberg
 
java-fundamental-dan-java-web-blibli-dot-com-ilmu-komputer-IPB
java-fundamental-dan-java-web-blibli-dot-com-ilmu-komputer-IPBjava-fundamental-dan-java-web-blibli-dot-com-ilmu-komputer-IPB
java-fundamental-dan-java-web-blibli-dot-com-ilmu-komputer-IPBifnu bima
 
Irfan Maulana - Career Journey
Irfan Maulana - Career JourneyIrfan Maulana - Career Journey
Irfan Maulana - Career JourneyIrfan Maulana
 
Présentation JavaScript
Présentation JavaScriptPrésentation JavaScript
Présentation JavaScripttarkan_
 
Web Designing Training In Ambala! BATRA COMPUTER CENTRE
Web Designing Training In Ambala! BATRA COMPUTER CENTREWeb Designing Training In Ambala! BATRA COMPUTER CENTRE
Web Designing Training In Ambala! BATRA COMPUTER CENTREjatin batra
 
Lesson learned in developing UI and mobile apps blibli.com
Lesson learned in developing UI and mobile apps blibli.comLesson learned in developing UI and mobile apps blibli.com
Lesson learned in developing UI and mobile apps blibli.comifnu bima
 
email clients and webmail (presentation)
email clients and webmail   (presentation)email clients and webmail   (presentation)
email clients and webmail (presentation)kay2
 
CP 值很高的 Gulp
CP 值很高的 GulpCP 值很高的 Gulp
CP 值很高的 GulpYvonne Yu
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptFahim Abdullah
 

Viewers also liked (20)

Journey To The Front End World - Part1 - The Skeleton
Journey To The Front End World - Part1 - The SkeletonJourney To The Front End World - Part1 - The Skeleton
Journey To The Front End World - Part1 - The Skeleton
 
Bliblidotcom - SASS Introduction
Bliblidotcom - SASS IntroductionBliblidotcom - SASS Introduction
Bliblidotcom - SASS Introduction
 
Journey To The Front End World - Part2 - The Cosmetic
Journey To The Front End World - Part2 - The  CosmeticJourney To The Front End World - Part2 - The  Cosmetic
Journey To The Front End World - Part2 - The Cosmetic
 
Sencha ExtJs Learning Part 1 - Layout And Container in Sencha ExtJs - By Irfa...
Sencha ExtJs Learning Part 1 - Layout And Container in Sencha ExtJs - By Irfa...Sencha ExtJs Learning Part 1 - Layout And Container in Sencha ExtJs - By Irfa...
Sencha ExtJs Learning Part 1 - Layout And Container in Sencha ExtJs - By Irfa...
 
Sencha ExtJs Learning Part 2 - MVC And MVVM Architecture in ExtJs [ENGLISH]
Sencha ExtJs Learning Part 2 - MVC And MVVM Architecture in ExtJs [ENGLISH]Sencha ExtJs Learning Part 2 - MVC And MVVM Architecture in ExtJs [ENGLISH]
Sencha ExtJs Learning Part 2 - MVC And MVVM Architecture in ExtJs [ENGLISH]
 
Extjs
ExtjsExtjs
Extjs
 
PHP Indonesia - Understanding UI UX from Developer Side
PHP Indonesia - Understanding UI UX from Developer SidePHP Indonesia - Understanding UI UX from Developer Side
PHP Indonesia - Understanding UI UX from Developer Side
 
PHP Indonesia - Nodejs Web Development
PHP Indonesia - Nodejs Web DevelopmentPHP Indonesia - Nodejs Web Development
PHP Indonesia - Nodejs Web Development
 
Database Basic Knowledge
Database Basic KnowledgeDatabase Basic Knowledge
Database Basic Knowledge
 
Bliblidotcom - Reintroduction BEM CSS
Bliblidotcom - Reintroduction BEM CSSBliblidotcom - Reintroduction BEM CSS
Bliblidotcom - Reintroduction BEM CSS
 
conjoon - The Open Source Webmail Client
conjoon - The Open Source Webmail Clientconjoon - The Open Source Webmail Client
conjoon - The Open Source Webmail Client
 
java-fundamental-dan-java-web-blibli-dot-com-ilmu-komputer-IPB
java-fundamental-dan-java-web-blibli-dot-com-ilmu-komputer-IPBjava-fundamental-dan-java-web-blibli-dot-com-ilmu-komputer-IPB
java-fundamental-dan-java-web-blibli-dot-com-ilmu-komputer-IPB
 
Irfan Maulana - Career Journey
Irfan Maulana - Career JourneyIrfan Maulana - Career Journey
Irfan Maulana - Career Journey
 
Présentation JavaScript
Présentation JavaScriptPrésentation JavaScript
Présentation JavaScript
 
Web Designing Training In Ambala! BATRA COMPUTER CENTRE
Web Designing Training In Ambala! BATRA COMPUTER CENTREWeb Designing Training In Ambala! BATRA COMPUTER CENTRE
Web Designing Training In Ambala! BATRA COMPUTER CENTRE
 
Lesson learned in developing UI and mobile apps blibli.com
Lesson learned in developing UI and mobile apps blibli.comLesson learned in developing UI and mobile apps blibli.com
Lesson learned in developing UI and mobile apps blibli.com
 
Javascript
JavascriptJavascript
Javascript
 
email clients and webmail (presentation)
email clients and webmail   (presentation)email clients and webmail   (presentation)
email clients and webmail (presentation)
 
CP 值很高的 Gulp
CP 值很高的 GulpCP 值很高的 Gulp
CP 值很高的 Gulp
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
 

Similar to Php Indonesia x Bliblidotcom - Architecting Scalable CSS

Drupal 7: Theming with Omega
Drupal 7: Theming with OmegaDrupal 7: Theming with Omega
Drupal 7: Theming with OmegaEric Sembrat
 
Css masterclass book
Css masterclass bookCss masterclass book
Css masterclass bookPhoenix
 
Lesson 111 24 aug13-1430-ay
Lesson 111 24 aug13-1430-ayLesson 111 24 aug13-1430-ay
Lesson 111 24 aug13-1430-ayCodecademy Ren
 
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017Marc D Anderson
 
Best 5 CSS Frameworks You Should Know To Design Attractive Websites .pdf
Best 5 CSS Frameworks You Should Know To Design Attractive Websites .pdfBest 5 CSS Frameworks You Should Know To Design Attractive Websites .pdf
Best 5 CSS Frameworks You Should Know To Design Attractive Websites .pdfAppdeveloper10
 
Scalable front-end architecture with Bootstrap 3 + Atomic CSS
Scalable front-end architecture with Bootstrap 3 + Atomic CSSScalable front-end architecture with Bootstrap 3 + Atomic CSS
Scalable front-end architecture with Bootstrap 3 + Atomic CSSHayden Bleasel
 
Know the reason behind choosing bootstrap as css framework
Know the reason behind choosing bootstrap as css frameworkKnow the reason behind choosing bootstrap as css framework
Know the reason behind choosing bootstrap as css frameworkOmkarsoft Bangalore
 
Not Just a Pretty Face: How to design and build a cross-CMS CSS framework
Not Just a Pretty Face: How to design and build a cross-CMS CSS frameworkNot Just a Pretty Face: How to design and build a cross-CMS CSS framework
Not Just a Pretty Face: How to design and build a cross-CMS CSS frameworkcrystalenka
 
6 Things to Think About Before Building Your Website
6 Things to Think About Before Building Your Website6 Things to Think About Before Building Your Website
6 Things to Think About Before Building Your WebsiteFloown
 
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!Stefan Bauer
 
Web programming css
Web programming cssWeb programming css
Web programming cssUma mohan
 
Create Your Own Starter Files
Create Your Own Starter FilesCreate Your Own Starter Files
Create Your Own Starter FilesEmily Lewis
 
The Coding Designer's Survival Kit - Capital Camp
The Coding Designer's Survival Kit - Capital CampThe Coding Designer's Survival Kit - Capital Camp
The Coding Designer's Survival Kit - Capital Campcanarymason
 
Pearls and Must-Have Tools for the Modern Web / .NET Developer
Pearls and Must-Have Tools for the Modern Web / .NET DeveloperPearls and Must-Have Tools for the Modern Web / .NET Developer
Pearls and Must-Have Tools for the Modern Web / .NET DeveloperOfer Zelig
 
Creating a Business Oriented UI in APEX
Creating a Business Oriented UI in APEXCreating a Business Oriented UI in APEX
Creating a Business Oriented UI in APEXEnkitec
 

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

The benefits of BEM CSS
The benefits of BEM CSSThe benefits of BEM CSS
The benefits of BEM CSS
 
Drupal 7: Theming with Omega
Drupal 7: Theming with OmegaDrupal 7: Theming with Omega
Drupal 7: Theming with Omega
 
Customizing WordPress Themes
Customizing WordPress ThemesCustomizing WordPress Themes
Customizing WordPress Themes
 
Css masterclass book
Css masterclass bookCss masterclass book
Css masterclass book
 
Lesson 111 24 aug13-1430-ay
Lesson 111 24 aug13-1430-ayLesson 111 24 aug13-1430-ay
Lesson 111 24 aug13-1430-ay
 
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
 
Best 5 CSS Frameworks You Should Know To Design Attractive Websites .pdf
Best 5 CSS Frameworks You Should Know To Design Attractive Websites .pdfBest 5 CSS Frameworks You Should Know To Design Attractive Websites .pdf
Best 5 CSS Frameworks You Should Know To Design Attractive Websites .pdf
 
Sustainable Theming
Sustainable ThemingSustainable Theming
Sustainable Theming
 
Psd to foundation
Psd to foundationPsd to foundation
Psd to foundation
 
Scalable front-end architecture with Bootstrap 3 + Atomic CSS
Scalable front-end architecture with Bootstrap 3 + Atomic CSSScalable front-end architecture with Bootstrap 3 + Atomic CSS
Scalable front-end architecture with Bootstrap 3 + Atomic CSS
 
Know the reason behind choosing bootstrap as css framework
Know the reason behind choosing bootstrap as css frameworkKnow the reason behind choosing bootstrap as css framework
Know the reason behind choosing bootstrap as css framework
 
Smash.wordpress
Smash.wordpressSmash.wordpress
Smash.wordpress
 
Not Just a Pretty Face: How to design and build a cross-CMS CSS framework
Not Just a Pretty Face: How to design and build a cross-CMS CSS frameworkNot Just a Pretty Face: How to design and build a cross-CMS CSS framework
Not Just a Pretty Face: How to design and build a cross-CMS CSS framework
 
6 Things to Think About Before Building Your Website
6 Things to Think About Before Building Your Website6 Things to Think About Before Building Your Website
6 Things to Think About Before Building Your Website
 
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
 
Web programming css
Web programming cssWeb programming css
Web programming css
 
Create Your Own Starter Files
Create Your Own Starter FilesCreate Your Own Starter Files
Create Your Own Starter Files
 
The Coding Designer's Survival Kit - Capital Camp
The Coding Designer's Survival Kit - Capital CampThe Coding Designer's Survival Kit - Capital Camp
The Coding Designer's Survival Kit - Capital Camp
 
Pearls and Must-Have Tools for the Modern Web / .NET Developer
Pearls and Must-Have Tools for the Modern Web / .NET DeveloperPearls and Must-Have Tools for the Modern Web / .NET Developer
Pearls and Must-Have Tools for the Modern Web / .NET Developer
 
Creating a Business Oriented UI in APEX
Creating a Business Oriented UI in APEXCreating a Business Oriented UI in APEX
Creating a Business Oriented UI in APEX
 

More from Irfan Maulana

Modern Web - an Introduction
Modern Web - an IntroductionModern Web - an Introduction
Modern Web - an IntroductionIrfan Maulana
 
Unit Testing for Frontend Code at Blibli.com
Unit Testing for Frontend Code at Blibli.comUnit Testing for Frontend Code at Blibli.com
Unit Testing for Frontend Code at Blibli.comIrfan Maulana
 
Programmer In Startup Era
Programmer In Startup EraProgrammer In Startup Era
Programmer In Startup EraIrfan Maulana
 
Bliblidotcom - Evolusi Frontend Development di Bliblidotcom
Bliblidotcom - Evolusi Frontend Development di BliblidotcomBliblidotcom - Evolusi Frontend Development di Bliblidotcom
Bliblidotcom - Evolusi Frontend Development di BliblidotcomIrfan Maulana
 
Bliblidotcom - Tech In Asia PDC 2017 Takeaway
Bliblidotcom - Tech In Asia PDC 2017 TakeawayBliblidotcom - Tech In Asia PDC 2017 Takeaway
Bliblidotcom - Tech In Asia PDC 2017 TakeawayIrfan Maulana
 
Bliblidotcom - AMP And PWA
Bliblidotcom - AMP And PWABliblidotcom - AMP And PWA
Bliblidotcom - AMP And PWAIrfan Maulana
 
Angular - The Return of The King
Angular - The Return of The KingAngular - The Return of The King
Angular - The Return of The KingIrfan Maulana
 
How to Become Rockstar Programmer
How to Become Rockstar ProgrammerHow to Become Rockstar Programmer
How to Become Rockstar ProgrammerIrfan Maulana
 
Bliblidotcom - AngularJS Introduction
Bliblidotcom - AngularJS IntroductionBliblidotcom - AngularJS Introduction
Bliblidotcom - AngularJS IntroductionIrfan Maulana
 
[Blibli Brown Bag] Nodejs - The Other Side of Javascript
[Blibli Brown Bag] Nodejs - The Other Side of Javascript[Blibli Brown Bag] Nodejs - The Other Side of Javascript
[Blibli Brown Bag] Nodejs - The Other Side of JavascriptIrfan Maulana
 
Create Rest API in Nodejs
Create Rest API in Nodejs Create Rest API in Nodejs
Create Rest API in Nodejs Irfan Maulana
 

More from Irfan Maulana (11)

Modern Web - an Introduction
Modern Web - an IntroductionModern Web - an Introduction
Modern Web - an Introduction
 
Unit Testing for Frontend Code at Blibli.com
Unit Testing for Frontend Code at Blibli.comUnit Testing for Frontend Code at Blibli.com
Unit Testing for Frontend Code at Blibli.com
 
Programmer In Startup Era
Programmer In Startup EraProgrammer In Startup Era
Programmer In Startup Era
 
Bliblidotcom - Evolusi Frontend Development di Bliblidotcom
Bliblidotcom - Evolusi Frontend Development di BliblidotcomBliblidotcom - Evolusi Frontend Development di Bliblidotcom
Bliblidotcom - Evolusi Frontend Development di Bliblidotcom
 
Bliblidotcom - Tech In Asia PDC 2017 Takeaway
Bliblidotcom - Tech In Asia PDC 2017 TakeawayBliblidotcom - Tech In Asia PDC 2017 Takeaway
Bliblidotcom - Tech In Asia PDC 2017 Takeaway
 
Bliblidotcom - AMP And PWA
Bliblidotcom - AMP And PWABliblidotcom - AMP And PWA
Bliblidotcom - AMP And PWA
 
Angular - The Return of The King
Angular - The Return of The KingAngular - The Return of The King
Angular - The Return of The King
 
How to Become Rockstar Programmer
How to Become Rockstar ProgrammerHow to Become Rockstar Programmer
How to Become Rockstar Programmer
 
Bliblidotcom - AngularJS Introduction
Bliblidotcom - AngularJS IntroductionBliblidotcom - AngularJS Introduction
Bliblidotcom - AngularJS Introduction
 
[Blibli Brown Bag] Nodejs - The Other Side of Javascript
[Blibli Brown Bag] Nodejs - The Other Side of Javascript[Blibli Brown Bag] Nodejs - The Other Side of Javascript
[Blibli Brown Bag] Nodejs - The Other Side of Javascript
 
Create Rest API in Nodejs
Create Rest API in Nodejs Create Rest API in Nodejs
Create Rest API in Nodejs
 

Recently uploaded

Exploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your QueriesExploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your QueriesSanjay Willie
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DayH2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DaySri Ambati
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demoHarshalMandlekar2
 

Recently uploaded (20)

Exploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your QueriesExploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DayH2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
 

Php Indonesia x Bliblidotcom - Architecting Scalable CSS

  • 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 ?
  • 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
  • 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.
  • 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.
  • 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.
  • 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/