Scribd
Upload
91 views

Efficient: Maintainable, Modular

The document discusses how to write efficient, maintainable, modular and hack-free CSS. It provides tips for making CSS efficient such as using external style sheets, inheritance, shorthand properties and avoiding !important. For maintainable CSS it suggests adding comments and using meaningful names. Modular CSS involves separating CSS into individual files and linking them through a bridging file. Hack-free CSS uses conditional comments to target IE-specific styles rather than browser hacks.

Uploaded by

Michael Pereira
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
91 views

Efficient: Maintainable, Modular

The document discusses how to write efficient, maintainable, modular and hack-free CSS. It provides tips for making CSS efficient such as using external style sheets, inheritance, shorthand properties and avoiding !important. For maintainable CSS it suggests adding comments and using meaningful names. Modular CSS involves separating CSS into individual files and linking them through a bridging file. Hack-free CSS uses conditional comments to target IE-specific styles rather than browser hacks.

Uploaded by

Michael Pereira
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 106

CSS

maintainable, modular

Efficient

How many of you know CSS?

How can I make my CSS more efficient?

Were going to look at four key areas

efficient css maintainable css modular css hack-free css

Writing efficient CSS

Use external style sheets instead of inline or header styles.

Not good::

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> </head> <body> <p style="color: red"> ... </p> </body> </html>

Not good::

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <style type="text/css" media="screen"> p { color: red; } </style> </head> <body> ... </body> </html>

Good::

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <link rel="stylesheet" href="name.css" type="text/css" media="screen" /> < /head> <body> ... </body> </html>

Use link rather than @import for IE & NN4

Not good::

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <style type="text/css" media="screen"> @import url("styles.css");</style> </style> </head> <body> ... </body> </html>

Good::

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <link rel="stylesheet" href="name.css" type="text/css" media="screen" /> </head> <body> ... </body> </html>

Use inheritance

Inefficient::

p { font-family: arial, helvetica, sans-serif; } #container { font-family: arial, helvetica, sans-serif; } #navigation { font-family: arial, helvetica, sans-serif; } #content { font-family: arial, helvetica, sans-serif; } #sidebar { font-family: arial, helvetica, sans-serif; } h1 { font-family: georgia, times, serif; }

Efficient::

body { font-family: arial, helvetica, sans-serif; }

body { font-family: arial, helvetica, sans-serif; } h1 { font-family: georgia, times, serif; }

Use multiple selectors

Inefficient::

h1 h2 h3 h4

{ { { {

color: color: color: color:

#236799; #236799; #236799; #236799;

} } } }

Efficient::

h1, h2, h3, h4 { color: #236799; }

Use multiple declarations

Inefficient::

p { margin: 0 0 1em; } p { background: #ddd; } p { color: #666; }

Efficient::

p { margin: 0 0 1em; background: #ddd; color: #666; }

Use shorthand properties

Inefficient::

body { font-size: 85%; font-family: arial, helvetica, sans-serif; background-image: url(image.gif); background-repeat: no-repeat; background-position: 0 100%; margin-top: 1em; margin-right: 1em; margin-bottom: 0; margin-left: 1em; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-style: solid; border-width: 1px; border-color: red; color: #222222;

Efficient::

body { font: 85% arial, helvetica, sans-serif; background: url(image.gif) no-repeat 0 100%; margin: 1em 1em 0; padding: 10px; border: 1px solid red; color: #222; }

Avoid !important

Desperate::

#news { background: #ddd !important; }

Understanding specificity::

#container #news { background: #ddd; } body #container #news { background: #ddd; }

So, how can you make your CSS easier to understand for people who maintain your website?

Writing maintainable CSS

Place a time stamp, author and notation at top of CSS files.

/* --------------------------------Site: Site name Author: Name Updated: Date and time Updated by: Name --------------------------------*/

Include global color notation

/* --------------------------------COLORS Body background: #def455 Container background: #fff Main Text: #333 Links: #00600f Visited links: #098761 Hover links: #aaf433 H1, H2, H3: #960 H4, H5, H6: #000 --------------------------------*/

Use meaningful names for IDs & classes

Not good::

.green-box { ... } #big-text { ... }

Better::

.pullquote {... } #introduction {... }

Group related rules

#header #header #header #header #header

{ ... } h1 { ... } h1 img { ... } form { ... } a#skip { ... } { ... } ul { ... } ul li { ... } ul li a { ... } ul li a:hover { ... }

#navigation #navigation #navigation #navigation #navigation #content #content #content #content #content

{ ... } h2 { ... } p { ... } ul { ... } ul li { ... }

Add clear comments to your CSS files

/* --------------------------------header styles --------------------------------*/ #header #header #header #header { ... } h1 { ... } h1 img { ... } form { ... }

/* --------------------------------navigation styles --------------------------------*/ #navigation { ... }

OK, how can you manage your CSS across an entire site?

Modular CSS

An example: Your HTML pages are linking to a master CSS file


HTML files Master CSS file

Step 1 Separate into individual files


container.css HTML files

header.css

content.css

Why separate CSS files? Its easier to find rules. You can also serve specific CSS files to pages.

Step 2 Add a bridging CSS file

HTML files

Bridging CSS file

Why add a bridging file? You can add or remove files as needed without changing the HTML.

Step 3 Link to bridging file

HTML files

Bridging CSS file

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <link rel="stylesheet" href="bridging.css" type="text/css media="screen, projection"> </head> <body> ... </body> </html>

Why double media type? NN4 will not see bridging file and will therefore not crash!

Step 4 Import CSS into bridging file


HTML files Bridging CSS file

@import header.css; @import content.css; @import footer.css;

How do @imports work? This will imports all rules from one file into the other. @import cannot be read by older browsers.

Recap?

HTML files

Bridging CSS file

This concept is ideal for large sites.

header

nav Home bridge1 footer

home

header

nav Section 1 bridge2 footer

Section 1

header

nav Section 2 bridge3 footer

Section 2

Hack-free CSS

One of our biggest challenges is dealing with buggy browsers such as IE.

Many people solve the problem by using hacks.

The problem is that IE has improved its CSS support. Hacks may come back to bite!

So how do you solve the problem?

We ask that you please update your pages to not use these CSS hacks. If you want to target IE or bypass IE, you can use conditional comments.

How do conditional comments work?

Step 1: Create a new CSS file for IE rules only.

header

nav Home bridge1 footer

home

IE

Step 2: Add a conditional comment to the head of your HTML file.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <link href="css/import1.css" rel="stylesheet" <!--[if IE 5]><link rel="stylesheet" href="ie5.css" type="text/css" media="screen"><![endif]--> </head> <body> ... </body> </html>

Only the relevant version of IE will sees this new style sheet. All other browsers will ignore it completely.

header

nav Home bridge1 footer

home

IE

Normal browsers see:

header

nav Home bridge1 footer

home

IE

Relevant version of IE sees:

header

nav Home bridge1 footer

home

IE

For example, while most browsers add padding to the width of a container, IE5 will not. This these cases, IE5 will display a narrower container.

main.css (seen by all browsers including IE5)::

#container { width: 600px; padding: 100px; }

ie5.css (seen by IE5 only)::

#container { width: 800px; }

Why are conditional comments a good solution?

1. No hacks Specific CSS rules are simply rewritten in new style sheet.

2. Separate file Work-around CSS kept out of main CSS and can be turned off easily at a later date.

3. Targeted You can target specific versions of IEs

<!--[if <!--[if <!--[if <!--[if <!--[if <!--[if <!--[if

IE]> IE 5]> IE 6]> lt IE 6]> lte IE 6]> gt IE 6]> gte IE 6]>

efficient css maintainable css modular css hack-free css

Questions?

You might also like