Submit Search
Upload
OOCSS and SMACSS Case Study
•
Download as PPTX, PDF
•
1 like
•
351 views
K
Kota Fujishiro
Follow
HTMLcebu#1
Read less
Read more
Engineering
Slideshow view
Report
Share
Slideshow view
Report
Share
1 of 34
Download now
Recommended
WEBii: Internet Markeitng Company Portfolio
WEBii: Internet Markeitng Company Portfolio
sinexJackie
Let's Build a Custom Theme
Let's Build a Custom Theme
Andy Stratton
Lecture7 web design and development
Lecture7 web design and development
Rafi Haidari
關於網頁前端的兩三事
關於網頁前端的兩三事
府峰 余
ETB - Template Build Process
ETB - Template Build Process
Fab Capodicasa
Building a living styleguide using React & Styled-components
Building a living styleguide using React & Styled-components
Vikram Ramanujam
ETB - Template Pricing Packages
ETB - Template Pricing Packages
Fab Capodicasa
No code stewardship - No Code Conf 2019 Demo Theater
No code stewardship - No Code Conf 2019 Demo Theater
Webflow
Recommended
WEBii: Internet Markeitng Company Portfolio
WEBii: Internet Markeitng Company Portfolio
sinexJackie
Let's Build a Custom Theme
Let's Build a Custom Theme
Andy Stratton
Lecture7 web design and development
Lecture7 web design and development
Rafi Haidari
關於網頁前端的兩三事
關於網頁前端的兩三事
府峰 余
ETB - Template Build Process
ETB - Template Build Process
Fab Capodicasa
Building a living styleguide using React & Styled-components
Building a living styleguide using React & Styled-components
Vikram Ramanujam
ETB - Template Pricing Packages
ETB - Template Pricing Packages
Fab Capodicasa
No code stewardship - No Code Conf 2019 Demo Theater
No code stewardship - No Code Conf 2019 Demo Theater
Webflow
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
Russ Weakley
OOCSS presentation
OOCSS presentation
Andrew Ford
OOCSS in the Real World: A Case Study from the CBC
OOCSS in the Real World: A Case Study from the CBC
Jamie Strachan
Arquitetura CSS - SMACSS + OOCS + BEM
Arquitetura CSS - SMACSS + OOCS + BEM
Danielle Cristina Soldera
Smacss and bem
Smacss and bem
Joanna Franchetti
OOCSS in the Real World: A Case Study from the CBC - Revisited
OOCSS in the Real World: A Case Study from the CBC - Revisited
Jamie Strachan
Object Oriented CSS - Joomla!dagen Nederland 2014
Object Oriented CSS - Joomla!dagen Nederland 2014
Babs Gösgens
Tech Headline - CSS Naming Conventions: Improve your code with OOCSS, SMACSS,...
Tech Headline - CSS Naming Conventions: Improve your code with OOCSS, SMACSS,...
Rodrigo Castilho
Scalable CSS Architecture
Scalable CSS Architecture
Michał Pierzchała
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
Nicole Sullivan
Object Oriented CSS
Object Oriented CSS
Nicole Sullivan
13A Portfolio Slide Show
13A Portfolio Slide Show
Lisa Wilkinson
Elite Company Brochure
Elite Company Brochure
Helen Rayfield
Manish- Sales Manager
Manish- Sales Manager
Manish Kumar
BERNADETTE SCHWERDT: 7 SECRETS TO WRITING COPY THAT GETS RESULTS EVERY TIME
BERNADETTE SCHWERDT: 7 SECRETS TO WRITING COPY THAT GETS RESULTS EVERY TIME
Kate Toon
Crafting Custom CSS @ PodCamp Toronto 2015 #PCTO15
Crafting Custom CSS @ PodCamp Toronto 2015 #PCTO15
Andy McIlwain
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 framework
crystalenka
How to Fix the 25 Most Common Library Website Problems (August 2018)
How to Fix the 25 Most Common Library Website Problems (August 2018)
ALATechSource
How to Fix the 25 Most Common Library Website Problems (April 2019)
How to Fix the 25 Most Common Library Website Problems (April 2019)
ALAeLearningSolutions
How to Fix the 25 Most Common Library Website Problems (June 2017)
How to Fix the 25 Most Common Library Website Problems (June 2017)
ALATechSource
How to Fix the 25 Most Common Library Website Problems (December 2017)
How to Fix the 25 Most Common Library Website Problems (December 2017)
ALATechSource
Lesson 109 23 aug13-1430-ay
Lesson 109 23 aug13-1430-ay
Codecademy Ren
More Related Content
Viewers also liked
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
Russ Weakley
OOCSS presentation
OOCSS presentation
Andrew Ford
OOCSS in the Real World: A Case Study from the CBC
OOCSS in the Real World: A Case Study from the CBC
Jamie Strachan
Arquitetura CSS - SMACSS + OOCS + BEM
Arquitetura CSS - SMACSS + OOCS + BEM
Danielle Cristina Soldera
Smacss and bem
Smacss and bem
Joanna Franchetti
OOCSS in the Real World: A Case Study from the CBC - Revisited
OOCSS in the Real World: A Case Study from the CBC - Revisited
Jamie Strachan
Object Oriented CSS - Joomla!dagen Nederland 2014
Object Oriented CSS - Joomla!dagen Nederland 2014
Babs Gösgens
Tech Headline - CSS Naming Conventions: Improve your code with OOCSS, SMACSS,...
Tech Headline - CSS Naming Conventions: Improve your code with OOCSS, SMACSS,...
Rodrigo Castilho
Scalable CSS Architecture
Scalable CSS Architecture
Michał Pierzchała
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
Nicole Sullivan
Object Oriented CSS
Object Oriented CSS
Nicole Sullivan
13A Portfolio Slide Show
13A Portfolio Slide Show
Lisa Wilkinson
Elite Company Brochure
Elite Company Brochure
Helen Rayfield
Manish- Sales Manager
Manish- Sales Manager
Manish Kumar
Viewers also liked
(14)
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
OOCSS presentation
OOCSS presentation
OOCSS in the Real World: A Case Study from the CBC
OOCSS in the Real World: A Case Study from the CBC
Arquitetura CSS - SMACSS + OOCS + BEM
Arquitetura CSS - SMACSS + OOCS + BEM
Smacss and bem
Smacss and bem
OOCSS in the Real World: A Case Study from the CBC - Revisited
OOCSS in the Real World: A Case Study from the CBC - Revisited
Object Oriented CSS - Joomla!dagen Nederland 2014
Object Oriented CSS - Joomla!dagen Nederland 2014
Tech Headline - CSS Naming Conventions: Improve your code with OOCSS, SMACSS,...
Tech Headline - CSS Naming Conventions: Improve your code with OOCSS, SMACSS,...
Scalable CSS Architecture
Scalable CSS Architecture
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
Object Oriented CSS
Object Oriented CSS
13A Portfolio Slide Show
13A Portfolio Slide Show
Elite Company Brochure
Elite Company Brochure
Manish- Sales Manager
Manish- Sales Manager
Similar to OOCSS and SMACSS Case Study
BERNADETTE SCHWERDT: 7 SECRETS TO WRITING COPY THAT GETS RESULTS EVERY TIME
BERNADETTE SCHWERDT: 7 SECRETS TO WRITING COPY THAT GETS RESULTS EVERY TIME
Kate Toon
Crafting Custom CSS @ PodCamp Toronto 2015 #PCTO15
Crafting Custom CSS @ PodCamp Toronto 2015 #PCTO15
Andy McIlwain
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 framework
crystalenka
How to Fix the 25 Most Common Library Website Problems (August 2018)
How to Fix the 25 Most Common Library Website Problems (August 2018)
ALATechSource
How to Fix the 25 Most Common Library Website Problems (April 2019)
How to Fix the 25 Most Common Library Website Problems (April 2019)
ALAeLearningSolutions
How to Fix the 25 Most Common Library Website Problems (June 2017)
How to Fix the 25 Most Common Library Website Problems (June 2017)
ALATechSource
How to Fix the 25 Most Common Library Website Problems (December 2017)
How to Fix the 25 Most Common Library Website Problems (December 2017)
ALATechSource
Lesson 109 23 aug13-1430-ay
Lesson 109 23 aug13-1430-ay
Codecademy Ren
Why Markdown?
Why Markdown?
Leon Barnard
Google Featured Snippets, the Discover Feed & More Must-Know SEO Insights, SE...
Google Featured Snippets, the Discover Feed & More Must-Know SEO Insights, SE...
Brodie Clark
BrightonSEO 2018 - How to Tighten up Your SEO on Large Websites
BrightonSEO 2018 - How to Tighten up Your SEO on Large Websites
Greenlane
Structuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSS
Sanjoy Kr. Paul
Magento 2 Front-end performance tips & tricks - Meet Magento Romania 2017
Magento 2 Front-end performance tips & tricks - Meet Magento Romania 2017
Bartek Igielski
Php Indonesia x Bliblidotcom - Architecting Scalable CSS
Php Indonesia x Bliblidotcom - Architecting Scalable CSS
Irfan Maulana
The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres
The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres
BookNet Canada
Inbound 2017: Back to Our Roots with Technical SEO
Inbound 2017: Back to Our Roots with Technical SEO
Stephanie Wallace
Creating a Business Oriented UI in APEX
Creating a Business Oriented UI in APEX
Enkitec
EnterJS 2015 - Continuous Integration for Frontend Code
EnterJS 2015 - Continuous Integration for Frontend Code
Marcel Birkner
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
Zoe Gillenwater
Websites & framworks: web at Everntoe
Websites & framworks: web at Everntoe
Ryan Burgess
Similar to OOCSS and SMACSS Case Study
(20)
BERNADETTE SCHWERDT: 7 SECRETS TO WRITING COPY THAT GETS RESULTS EVERY TIME
BERNADETTE SCHWERDT: 7 SECRETS TO WRITING COPY THAT GETS RESULTS EVERY TIME
Crafting Custom CSS @ PodCamp Toronto 2015 #PCTO15
Crafting Custom CSS @ PodCamp Toronto 2015 #PCTO15
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 framework
How to Fix the 25 Most Common Library Website Problems (August 2018)
How to Fix the 25 Most Common Library Website Problems (August 2018)
How to Fix the 25 Most Common Library Website Problems (April 2019)
How to Fix the 25 Most Common Library Website Problems (April 2019)
How to Fix the 25 Most Common Library Website Problems (June 2017)
How to Fix the 25 Most Common Library Website Problems (June 2017)
How to Fix the 25 Most Common Library Website Problems (December 2017)
How to Fix the 25 Most Common Library Website Problems (December 2017)
Lesson 109 23 aug13-1430-ay
Lesson 109 23 aug13-1430-ay
Why Markdown?
Why Markdown?
Google Featured Snippets, the Discover Feed & More Must-Know SEO Insights, SE...
Google Featured Snippets, the Discover Feed & More Must-Know SEO Insights, SE...
BrightonSEO 2018 - How to Tighten up Your SEO on Large Websites
BrightonSEO 2018 - How to Tighten up Your SEO on Large Websites
Structuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSS
Magento 2 Front-end performance tips & tricks - Meet Magento Romania 2017
Magento 2 Front-end performance tips & tricks - Meet Magento Romania 2017
Php Indonesia x Bliblidotcom - Architecting Scalable CSS
Php Indonesia x Bliblidotcom - Architecting Scalable CSS
The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres
The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres
Inbound 2017: Back to Our Roots with Technical SEO
Inbound 2017: Back to Our Roots with Technical SEO
Creating a Business Oriented UI in APEX
Creating a Business Oriented UI in APEX
EnterJS 2015 - Continuous Integration for Frontend Code
EnterJS 2015 - Continuous Integration for Frontend Code
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
Websites & framworks: web at Everntoe
Websites & framworks: web at Everntoe
Recently uploaded
Circuit Breaker arc phenomenon.pdf engineering
Circuit Breaker arc phenomenon.pdf engineering
KanchhaTamang
BRAKING SYSTEM IN INDIAN RAILWAY AutoCAD DRAWING
BRAKING SYSTEM IN INDIAN RAILWAY AutoCAD DRAWING
KOUSTAV SARKAR
Attraction and Repulsion type Moving Iron Instruments.pptx
Attraction and Repulsion type Moving Iron Instruments.pptx
karthikeyanS725446
Filters for Electromagnetic Compatibility Applications
Filters for Electromagnetic Compatibility Applications
Mathias Magdowski
ONLINE VEHICLE RENTAL SYSTEM PROJECT REPORT.pdf
ONLINE VEHICLE RENTAL SYSTEM PROJECT REPORT.pdf
Kamal Acharya
How to Design and spec harmonic filter.pdf
How to Design and spec harmonic filter.pdf
tawat puangthong
Lesson no16 application of Induction Generator in Wind.ppsx
Lesson no16 application of Induction Generator in Wind.ppsx
michaelprrior
ANSI(ST)-III_Manufacturing-I_05052020.pdf
ANSI(ST)-III_Manufacturing-I_05052020.pdf
BertinKamsipa1
Software Engineering - Modelling Concepts + Class Modelling + Building the An...
Software Engineering - Modelling Concepts + Class Modelling + Building the An...
Prakhyath Rai
SLIDESHARE PPT-DECISION MAKING METHODS.pptx
SLIDESHARE PPT-DECISION MAKING METHODS.pptx
CHAIRMAN M
Theory for How to calculation capacitor bank
Theory for How to calculation capacitor bank
tawat puangthong
Research Methodolgy & Intellectual Property Rights Series 1
Research Methodolgy & Intellectual Property Rights Series 1
T.D. Shashikala
Dairy management system project report..pdf
Dairy management system project report..pdf
Kamal Acharya
Interfacing Analog to Digital Data Converters ee3404.pdf
Interfacing Analog to Digital Data Converters ee3404.pdf
ragupathi90
Fabrication Of Automatic Star Delta Starter Using Relay And GSM Module By Utk...
Fabrication Of Automatic Star Delta Starter Using Relay And GSM Module By Utk...
ShivamTiwari995432
ChatGPT Prompt Engineering for project managers.pdf
ChatGPT Prompt Engineering for project managers.pdf
qasastareekh
Intelligent Agents, A discovery on How A Rational Agent Acts
Intelligent Agents, A discovery on How A Rational Agent Acts
Sheetal Jain
DR PROF ING GURUDUTT SAHNI WIKIPEDIA.pdf
DR PROF ING GURUDUTT SAHNI WIKIPEDIA.pdf
DrGurudutt
RM&IPR M5 notes.pdfResearch Methodolgy & Intellectual Property Rights Series 5
RM&IPR M5 notes.pdfResearch Methodolgy & Intellectual Property Rights Series 5
T.D. Shashikala
Activity Planning: Objectives, Project Schedule, Network Planning Model. Time...
Activity Planning: Objectives, Project Schedule, Network Planning Model. Time...
Lovely Professional University
Recently uploaded
(20)
Circuit Breaker arc phenomenon.pdf engineering
Circuit Breaker arc phenomenon.pdf engineering
BRAKING SYSTEM IN INDIAN RAILWAY AutoCAD DRAWING
BRAKING SYSTEM IN INDIAN RAILWAY AutoCAD DRAWING
Attraction and Repulsion type Moving Iron Instruments.pptx
Attraction and Repulsion type Moving Iron Instruments.pptx
Filters for Electromagnetic Compatibility Applications
Filters for Electromagnetic Compatibility Applications
ONLINE VEHICLE RENTAL SYSTEM PROJECT REPORT.pdf
ONLINE VEHICLE RENTAL SYSTEM PROJECT REPORT.pdf
How to Design and spec harmonic filter.pdf
How to Design and spec harmonic filter.pdf
Lesson no16 application of Induction Generator in Wind.ppsx
Lesson no16 application of Induction Generator in Wind.ppsx
ANSI(ST)-III_Manufacturing-I_05052020.pdf
ANSI(ST)-III_Manufacturing-I_05052020.pdf
Software Engineering - Modelling Concepts + Class Modelling + Building the An...
Software Engineering - Modelling Concepts + Class Modelling + Building the An...
SLIDESHARE PPT-DECISION MAKING METHODS.pptx
SLIDESHARE PPT-DECISION MAKING METHODS.pptx
Theory for How to calculation capacitor bank
Theory for How to calculation capacitor bank
Research Methodolgy & Intellectual Property Rights Series 1
Research Methodolgy & Intellectual Property Rights Series 1
Dairy management system project report..pdf
Dairy management system project report..pdf
Interfacing Analog to Digital Data Converters ee3404.pdf
Interfacing Analog to Digital Data Converters ee3404.pdf
Fabrication Of Automatic Star Delta Starter Using Relay And GSM Module By Utk...
Fabrication Of Automatic Star Delta Starter Using Relay And GSM Module By Utk...
ChatGPT Prompt Engineering for project managers.pdf
ChatGPT Prompt Engineering for project managers.pdf
Intelligent Agents, A discovery on How A Rational Agent Acts
Intelligent Agents, A discovery on How A Rational Agent Acts
DR PROF ING GURUDUTT SAHNI WIKIPEDIA.pdf
DR PROF ING GURUDUTT SAHNI WIKIPEDIA.pdf
RM&IPR M5 notes.pdfResearch Methodolgy & Intellectual Property Rights Series 5
RM&IPR M5 notes.pdfResearch Methodolgy & Intellectual Property Rights Series 5
Activity Planning: Objectives, Project Schedule, Network Planning Model. Time...
Activity Planning: Objectives, Project Schedule, Network Planning Model. Time...
OOCSS and SMACSS Case Study
1.
#iiofficecebu OOCSS and SMACSS Case
Study
2.
#iiofficecebu KOTA FUJISHIRO Front-end web
developer Twitter:@fujineko_kota Facebook:kota fujishiro
3.
#iiofficecebu It is easy
to write CSS codes. But , It is difficult to design CSS.
4.
#iiofficecebu selector { property
: value }
5.
#iiofficecebu #main h2{ …
} #main .contact .header h2{ … } #sidebar h2{ … } #main #sidebar
6.
#iiofficecebu #main h2 {
… } #main .contact .header h2 { … } #sidebar h2 { … } .somewhere .title h2 { … } In this case, the title h2 depends on the parent. It is not flexible or reusable.
7.
#iiofficecebu 1.Overwrite 2.Copy and Paste 3.!important
8.
#iiofficecebu Overwrite
9.
#iiofficecebu Copy and paste
10.
#iiofficecebu !important You will meet
problems about the specificity
11.
#iiofficecebu In the end
, your source code will be messy.
12.
#iiofficecebu Break into smaller
parts and Follow the rule.
13.
#iiofficecebu ITCSS OOCSS SMACSS BEM SUITCSS FLOCSS AtomicCSS
14.
#iiofficecebu OOCSS SMACSS Object Oriented CSS Scalable
and Modular Architecture for css
15.
#iiofficecebu OOCSS
16.
#iiofficecebu What is the
OOCSS?
17.
#iiofficecebu Make a website
with objects like LEGO block.
18.
#iiofficecebu Name each Objects
19.
#iiofficecebu Make a website
with objects like LEGO block.
20.
#iiofficecebu SMACSS
21.
#iiofficecebu What is the
SMACSS?
22.
#iiofficecebu The main concept
of SMACSS is to categorize CSS into 5 rules. 1.Base 2.Layout 3.Module 4.State 5.Theme
23.
#iiofficecebu
24.
#iiofficecebu
25.
#iiofficecebu Base Resect.css, Normalize.css …etc
26.
#iiofficecebu
27.
#iiofficecebu Layout Outline of modules
28.
#iiofficecebu
29.
#iiofficecebu Module Reusable parts. State (is-hidden,is-active…etc)
30.
#iiofficecebu
31.
#iiofficecebu
32.
#iiofficecebu Resources github.com/kotafujishiro/SampleSite OOCSS slideshare.net/stubbornella/object-oriented-css SMACSS smacss.com
33.
#iiofficecebu Let’s create modular and
scalable CSS by using OOCSS and SMACSS
34.
#iiofficecebu Thanks
Download now