Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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.

                           Avo...
2. Avoid using header styles as
  they are also hard to maintain
      and increase file size.

                      Avoid...
3. Avoid using @import within
the HTML as this will slow down
          IE browsers.

                     Avoid
<style>
 ...
4. Avoid using multiple CSS
 files, or use a script to combine
       all CSS files into one.


<link   rel="stylesheet"   h...
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-...
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 { ma...
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 { }


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


               Avoid

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

               Avoid


#header { ... }

.header { ... }


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



h1 { font-size: 200%; }
.nav { font-size: 80%; }       Avo...
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-spri...
18. Where possible, use CSS3
   instead of images to reduce
  server requests and page size.

                            ...
Russ Weakley
Max Design

Site: maxdesign.com.au
Twitter: twitter.com/russmaxdesign
Slideshare: slideshare.net/maxdesign
Li...
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
Maintainable CSS
Next
Upcoming SlideShare
Maintainable CSS
Next
Download to read offline and view in fullscreen.

Share

Efficient, maintainable CSS

Download to read offline

Many web sites have moved away from table based layouts to CSS. But what about the longer term? Is you CSS efficient, maintainable and modular? Find out about taking your CSS to the next level.

Efficient, maintainable CSS

  1. efficient maintainable, modular CSS
  2. Here are some quick tips for creating efficient, maintainable CSS.
  3. Applying 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
  8. Writing CSS rules
  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%; }
  19. Optimisation
  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
  • simonmarkholland

    Apr. 24, 2018
  • 62kyaw

    Feb. 18, 2018
  • tylervs5

    Oct. 26, 2017
  • williammdavis

    Dec. 4, 2016
  • kingforce_my

    Jul. 27, 2016
  • ajeebkp23

    Sep. 9, 2015
  • sunilkrao

    Jul. 28, 2015
  • Tomz

    Jun. 25, 2015
  • justinschmidt80

    Jun. 21, 2015
  • keitakawamoto

    Apr. 30, 2015
  • alexislawson1

    Mar. 5, 2015
  • nitewol

    Jan. 18, 2015
  • mehmetgulercode

    Dec. 15, 2014
  • btcrooks1

    Oct. 21, 2014
  • madz2003

    Oct. 16, 2014
  • shecar1

    Sep. 26, 2014
  • kimsukyung

    May. 26, 2014
  • thisisdillydaydream

    May. 6, 2014
  • jorgeluisduarte

    Apr. 4, 2014
  • peterandersson1963

    Dec. 26, 2013

Many web sites have moved away from table based layouts to CSS. But what about the longer term? Is you CSS efficient, maintainable and modular? Find out about taking your CSS to the next level.

Views

Total views

71,903

On Slideshare

0

From embeds

0

Number of embeds

18,977

Actions

Downloads

2,151

Shares

0

Comments

0

Likes

218

×