SlideShare a Scribd company logo
efficient
maintainable, modular



CSS
Here are some quick tips for
    creating efficient,
    maintainable CSS.
Applying CSS
1. Avoid using inline styles as
  they are hard to maintain and
        increase file size.

                           Avoid
<body>
<h2 style=“color: red;”>
!    Heading here
</h2>
2. Avoid using header styles as
  they are also hard to maintain
      and increase file size.

                      Avoid
<style>
  p { color: red; }
</style>
3. Avoid using @import within
the HTML as this will slow down
          IE browsers.

                     Avoid
<style>
  @import "a.css";
</style>
4. Avoid using multiple CSS
 files, or use a script to combine
       all CSS files into one.


<link   rel="stylesheet"   href=”reset.css">
<link   rel="stylesheet"   href=”grids.css">
<link   rel="stylesheet"   href=”text.css">
<link   rel="stylesheet"   href=”modules.css">
<link   rel="stylesheet"   href=”colors.css">

                                      Avoid
Writing CSS rules
5. Use multiple declarations
           where possible



p
{
!    margin: 0 0 1.5em;
!    background: green;
}
6. Use multiple selectors
         where possible



h1, h2, h3, h4, h5
{
!    color: #666;
!    margin: 0 0 .5em;
}
7. Use shorthand properties
         where possible.


body                          Avoid
{
  margin-top: 20px;
  margin-right: 10px;
  margin-bottom: 20px;
  margin-left: 10px;
}                                Preferred

body { margin: 20px 10px; }
8. Avoid !important as it is often
           unnecessary.



p { margin: 0 !important; }



                         Avoid
9. Avoid complex selectors. Try
    to be only as specific as
            needed.

                Avoid

.nav ul li a { margin: 0; }

.nav a { margin: 0; }


         Preferred
10. Avoid universal selectors
   due to performance issues.



.nav * { margin: 0; }


           Avoid
11. Avoid qualifying selectors
  as this is often unnecessary.


              Avoid

div.nav { }

.nav { }


       Preferred
12. Avoid IE-proprietary filters
 as they slow page performance.


               Avoid

filter:Alpha(Opacity=40);
-ms-filter: "Alpha(Opacity=40)";
13. Avoid IDs. Where possible,
      use classes instead.

               Avoid


#header { ... }

.header { ... }


        Preferred
14. Try not to use use too many
     font-size declarations.



h1 { font-size: 200%; }
.nav { font-size: 80%; }       Avoid
.widget { font-size: 70%; }
.intro { font-size: 110%; }
.sidebar { font-size: 85%; }
Optimisation
15. Use a CSS minifier to
reduce your overall CSS file
           size:
    http://refresh-sf.com/yui/
16. Optimise images as much
         as possible
17. Where possible, combine
    images into sprites.




  http://designsbynickthegeek.com/tutorials/social-menu-icon-sprites
18. Where possible, use CSS3
   instead of images to reduce
  server requests and page size.

                                    Avoid

p { background: url(round-corners.png); }

p { border-radius: 10px; }


                             Preferred
Russ Weakley
Max Design

Site: maxdesign.com.au
Twitter: twitter.com/russmaxdesign
Slideshare: slideshare.net/maxdesign
Linkedin: linkedin.com/in/russweakley

More Related Content

What's hot

Specificity and CSS Selectors
Specificity and CSS SelectorsSpecificity and CSS Selectors
Specificity and CSS Selectors
palomateach
 
Line Height
Line HeightLine Height
Line Height
Russ Weakley
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
Eliran Eliassy
 
CSS
CSSCSS
Page layout with css
Page layout with cssPage layout with css
Page layout with css
Er. Nawaraj Bhandari
 
Style and Selector
Style and SelectorStyle and Selector
Style and Selector
Yaowaluck Promdee
 
Css position
Css positionCss position
Css position
Webtech Learning
 
CSS Grid
CSS GridCSS Grid
jQuery
jQueryjQuery
Frontend Crash Course: HTML and CSS
Frontend Crash Course: HTML and CSSFrontend Crash Course: HTML and CSS
Frontend Crash Course: HTML and CSS
Thinkful
 
Navigation and Link
Navigation and LinkNavigation and Link
Navigation and Link
Yaowaluck Promdee
 
Lab#13 responsive web
Lab#13 responsive webLab#13 responsive web
Lab#13 responsive web
Yaowaluck Promdee
 
Styled Components & React.js
Styled Components & React.jsStyled Components & React.js
Styled Components & React.js
Grayson Hicks
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
Dave Kelly
 
React hooks
React hooksReact hooks
React hooks
Assaf Gannon
 
Basic-CSS-tutorial
Basic-CSS-tutorialBasic-CSS-tutorial
Basic-CSS-tutorial
tutorialsruby
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
Russ Weakley
 
CSS
CSSCSS
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginning
Anis Ahmad
 
CSS Boc model
CSS Boc model CSS Boc model
CSS Boc model
Yaowaluck Promdee
 

What's hot (20)

Specificity and CSS Selectors
Specificity and CSS SelectorsSpecificity and CSS Selectors
Specificity and CSS Selectors
 
Line Height
Line HeightLine Height
Line Height
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 
CSS
CSSCSS
CSS
 
Page layout with css
Page layout with cssPage layout with css
Page layout with css
 
Style and Selector
Style and SelectorStyle and Selector
Style and Selector
 
Css position
Css positionCss position
Css position
 
CSS Grid
CSS GridCSS Grid
CSS Grid
 
jQuery
jQueryjQuery
jQuery
 
Frontend Crash Course: HTML and CSS
Frontend Crash Course: HTML and CSSFrontend Crash Course: HTML and CSS
Frontend Crash Course: HTML and CSS
 
Navigation and Link
Navigation and LinkNavigation and Link
Navigation and Link
 
Lab#13 responsive web
Lab#13 responsive webLab#13 responsive web
Lab#13 responsive web
 
Styled Components & React.js
Styled Components & React.jsStyled Components & React.js
Styled Components & React.js
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
React hooks
React hooksReact hooks
React hooks
 
Basic-CSS-tutorial
Basic-CSS-tutorialBasic-CSS-tutorial
Basic-CSS-tutorial
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
 
CSS
CSSCSS
CSS
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginning
 
CSS Boc model
CSS Boc model CSS Boc model
CSS Boc model
 

Similar to Efficient, maintainable CSS

Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Erin M. Kidwell
 
Team styles
Team stylesTeam styles
Team styles
nathanscott
 
Web Accessibility for the 21st Century
Web Accessibility for the 21st CenturyWeb Accessibility for the 21st Century
Web Accessibility for the 21st Century
dreamwidth
 
css-tutorial
css-tutorialcss-tutorial
css-tutorial
tutorialsruby
 
css-tutorial
css-tutorialcss-tutorial
css-tutorial
tutorialsruby
 
Css web gallery
Css web galleryCss web gallery
Css web gallery
Daniel Downs
 
CSS3
CSS3CSS3
A complete html and css guidelines for beginners
A complete html and css guidelines for beginnersA complete html and css guidelines for beginners
A complete html and css guidelines for beginners
Surendra kumar
 
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 201210 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
Bastian Grimm
 
Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors. Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors.
The University of Akron
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
butest
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
butest
 
How to use CSS3 in WordPress
How to use CSS3 in WordPressHow to use CSS3 in WordPress
How to use CSS3 in WordPress
Suzette Franck
 
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Hatem Mahmoud
 
04 CSS #burningkeyboards
04 CSS #burningkeyboards04 CSS #burningkeyboards
04 CSS #burningkeyboards
Denis Ristic
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
David Lindkvist
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern libraries
Russ Weakley
 
CSS for Mobile
CSS for MobileCSS for Mobile
CSS for Mobile
Daniel Ryan
 
Master page
Master pageMaster page
Master page
Paneliya Prince
 
Site optimization
Site optimizationSite optimization
Site optimization
Dimitar Belchugov
 

Similar to Efficient, maintainable CSS (20)

Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
 
Team styles
Team stylesTeam styles
Team styles
 
Web Accessibility for the 21st Century
Web Accessibility for the 21st CenturyWeb Accessibility for the 21st Century
Web Accessibility for the 21st Century
 
css-tutorial
css-tutorialcss-tutorial
css-tutorial
 
css-tutorial
css-tutorialcss-tutorial
css-tutorial
 
Css web gallery
Css web galleryCss web gallery
Css web gallery
 
CSS3
CSS3CSS3
CSS3
 
A complete html and css guidelines for beginners
A complete html and css guidelines for beginnersA complete html and css guidelines for beginners
A complete html and css guidelines for beginners
 
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 201210 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
 
Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors. Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors.
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
How to use CSS3 in WordPress
How to use CSS3 in WordPressHow to use CSS3 in WordPress
How to use CSS3 in WordPress
 
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
 
04 CSS #burningkeyboards
04 CSS #burningkeyboards04 CSS #burningkeyboards
04 CSS #burningkeyboards
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern libraries
 
CSS for Mobile
CSS for MobileCSS for Mobile
CSS for Mobile
 
Master page
Master pageMaster page
Master page
 
Site optimization
Site optimizationSite optimization
Site optimization
 

More from Russ Weakley

Accessible chat windows
Accessible chat windowsAccessible chat windows
Accessible chat windows
Russ Weakley
 
Accessible names & descriptions
Accessible names & descriptionsAccessible names & descriptions
Accessible names & descriptions
Russ Weakley
 
A deep dive into accessible names
A deep dive into accessible namesA deep dive into accessible names
A deep dive into accessible names
Russ 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 components
Russ 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 Systems
Russ Weakley
 
Creating accessible modals and autocompletes
Creating accessible modals and autocompletesCreating accessible modals and autocompletes
Creating accessible modals and autocompletes
Russ Weakley
 
Building an accessible progressive loader
Building an accessible progressive loaderBuilding an accessible progressive loader
Building an accessible progressive loader
Russ 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 glory
Russ Weakley
 
Accessible Inline errors messages
Accessible Inline errors messagesAccessible Inline errors messages
Accessible Inline errors messages
Russ Weakley
 
Accessible Form Hints and Errors
Accessible Form Hints and ErrorsAccessible Form Hints and Errors
Accessible Form Hints and Errors
Russ 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 Libraries
Russ Weakley
 
Accessibility in pattern libraries
Accessibility in pattern librariesAccessibility in pattern libraries
Accessibility in pattern libraries
Russ Weakley
 
Building an accessible auto-complete - #ID24
Building an accessible auto-complete - #ID24Building an accessible auto-complete - #ID24
Building an accessible auto-complete - #ID24
Russ Weakley
 
Building an accessible auto-complete
Building an accessible auto-completeBuilding an accessible auto-complete
Building an accessible auto-complete
Russ Weakley
 
Creating Acessible floating labels
Creating Acessible floating labelsCreating Acessible floating labels
Creating Acessible floating labels
Russ Weakley
 
Creating an Accessible button dropdown
Creating an Accessible button dropdownCreating an Accessible button dropdown
Creating an Accessible button dropdown
Russ Weakley
 
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
Russ 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
 
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
 

Recently uploaded

Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
c5vrf27qcz
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
Ivo Velitchkov
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Alpen-Adria-Universität
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Wask
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
Public CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptxPublic CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptx
marufrahmanstratejm
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
Neo4j
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 

Recently uploaded (20)

Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
Public CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptxPublic CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptx
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 

Efficient, maintainable CSS

  • 2. Here are some quick tips for creating efficient, maintainable CSS.
  • 4. 1. Avoid using inline styles as they are hard to maintain and increase file size. Avoid <body> <h2 style=“color: red;”> ! Heading here </h2>
  • 5. 2. Avoid using header styles as they are also hard to maintain and increase file size. Avoid <style> p { color: red; } </style>
  • 6. 3. Avoid using @import within the HTML as this will slow down IE browsers. Avoid <style> @import "a.css"; </style>
  • 7. 4. Avoid using multiple CSS files, or use a script to combine all CSS files into one. <link rel="stylesheet" href=”reset.css"> <link rel="stylesheet" href=”grids.css"> <link rel="stylesheet" href=”text.css"> <link rel="stylesheet" href=”modules.css"> <link rel="stylesheet" href=”colors.css"> Avoid
  • 9. 5. Use multiple declarations where possible p { ! margin: 0 0 1.5em; ! background: green; }
  • 10. 6. Use multiple selectors where possible h1, h2, h3, h4, h5 { ! color: #666; ! margin: 0 0 .5em; }
  • 11. 7. Use shorthand properties where possible. body Avoid { margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; } Preferred body { margin: 20px 10px; }
  • 12. 8. Avoid !important as it is often unnecessary. p { margin: 0 !important; } Avoid
  • 13. 9. Avoid complex selectors. Try to be only as specific as needed. Avoid .nav ul li a { margin: 0; } .nav a { margin: 0; } Preferred
  • 14. 10. Avoid universal selectors due to performance issues. .nav * { margin: 0; } Avoid
  • 15. 11. Avoid qualifying selectors as this is often unnecessary. Avoid div.nav { } .nav { } Preferred
  • 16. 12. Avoid IE-proprietary filters as they slow page performance. Avoid filter:Alpha(Opacity=40); -ms-filter: "Alpha(Opacity=40)";
  • 17. 13. Avoid IDs. Where possible, use classes instead. Avoid #header { ... } .header { ... } Preferred
  • 18. 14. Try not to use use too many font-size declarations. h1 { font-size: 200%; } .nav { font-size: 80%; } Avoid .widget { font-size: 70%; } .intro { font-size: 110%; } .sidebar { font-size: 85%; }
  • 20. 15. Use a CSS minifier to reduce your overall CSS file size: http://refresh-sf.com/yui/
  • 21. 16. Optimise images as much as possible
  • 22. 17. Where possible, combine images into sprites. http://designsbynickthegeek.com/tutorials/social-menu-icon-sprites
  • 23. 18. Where possible, use CSS3 instead of images to reduce server requests and page size. Avoid p { background: url(round-corners.png); } p { border-radius: 10px; } Preferred
  • 24. Russ Weakley Max Design Site: maxdesign.com.au Twitter: twitter.com/russmaxdesign Slideshare: slideshare.net/maxdesign Linkedin: linkedin.com/in/russweakley