SlideShare a Scribd company logo

CSS - OOCSS, SMACSS and more

Russ Weakley
Russ Weakley
Russ WeakleyUX/UI developer at Max Design

An introduction to the changing world of CSS. Slides from Brisbane Web Designer Meetup 13 March 2013.

CSS - OOCSS, SMACSS and more

1 of 169
Download to read offline
CSS
oocss, smacss & more...
what’s wro
          ng with

         CSS
“
CSS is simple... It’s simple to
understand. But CSS is not
simple to use or maintain.




                                                                                 ”
         http://chriseppstein.github.com/blog/2009/09/20/why-stylesheet-abstraction-matters/
Issues
If you’ve ever worked on a
medium to large website, you
have probably come across a
range of issues with CSS.
Repetition
Lots of floats, font-size
references, heading levels
repeated...
Unmanageable
It may have started out well, but it
has become a mess?
Ad

Recommended

CSS For Backend Developers
CSS For Backend DevelopersCSS For Backend Developers
CSS For Backend Developers10Clouds
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid LayoutRachel Andrew
 
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodologyBEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodologyVarya Stepanova
 
BEM it! Introduction to BEM
BEM it! Introduction to BEMBEM it! Introduction to BEM
BEM it! Introduction to BEMVarya Stepanova
 
OOCSS, SMACSS or BEM?
OOCSS, SMACSS or BEM?OOCSS, SMACSS or BEM?
OOCSS, SMACSS or BEM?Michael Posso
 

More Related Content

What's hot

CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout Rachel Andrew
 
Frontend Crash Course: HTML and CSS
Frontend Crash Course: HTML and CSSFrontend Crash Course: HTML and CSS
Frontend Crash Course: HTML and CSSThinkful
 
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignCSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignZoe Gillenwater
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basicsEliran Eliassy
 
HTML and CSS crash course!
HTML and CSS crash course!HTML and CSS crash course!
HTML and CSS crash course!Ana Cidre
 
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheetMichael Jhon
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation joilrahat
 
Introduction to flexbox
Introduction  to  flexboxIntroduction  to  flexbox
Introduction to flexboxJyoti Gautam
 
BEM It! for Brandwatch
BEM It! for BrandwatchBEM It! for Brandwatch
BEM It! for BrandwatchMax Shirshin
 
Intro to Flexbox - A Magical CSS Property
Intro to Flexbox - A Magical CSS PropertyIntro to Flexbox - A Magical CSS Property
Intro to Flexbox - A Magical CSS PropertyAdam Soucie
 

What's hot (20)

CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
 
CSS
CSSCSS
CSS
 
Frontend Crash Course: HTML and CSS
Frontend Crash Course: HTML and CSSFrontend Crash Course: HTML and CSS
Frontend Crash Course: HTML and CSS
 
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignCSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive Design
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 
CSS Grid
CSS GridCSS Grid
CSS Grid
 
html-css
html-csshtml-css
html-css
 
HTML and CSS crash course!
HTML and CSS crash course!HTML and CSS crash course!
HTML and CSS crash course!
 
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheet
 
Flexbox
FlexboxFlexbox
Flexbox
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation
 
Introduction to flexbox
Introduction  to  flexboxIntroduction  to  flexbox
Introduction to flexbox
 
BEM It! for Brandwatch
BEM It! for BrandwatchBEM It! for Brandwatch
BEM It! for Brandwatch
 
Css
CssCss
Css
 
Advanced Cascading Style Sheets
Advanced Cascading Style SheetsAdvanced Cascading Style Sheets
Advanced Cascading Style Sheets
 
HTML & CSS Masterclass
HTML & CSS MasterclassHTML & CSS Masterclass
HTML & CSS Masterclass
 
Intro to Flexbox - A Magical CSS Property
Intro to Flexbox - A Magical CSS PropertyIntro to Flexbox - A Magical CSS Property
Intro to Flexbox - A Magical CSS Property
 
Css ppt
Css pptCss ppt
Css ppt
 
Html
HtmlHtml
Html
 
Introducing CSS Grid
Introducing CSS GridIntroducing CSS Grid
Introducing CSS Grid
 

Viewers also liked

Scalable and Modular CSS FTW!
Scalable and Modular CSS FTW!Scalable and Modular CSS FTW!
Scalable and Modular CSS FTW!FITC
 
Cascading Style Sheets - CSS
Cascading Style Sheets - CSSCascading Style Sheets - CSS
Cascading Style Sheets - CSSSun Technlogies
 
HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsHTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsSun Technlogies
 
[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSSjeannewoo
 
Creating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off SwitchCreating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off SwitchRuss Weakley
 
CSS: a rapidly changing world
CSS: a rapidly changing worldCSS: a rapidly changing world
CSS: a rapidly changing worldRuss Weakley
 
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and FriendsThe Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and FriendsStacy Kvernmo
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Chris Poteet
 
OOCSS and SMACSS Case Study
OOCSS and SMACSS Case StudyOOCSS and SMACSS Case Study
OOCSS and SMACSS Case StudyKota Fujishiro
 
CSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The UglyCSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The UglyJoe Seifi
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS PresentationShawn Calvert
 
Accessible custom radio buttons and checkboxes
Accessible custom radio buttons and checkboxesAccessible custom radio buttons and checkboxes
Accessible custom radio buttons and checkboxesRuss Weakley
 
Three quick accessibility tips for HTML5
Three quick accessibility tips for HTML5Three quick accessibility tips for HTML5
Three quick accessibility tips for HTML5Russ Weakley
 
OOCSS in the Real World: A Case Study from the CBC
OOCSS in the Real World: A Case Study from the CBCOOCSS in the Real World: A Case Study from the CBC
OOCSS in the Real World: A Case Study from the CBCJamie Strachan
 
OOCSS presentation
OOCSS presentationOOCSS presentation
OOCSS presentationAndrew Ford
 

Viewers also liked (20)

Atomic design
Atomic designAtomic design
Atomic design
 
Scalable and Modular CSS FTW!
Scalable and Modular CSS FTW!Scalable and Modular CSS FTW!
Scalable and Modular CSS FTW!
 
Cascading Style Sheets - CSS
Cascading Style Sheets - CSSCascading Style Sheets - CSS
Cascading Style Sheets - CSS
 
HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsHTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts Basics
 
Object Oriented CSS
Object Oriented CSSObject Oriented CSS
Object Oriented CSS
 
[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS
 
Creating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off SwitchCreating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off Switch
 
Html Ppt
Html PptHtml Ppt
Html Ppt
 
CSS: a rapidly changing world
CSS: a rapidly changing worldCSS: a rapidly changing world
CSS: a rapidly changing world
 
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and FriendsThe Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
 
OOCSS and SMACSS Case Study
OOCSS and SMACSS Case StudyOOCSS and SMACSS Case Study
OOCSS and SMACSS Case Study
 
Php Presentation
Php PresentationPhp Presentation
Php Presentation
 
CSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The UglyCSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The Ugly
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 
Accessible custom radio buttons and checkboxes
Accessible custom radio buttons and checkboxesAccessible custom radio buttons and checkboxes
Accessible custom radio buttons and checkboxes
 
PSD to Theme: The SMACSS Way
PSD to Theme: The SMACSS WayPSD to Theme: The SMACSS Way
PSD to Theme: The SMACSS Way
 
Three quick accessibility tips for HTML5
Three quick accessibility tips for HTML5Three quick accessibility tips for HTML5
Three quick accessibility tips for HTML5
 
OOCSS in the Real World: A Case Study from the CBC
OOCSS in the Real World: A Case Study from the CBCOOCSS in the Real World: A Case Study from the CBC
OOCSS in the Real World: A Case Study from the CBC
 
OOCSS presentation
OOCSS presentationOOCSS presentation
OOCSS presentation
 

Similar to CSS - OOCSS, SMACSS and more

CSMess to OOCSS: Refactoring CSS with Object Oriented Design
CSMess to OOCSS: Refactoring CSS with Object Oriented DesignCSMess to OOCSS: Refactoring CSS with Object Oriented Design
CSMess to OOCSS: Refactoring CSS with Object Oriented DesignKate Travers
 
OOCSS for JavaScript Pirates jQcon Boston
OOCSS for JavaScript Pirates jQcon BostonOOCSS for JavaScript Pirates jQcon Boston
OOCSS for JavaScript Pirates jQcon BostonJohn Hann
 
OOCSS for Javascript pirates at jQueryPgh meetup
OOCSS for Javascript pirates at jQueryPgh meetupOOCSS for Javascript pirates at jQueryPgh meetup
OOCSS for Javascript pirates at jQueryPgh meetupBrian Cavalier
 
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}Eric Carlisle
 
But what about old browsers?
But what about old browsers?But what about old browsers?
But what about old browsers?Rachel Andrew
 
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSSObject-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSSLi-Wei Lu
 
The New CSS Layout - Dutch PHP Conference
The New CSS Layout - Dutch PHP ConferenceThe New CSS Layout - Dutch PHP Conference
The New CSS Layout - Dutch PHP ConferenceRachel Andrew
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern librariesRuss Weakley
 
CSS workshop @ OutSystems
CSS workshop @ OutSystemsCSS workshop @ OutSystems
CSS workshop @ OutSystemsRuben Goncalves
 
CSS Frameworks
CSS FrameworksCSS Frameworks
CSS FrameworksMike Crabb
 
The Future State of Layout
The Future State of LayoutThe Future State of Layout
The Future State of LayoutStephen Hay
 
Scalable CSS You and Your Back-End Coders Can Love - @CSSConf Asia 2014
Scalable CSS You and Your Back-End Coders Can Love - @CSSConf Asia 2014Scalable CSS You and Your Back-End Coders Can Love - @CSSConf Asia 2014
Scalable CSS You and Your Back-End Coders Can Love - @CSSConf Asia 2014Christian Lilley
 
Rock Solid CSS Architecture
Rock Solid CSS ArchitectureRock Solid CSS Architecture
Rock Solid CSS ArchitectureJohn Need
 
Architecture for css
Architecture for cssArchitecture for css
Architecture for cssMohamed Amin
 
Everything You know about CSS is Wrong
Everything You know about CSS is WrongEverything You know about CSS is Wrong
Everything You know about CSS is Wrongchandleryu
 

Similar to CSS - OOCSS, SMACSS and more (20)

CSMess to OOCSS: Refactoring CSS with Object Oriented Design
CSMess to OOCSS: Refactoring CSS with Object Oriented DesignCSMess to OOCSS: Refactoring CSS with Object Oriented Design
CSMess to OOCSS: Refactoring CSS with Object Oriented Design
 
OOCSS for JavaScript Pirates jQcon Boston
OOCSS for JavaScript Pirates jQcon BostonOOCSS for JavaScript Pirates jQcon Boston
OOCSS for JavaScript Pirates jQcon Boston
 
OOCSS for Javascript pirates at jQueryPgh meetup
OOCSS for Javascript pirates at jQueryPgh meetupOOCSS for Javascript pirates at jQueryPgh meetup
OOCSS for Javascript pirates at jQueryPgh meetup
 
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
 
But what about old browsers?
But what about old browsers?But what about old browsers?
But what about old browsers?
 
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSSObject-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
 
The New CSS Layout - Dutch PHP Conference
The New CSS Layout - Dutch PHP ConferenceThe New CSS Layout - Dutch PHP Conference
The New CSS Layout - Dutch PHP Conference
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern libraries
 
CSS workshop @ OutSystems
CSS workshop @ OutSystemsCSS workshop @ OutSystems
CSS workshop @ OutSystems
 
SMACSS Workshop
SMACSS WorkshopSMACSS Workshop
SMACSS Workshop
 
CSS Frameworks
CSS FrameworksCSS Frameworks
CSS Frameworks
 
INTRODUCTIONS OF CSS PART 2
INTRODUCTIONS OF CSS PART 2INTRODUCTIONS OF CSS PART 2
INTRODUCTIONS OF CSS PART 2
 
The Future State of Layout
The Future State of LayoutThe Future State of Layout
The Future State of Layout
 
Refresh OKC
Refresh OKCRefresh OKC
Refresh OKC
 
Material design
Material designMaterial design
Material design
 
Scalable CSS You and Your Back-End Coders Can Love - @CSSConf Asia 2014
Scalable CSS You and Your Back-End Coders Can Love - @CSSConf Asia 2014Scalable CSS You and Your Back-End Coders Can Love - @CSSConf Asia 2014
Scalable CSS You and Your Back-End Coders Can Love - @CSSConf Asia 2014
 
Rock Solid CSS Architecture
Rock Solid CSS ArchitectureRock Solid CSS Architecture
Rock Solid CSS Architecture
 
Architecture for css
Architecture for cssArchitecture for css
Architecture for css
 
Everything You know about CSS is Wrong
Everything You know about CSS is WrongEverything You know about CSS is Wrong
Everything You know about CSS is Wrong
 
Pfnp slides
Pfnp slidesPfnp slides
Pfnp slides
 

More from Russ Weakley

Accessible chat windows
Accessible chat windowsAccessible chat windows
Accessible chat windowsRuss Weakley
 
Accessible names & descriptions
Accessible names & descriptionsAccessible names & descriptions
Accessible names & descriptionsRuss Weakley
 
A deep dive into accessible names
A deep dive into accessible namesA deep dive into accessible names
A deep dive into accessible namesRuss Weakley
 
What are accessible names and why should you care?
What are accessible names and why should you care?What are accessible names and why should you care?
What are accessible names and why should you care?Russ Weakley
 
How to build accessible UI components
How to build accessible UI componentsHow to build accessible UI components
How to build accessible UI componentsRuss Weakley
 
What is WCAG 2 and why should we care?
What is WCAG 2 and why should we care?What is WCAG 2 and why should we care?
What is WCAG 2 and why should we care?Russ Weakley
 
Accessible states in Design Systems
Accessible states in Design SystemsAccessible states in Design Systems
Accessible states in Design SystemsRuss Weakley
 
Creating accessible modals and autocompletes
Creating accessible modals and autocompletesCreating accessible modals and autocompletes
Creating accessible modals and autocompletesRuss Weakley
 
Building an accessible progressive loader
Building an accessible progressive loaderBuilding an accessible progressive loader
Building an accessible progressive loaderRuss Weakley
 
Accessibility in Design systems - the pain and glory
Accessibility in Design systems - the pain and gloryAccessibility in Design systems - the pain and glory
Accessibility in Design systems - the pain and gloryRuss Weakley
 
Accessible Inline errors messages
Accessible Inline errors messagesAccessible Inline errors messages
Accessible Inline errors messagesRuss Weakley
 
Accessible Form Hints and Errors
Accessible Form Hints and ErrorsAccessible Form Hints and Errors
Accessible Form Hints and ErrorsRuss Weakley
 
What is accessibility?
What is accessibility?What is accessibility?
What is accessibility?Russ Weakley
 
Accessibility in Pattern Libraries
Accessibility in Pattern LibrariesAccessibility in Pattern Libraries
Accessibility in Pattern LibrariesRuss Weakley
 
Accessibility in pattern libraries
Accessibility in pattern librariesAccessibility in pattern libraries
Accessibility in pattern librariesRuss Weakley
 
Building an accessible auto-complete - #ID24
Building an accessible auto-complete - #ID24Building an accessible auto-complete - #ID24
Building an accessible auto-complete - #ID24Russ Weakley
 
Building an accessible auto-complete
Building an accessible auto-completeBuilding an accessible auto-complete
Building an accessible auto-completeRuss Weakley
 
Creating Acessible floating labels
Creating Acessible floating labelsCreating Acessible floating labels
Creating Acessible floating labelsRuss Weakley
 
Creating an Accessible button dropdown
Creating an Accessible button dropdownCreating an Accessible button dropdown
Creating an Accessible button dropdownRuss Weakley
 
Deep Dive into Line-Height
Deep Dive into Line-HeightDeep Dive into Line-Height
Deep Dive into Line-HeightRuss Weakley
 

More from Russ Weakley (20)

Accessible chat windows
Accessible chat windowsAccessible chat windows
Accessible chat windows
 
Accessible names & descriptions
Accessible names & descriptionsAccessible names & descriptions
Accessible names & descriptions
 
A deep dive into accessible names
A deep dive into accessible namesA deep dive into accessible names
A deep dive into accessible names
 
What are accessible names and why should you care?
What are accessible names and why should you care?What are accessible names and why should you care?
What are accessible names and why should you care?
 
How to build accessible UI components
How to build accessible UI componentsHow to build accessible UI components
How to build accessible UI components
 
What is WCAG 2 and why should we care?
What is WCAG 2 and why should we care?What is WCAG 2 and why should we care?
What is WCAG 2 and why should we care?
 
Accessible states in Design Systems
Accessible states in Design SystemsAccessible states in Design Systems
Accessible states in Design Systems
 
Creating accessible modals and autocompletes
Creating accessible modals and autocompletesCreating accessible modals and autocompletes
Creating accessible modals and autocompletes
 
Building an accessible progressive loader
Building an accessible progressive loaderBuilding an accessible progressive loader
Building an accessible progressive loader
 
Accessibility in Design systems - the pain and glory
Accessibility in Design systems - the pain and gloryAccessibility in Design systems - the pain and glory
Accessibility in Design systems - the pain and glory
 
Accessible Inline errors messages
Accessible Inline errors messagesAccessible Inline errors messages
Accessible Inline errors messages
 
Accessible Form Hints and Errors
Accessible Form Hints and ErrorsAccessible Form Hints and Errors
Accessible Form Hints and Errors
 
What is accessibility?
What is accessibility?What is accessibility?
What is accessibility?
 
Accessibility in Pattern Libraries
Accessibility in Pattern LibrariesAccessibility in Pattern Libraries
Accessibility in Pattern Libraries
 
Accessibility in pattern libraries
Accessibility in pattern librariesAccessibility in pattern libraries
Accessibility in pattern libraries
 
Building an accessible auto-complete - #ID24
Building an accessible auto-complete - #ID24Building an accessible auto-complete - #ID24
Building an accessible auto-complete - #ID24
 
Building an accessible auto-complete
Building an accessible auto-completeBuilding an accessible auto-complete
Building an accessible auto-complete
 
Creating Acessible floating labels
Creating Acessible floating labelsCreating Acessible floating labels
Creating Acessible floating labels
 
Creating an Accessible button dropdown
Creating an Accessible button dropdownCreating an Accessible button dropdown
Creating an Accessible button dropdown
 
Deep Dive into Line-Height
Deep Dive into Line-HeightDeep Dive into Line-Height
Deep Dive into Line-Height
 

Recently uploaded

zigbee motion sensor user manual NAS-PD07B2.pdf
zigbee motion sensor user manual NAS-PD07B2.pdfzigbee motion sensor user manual NAS-PD07B2.pdf
zigbee motion sensor user manual NAS-PD07B2.pdfDomotica daVinci
 
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERNRonnelBaroc
 
Introduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVAIntroduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVARobert McDermott
 
DNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFE
DNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFEDNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFE
DNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFEandreiandasan
 
Bringing nullability into existing code - dammit is not the answer.pptx
Bringing nullability into existing code - dammit is not the answer.pptxBringing nullability into existing code - dammit is not the answer.pptx
Bringing nullability into existing code - dammit is not the answer.pptxMaarten Balliauw
 
Dynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineeringDynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineeringMassimo Talia
 
Power of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdfPower of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdfkatalinjordans1
 
AWS reInvent 2023 recaps from Chicago AWS user group
AWS reInvent 2023 recaps from Chicago AWS user groupAWS reInvent 2023 recaps from Chicago AWS user group
AWS reInvent 2023 recaps from Chicago AWS user groupAWS Chicago
 
Zi-Stick UBS Dongle ZIgbee from Aeotec manual
Zi-Stick UBS Dongle ZIgbee from  Aeotec manualZi-Stick UBS Dongle ZIgbee from  Aeotec manual
Zi-Stick UBS Dongle ZIgbee from Aeotec manualDomotica daVinci
 
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre..."Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...shaiyuvasv
 
Enhancing Productivity and Insight A Tour of JDK Tools Progress Beyond Java 17
Enhancing Productivity and Insight  A Tour of JDK Tools Progress Beyond Java 17Enhancing Productivity and Insight  A Tour of JDK Tools Progress Beyond Java 17
Enhancing Productivity and Insight A Tour of JDK Tools Progress Beyond Java 17Ana-Maria Mihalceanu
 
Curtain Module Manual Zigbee Neo CS01-1C.pdf
Curtain Module Manual Zigbee Neo CS01-1C.pdfCurtain Module Manual Zigbee Neo CS01-1C.pdf
Curtain Module Manual Zigbee Neo CS01-1C.pdfDomotica daVinci
 
Building Products That Think- Bhaskaran Srinivasan & Ashish Gupta
Building Products That Think- Bhaskaran Srinivasan & Ashish GuptaBuilding Products That Think- Bhaskaran Srinivasan & Ashish Gupta
Building Products That Think- Bhaskaran Srinivasan & Ashish GuptaISPMAIndia
 
Evolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptx
Evolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptxEvolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptx
Evolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptxKyle Willson
 
Q1 Memory Fabric Forum: SMART CXL Product Lineup
Q1 Memory Fabric Forum: SMART CXL Product LineupQ1 Memory Fabric Forum: SMART CXL Product Lineup
Q1 Memory Fabric Forum: SMART CXL Product LineupMemory Fabric Forum
 
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes", Volodymyr TsapFwdays
 
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...ISPMAIndia
 
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...Adrian Sanabria
 
Z-Wave Fan coil Thermostat Heltun_HE-HT01_User_Manual.pdf
Z-Wave Fan coil Thermostat Heltun_HE-HT01_User_Manual.pdfZ-Wave Fan coil Thermostat Heltun_HE-HT01_User_Manual.pdf
Z-Wave Fan coil Thermostat Heltun_HE-HT01_User_Manual.pdfDomotica daVinci
 

Recently uploaded (20)

zigbee motion sensor user manual NAS-PD07B2.pdf
zigbee motion sensor user manual NAS-PD07B2.pdfzigbee motion sensor user manual NAS-PD07B2.pdf
zigbee motion sensor user manual NAS-PD07B2.pdf
 
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
 
Introduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVAIntroduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVA
 
DNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFE
DNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFEDNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFE
DNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFE
 
Bringing nullability into existing code - dammit is not the answer.pptx
Bringing nullability into existing code - dammit is not the answer.pptxBringing nullability into existing code - dammit is not the answer.pptx
Bringing nullability into existing code - dammit is not the answer.pptx
 
Dynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineeringDynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineering
 
Power of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdfPower of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdf
 
AWS reInvent 2023 recaps from Chicago AWS user group
AWS reInvent 2023 recaps from Chicago AWS user groupAWS reInvent 2023 recaps from Chicago AWS user group
AWS reInvent 2023 recaps from Chicago AWS user group
 
Zi-Stick UBS Dongle ZIgbee from Aeotec manual
Zi-Stick UBS Dongle ZIgbee from  Aeotec manualZi-Stick UBS Dongle ZIgbee from  Aeotec manual
Zi-Stick UBS Dongle ZIgbee from Aeotec manual
 
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre..."Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
 
Enhancing Productivity and Insight A Tour of JDK Tools Progress Beyond Java 17
Enhancing Productivity and Insight  A Tour of JDK Tools Progress Beyond Java 17Enhancing Productivity and Insight  A Tour of JDK Tools Progress Beyond Java 17
Enhancing Productivity and Insight A Tour of JDK Tools Progress Beyond Java 17
 
Curtain Module Manual Zigbee Neo CS01-1C.pdf
Curtain Module Manual Zigbee Neo CS01-1C.pdfCurtain Module Manual Zigbee Neo CS01-1C.pdf
Curtain Module Manual Zigbee Neo CS01-1C.pdf
 
Building Products That Think- Bhaskaran Srinivasan & Ashish Gupta
Building Products That Think- Bhaskaran Srinivasan & Ashish GuptaBuilding Products That Think- Bhaskaran Srinivasan & Ashish Gupta
Building Products That Think- Bhaskaran Srinivasan & Ashish Gupta
 
Evolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptx
Evolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptxEvolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptx
Evolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptx
 
Q1 Memory Fabric Forum: SMART CXL Product Lineup
Q1 Memory Fabric Forum: SMART CXL Product LineupQ1 Memory Fabric Forum: SMART CXL Product Lineup
Q1 Memory Fabric Forum: SMART CXL Product Lineup
 
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
 
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
 
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
 
Z-Wave Fan coil Thermostat Heltun_HE-HT01_User_Manual.pdf
Z-Wave Fan coil Thermostat Heltun_HE-HT01_User_Manual.pdfZ-Wave Fan coil Thermostat Heltun_HE-HT01_User_Manual.pdf
Z-Wave Fan coil Thermostat Heltun_HE-HT01_User_Manual.pdf
 
5 Tech Trend to Notice in ESG Landscape- 47Billion
5 Tech Trend to Notice in ESG Landscape- 47Billion5 Tech Trend to Notice in ESG Landscape- 47Billion
5 Tech Trend to Notice in ESG Landscape- 47Billion
 

CSS - OOCSS, SMACSS and more

  • 2. what’s wro ng with CSS
  • 3. “ CSS is simple... It’s simple to understand. But CSS is not simple to use or maintain. ” http://chriseppstein.github.com/blog/2009/09/20/why-stylesheet-abstraction-matters/
  • 4. Issues If you’ve ever worked on a medium to large website, you have probably come across a range of issues with CSS.
  • 5. Repetition Lots of floats, font-size references, heading levels repeated...
  • 6. Unmanageable It may have started out well, but it has become a mess?
  • 7. Weight war You need to add some CSS - so you have to start adding to selectors in order to win.
  • 8. Coupling Your CSS is specifically tied to HTML or location...
  • 9. CSS sucks! Developers have been telling us for years that “CSS sucks”. We all know it’s time for our CSS practices to evolve.
  • 10. New stuff! Luckily, there are a wide range of exciting new developments to explore.
  • 11. Biases aside... Before we start... put aside any biases. At least until after the presentation, when you can rip into me :)
  • 12. ss oc oriented css o object
  • 14. In 2009, Nicole Sullivan introduced a new way of looking at CSS. She defined this as Object Oriented CSS (OOCSS).
  • 15. Statistics After optimising Facebook’s CSS, she discovered some amazing statistics... about how we reapply CSS properties throughout our style sheets.
  • 16. Facebook: Facebook blue 261 Unique colors 548 colors 6,498 Salesforce: padding 3,668 h1-h6 511
  • 17. “ “We have been doing it all wrong.... Our best practices are killing us” ” Nicole Sullivan
  • 18. “ The purpose of OOCSS is to encourage code reuse and, ultimately, faster and more efficient stylesheets that are easier to add to and maintain. ” http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/
  • 20. Abstraction One of the key aims of OOCSS is to abstract as many components of the layout as possible.
  • 21. Example Can you see any repeating visual patterns?
  • 24. Rows The first layout pattern could be the rows.
  • 27. Past practice In the past, people may have styled these rows using a series of IDs.
  • 29. OOCSS aims 1. use a single class so that it can be reused as needed 2. abstract the module down to core purposes
  • 30. Core purposes These rows have two purposes: 1. clear each row 2. trigger the block formatting context.
  • 32. Re-use Then we can write one simple, but very powerful class that can be reused anywhere in the layout.
  • 33. .row { ! clear: left; Clears each row ! overflow: hidden; Triggers block formatting ! zoom: 1; Triggers haslayout in IE5-7 ! _overflow: visible; IE6 underscore hack }
  • 35. Different rows Did you notice that two of the rows were different? They have different background colours and additional padding above and below.
  • 37. New names? We could now add some classes based on the purpose of these rows - such as “news” and “footer”.
  • 38. .news { ! padding: 1em 0; ! background-color: blue;! } .footer { ! padding: 1em 0; ! background-color: pink;! }
  • 39. Abstract However, it would be better to abstract these names further so that they are more flexible.
  • 40. .row { ! clear: left; ! overflow: hidden; ! zoom: 1; ! _overflow: visible; } .row-alt1 { ! padding: 1em 0; ! background-color: blue;! } .row-alt2 { ! padding: 1em 0; ! background-color: pink;! }
  • 41. <div class="row"></div> <div class="row"></div> <div class="row row-alt1"></div> <div class="row row-alt2"></div>
  • 42. Further If you wanted, these could be abstracted even further into padding and backgrounds as separate concepts.
  • 43. .row-padding { ! padding: 1em 0; } .bg-color1 { ! background-color: blue;! } .bg-color2 { ! background-color: pink;! }
  • 44. <div class="row"></div> <div class="row"></div> <div class="row row-padding bg-color1"></div> <div class="row row-padding bg-color2"></div>
  • 45. Up to you It depends on the site and circumstances as to how far you think you need to abstract these concepts.
  • 47. Primary module The “row” class is our primary module. The additional classes are “modifiers” as they modify the primary class.
  • 48. Modifiers Modifiers should not rewrite any aspect of the primary module, they only modify or add to the primary module.
  • 49. Types of class Primary module Sub-module Modifier .row-alt1 .row-alt1
  • 50. Looking for patterns - columns
  • 51. Columns The second layout pattern could be the columns. The wide layout looks like it has four columns.
  • 52. Column 1 Column 2 Column 3 Column 4
  • 53. Patterns Some of the rows spread across all columns. Others spread across two or one column.
  • 54. Column 1 Column 2 Column 3 Column 4 4 columns 2 columns 2 columns 2 columns 2 columns 1 columns 1 columns 1 columns 1 columns
  • 55. Framework 1 To be safe, we should assume we need containers for 4, 3, 2 and 1 column widths. We can convert these column options into a simple grid framework.
  • 56. Wide layout Class names 4 column box .w-4col 3 column box .w-3col 2 column box .w-2col 1 column box .w-1col
  • 57. <div class="row"> ! <div class="w-4col"></div> </div> <div class="row"> ! <div class="w-2col"></div> ! <div class="w-2col"></div> </div> <div class="row row-alt1"> ! <div class="w-2col"></div> ! <div class="w-2col"></div> </div> <div class="row row-alt2"> ! <div class="w-1col"></div> ! <div class="w-1col"></div> ! <div class="w-1col"></div> ! <div class="w-1col"></div> </div>
  • 58. Narrow The same is true of the narrow layout, except this time it has only two overall columns.
  • 59. Column 1 Column 2
  • 60. 2 columns 1 columns 1 columns 1 columns 1 columns 1 columns 1 columns
  • 61. Framework 2 We could also create a second, different grid for narrow screen. This would allow us to control whether columns sat beside each other or below at a narrower screen size.
  • 62. Narrow layout Class names 2 column box .n-2col 1 column box .n-2col
  • 63. <div class="row"> ! <div class="w-4col"></div> </div> <div class="row"> ! <div class="w-2col n-2col"></div> ! <div class="w-2col n-2col"></div> </div> <div class="row row-alt1"> ! <div class="w-2col n-2col"></div> ! <div class="w-2col n-2col"></div> </div> <div class="row row-alt2"> ! <div class="w-1col n-2col"></div> ! <div class="w-1col n-2col"></div> ! <div class="w-1col n-2col"></div> ! <div class="w-1col n-2col"></div> </div>
  • 64. Control! With these two simple grids, we can control complicated layouts - both wide and narrow.
  • 66. Boxes? You may have noticed that there were also a series of smaller boxes, each with an image to the left or right.
  • 68. Core purpose 1. contain content 2. feature object to left or right 3. content beside feature object 4. margin below
  • 69. Adaptable box We need to create an adaptable box: - could be placed anywhere - any width or height - any feature content - feature content could be left/right - any content inside the body
  • 70. Target We need to be able to target - the overall box - the object (left or right) - the body content within the box - a possible heading (h1-h6) - possibly even the contents itself
  • 71. box box body This is a heading heading box box feature Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh box content euismod tinunt ut laoreet dolore magna aliquam erat volut.
  • 72. There are a range of possible class we could use here. .box { } .box-feature { } .box-feature-alt { } .box-body { } .box-heading { } .box-content { }
  • 73. Width Do not give the box a width - allow it to spread to fit the width of any parent container.
  • 74. Contain floats This box module must contain (and therefore wrap around) either a left or right floating object. We can solve this by triggering the block formatting context on the parent.
  • 75. .box { ! overflow: hidden; Triggers block formatting ! zoom: 1; ! _overflow: visible; ! margin-bottom: 1em; }
  • 76. Location Agnostic The box must work when placed anywhere within the layout. The box must be “location agnostic”. aside .box { } .box { }
  • 77. Sit beside The box may contain objects that have varying widths. We need our content box (“box-body”) to sit beside these objects, regardless of their widths.
  • 78. BFC again We can solve this by triggering the block formatting context on the “box-body” class.
  • 79. box-body This is a heading Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut.
  • 80. .box-body { ! overflow: hidden; Triggers block formatting ! zoom: 1; ! _overflow: visible; }
  • 82. Powerful box We have just made a very powerful box. Nicole Sullivan refers to this box as the “media” element.
  • 83. .box,.box-body { ! overflow: hidden; ! zoom: 1; ! _overflow: visible; } .box { margin: 0 0 10px; } .box-feature { ! float: left; ! margin: 0 10px 0 0; } .box-feature-alt { ! float: right; ! margin: 0 0 0 10px; }
  • 84. Primary module In this case, the “box” class is our primary module. There are no modifiers, but there are a range of sub-modules.
  • 85. Sub-modules Sub-modules are other classes associated with the primary module. They do not alter or add directly to the primary module.
  • 86. Types of class Primary module Sub-module Modifier .row-alt1 .row-alt1 .box .box-feature .box-body
  • 88. Semantic classes For years, we have been taught to keep our markup clean and only use “semantic” class names.
  • 89. Break the rules? OOCSS seems to break both of these rules - and in a big way. But have we been thinking about “semantic” class names in the wrong way?
  • 90. “ HTML class names offer no semantic value to search engines or screen readers, aside from microformats. ” http://www.brettjankord.com/2013/02/09/thoughts-on-semantic-html-class-names-and-maintainability/
  • 91. “ Rather than concerning ourselves with creating semantic class names, I think we should be thinking about creating sensible class names. Sensible class names offer semantics, but they ” also offer flexibility/reusability. http://www.brettjankord.com/2013/02/09/thoughts-on-semantic-html-class-names-and-maintainability/
  • 92. “ If your class is called “blue” and you want to change it to red, you have far bigger problems than class names to deal with! ” https://speakerdeck.com/andyhume/css-for-grown-ups-maturing-best-practises
  • 93. Move forward In order to move forward, especially on large scale sites, we cannot keep using old practices.
  • 94. Solution? OOCSS offers front end developers an alternative - light weight, modular CSS that can be re-used repeatedly across sites.
  • 95. acss srmtecture css achi
  • 97. “ SMACSS is more style guide than rigid framework - an attempt to document a consistent approach to site development when using CSS. ” http://alistapart.com/article/frameworksfordesigners
  • 98. In 2011, Jonathan Snook introduced a new way of looking at CSS architecture. He called this Scalable and Modular Architecture for CSS (SMACSS)
  • 100. Categories Base rules Layout rules Module (and sub-module) rules State rules Theme rules
  • 101. Base Base rules are the defaults. They are almost exclusively single element selectors.
  • 102. Layout Layout rules divide the page into sections. Layouts hold one or more modules together.
  • 103. Modules Modules are the reusable, modular parts of our design. They are the callouts, the sidebar sections, the product lists and so on.
  • 104. SMACSS allows for primary modules, modifiers and sub-modules, though they are labelled slightly differently.
  • 105. Primary module Sub-module Modifier Sub-component Sub-module .row-alt1 .row-alt1 .box .box-feature .box-body
  • 106. States State rules are ways to describe how our modules or layouts will look when in a particular state. Is it hidden or expanded?
  • 107. Themes Theme rules describe how the layout or modules might look.
  • 109. Avoid IDs Use classes rather than IDs for styling purposes. Classes are more flexible. Using classes can reduce specificity issues.
  • 110. Meaningful Class names should be meaningful for other authors, so that other developers can understand their purpose.
  • 111. Pattern Class names should follow understandable patterns.
  • 112. Prefixes Use “pseudo-namespaces” as prefixes - so that modules, modifiers and sub-modules can be identified.
  • 113. Modifiers Possibly use different naming conventions for modifiers, sub-modules and states. .example-widget { } .example-widget--modifier { } .example-widget__sub-module { } .example-widget--is-somestate { }
  • 115. “ I’ve noticed that designers traditionally write CSS that is deeply tied to the HTML that it is designed to style. How do we begin to decouple the two for more flexible development with ” less refactoring? http://coding.smashingmagazine.com/2012/04/20/decoupling-html-from-css/
  • 116. Decouple So how do we “decouple” our HTML and CSS. 1. using additional class names 2. using child selectors
  • 117. Example To see this in action, let’s look at the “box” example from earlier. What if we wanted to style the heading inside the “box-body”.
  • 118. This is a heading heading Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut.
  • 119. Style the h2? We could style this heading using something like this: .box { } .box h2 { }
  • 120. <div class="box"> ! <img class="box-feature" ! src="dummy-140.png" alt=""> ! <div class="box-body"> ! ! <h2>Heading</h2> ! ! </p>Lorem ipsum dolor</p> ! </div> </div>
  • 121. Problem? The problem is that the CSS is “coupled” with the HTML. What happens if there is an <h3> element inside the box?
  • 122. One solution would be to set all heading levels. .box { } .box h1 { } .box h2 { } .box h3 { } .box h4 { } .box h5 { } .box h6 { }
  • 123. Use a class However, the safest way to “uncouple” the CSS and HTML would be to use a simple class.
  • 124. <div class="box"> ! <img class="box-feature" ! src="dummy-140.png" alt=""> ! <div class="box-body"> ! ! <h2 class="box-heading"> ! ! ! Heading</h2> ! ! </p>Lorem ipsum dolor</p> ! </div> </div>
  • 125. More flexible Now our HTML and CSS are more flexible. It doesn’t matter what heading level is used. .box { } .box-heading { }
  • 126. a closer look at modules
  • 127. Guidelines The following “module” guidelines apply regardless of whether you are coming from OOCSS or SMACSS.
  • 129. “ By making your base objects this simple your choices become boolean; you use the object or you don’t. The object is either entirely suitable as a basis, or entirely _un_suitable. ” http://csswizardry.com/2012/06/the-open-closed-principle-applied-to-css/
  • 130. Keep ‘em simple The base module should be defined as simply as possible. This means that they are highly flexible.
  • 131. Let’s use an example of our “row” class. What if we added some padding to this rule? .row { ! clear: left; ! overflow: hidden; ! padding: 20px 0; }
  • 132. But what if we want a row that doesn’t have padding? The problem is that this rule is now very specifically defined. It is therefore not as flexible.
  • 134. “ Any CSS that unsets styles (apart from in a reset) should start ringing alarm bells... Rulesets should only ever inherit and add to previous ones, never undo. ” http://csswizardry.com/2012/11/code-smells-in-css/
  • 135. Don’t undo Leading on from the first rule, you should avoid writing rules to undo a previous module.
  • 136. For example, what if you wanted almost all of your headings to have a border-bottom? h2 { ! font-size: 1.5em ! margin-bottom: 1em; ! padding-bottom: 1em; ! border-bottom: 1px solid red; }
  • 137. But in some cases you might want a heading without a border-bottom.
  • 138. You could write a new rule like this: .no-border { ! padding-bottom: 0; ! border-bottom: none; }
  • 139. This is not ideal. It is much better to write sub-modules that add styles, rather than write sub- modules to undo styles.
  • 140. So, a better way might be to write two rules like this:
  • 141. /* default style */ h2 { ! font-size: 1.5em ! margin-bottom: 1em; } /* only when border needed */ .headline { ! padding-bottom: 1em; ! border-bottom: 1px solid red; }
  • 142. Rule 3: extend but don’t modify
  • 143. Don’t modify Base modules can be extended using sub-modules. However, the base module itself should never be modified.
  • 144. This is based on the object oriented programming “open/ close principle”.
  • 145. “ Software entities (classes, modules, functions, etc.) should be open for extension, but closed for modification. ” http://en.wikipedia.org/wiki/Open/closed_principle
  • 146. If a based module needs to be modified to suit a specific case, it is probably better to create a new module.
  • 147. Rule 4: think before adding new modules
  • 148. Don’t rush It is always tempting to add a module based on your need at the time... as well as based on the needs of the system.
  • 149. This often happens after the initial planning and build has been done. It’s easy to be tempted by “I’ll just drop this new class in at the bottom of my CSS”.
  • 150. However, adding poorly structured new modules, without rigorous abstraction, will lead to bloated, hard-to-manage CSS.
  • 153. DocBlock There is a growing trend to use the DocBlock as an overall comment convention. In fact, a movement around this type of commenting began over 6 years ago with the CSSdoc group
  • 154. “ "A DocBlock is an extended C++- style PHP comment that begins with "/**" and has an "*" at the beginning of every line. DocBlocks precede the element they are documenting... ” http://en.wikipedia.org/wiki/PHPDoc
  • 155. /** * Short desc * * Long description first sentence starts * and continues on this line for a while * finally concluding here at the end of * this paragraph * * The blank line above denotes a paragraph */
  • 157. Single line? In the early days of CSS, a lot of developers preferred single line CSS rules as they could easily see the selectors.
  • 158. Multi-line Today, with the complexity of individual rules, most developers seem to prefer either the multi-line format, or multi-line with indenting format.
  • 159. CSS Tricks rule formatting poll Multi-line Format with Indenting 44% Multi-line Format 28% Single-line Format 11% Single-line Format with Indenting/Tabbing 5% Mostly Single-line Format 5% Single-line Format with Tabbing 4% Other 3% *CSS-tricks poll: http://css-tricks.com/different-ways-to-format-css/
  • 160. .navigation_rss_icon { ! position: absolute; ! left: 940px; ! bottom: 0px; } #navigation_rss { ! position: absolute; ! left: 720px; ! font-family: Verdana, Arial, Helvetica, sans-serif; ! text-transform: uppercase; ! color: #897567; ! line-height: 2.5em; } #navigation_rss li { ! display: inline; } #navigation_rss li a:link, #navigation_rss li a:visited { ! color: #fffffe; ! text-decoration: none;
  • 161. .navigation_rss_icon { position: absolute; left: 940px; bottom: 0px; } #navigation_rss { position: absolute; left: 720px; font-family: Verdana, Arial, Helvetica, sans-serif; text-transform: uppercase; color: #897567; line-height: 2.5em; } #navigation_rss li { display: inline; } #navigation_rss li a:link, #navigation_rss li a:visited { color: #fffffe; text-decoration: none;
  • 163. Alphabet? Similarly, many developers used to prefer to sort their declarations alphabetically.
  • 164. Group Today, most people prefer to group their declarations by type.
  • 165. CSS Tricks declaration formatting poll Grouped by type 45% 45% Random - 39% 39% Alphabet - 14% 14% By line - 2% 2% *CSS-tricks poll: http://css-tricks.com/different-ways-to-format-css/
  • 166. .selector { /* Positioning */ position: absolute; z-index: 10; top: 0; right: 0; /* Display & Box Model */ display: inline-block; overflow: hidden; box-sizing: border-box; width: 100px; height: 100px; padding: 10px; border: 10px solid #333; margin: 10px; /* Color */ background: #000; color: #fff /* Text */
  • 167. Of course, many tools and pre- processors take care of this for you. If your tools do not have this capability, take a look at CSS Comb http://csscomb.com/
  • 169. Russ Weakley Max Design Site: maxdesign.com.au Twitter: twitter.com/russmaxdesign Slideshare: slideshare.net/maxdesign Linkedin: linkedin.com/in/russweakley