Scribd
Upload
78 views90 pages

BarCampTampa2011 WriteBetterHTML PDF

This document summarizes best practices for writing CSS to make websites faster, more maintainable, accessible, and future-proof. It recommends: 1. Using less CSS by separating styles into global and section-specific files and reusing common styles. 2. Avoiding over-engineering CSS with unnecessary style guides by following conventions set in global styles and only creating unique styles when needed. 3. Leveraging pseudo-elements like ::before and ::after to add semantic content without using additional HTML elements, which improves efficiency and maintainability. Common uses include adding icons, counters, and tooltips.

Uploaded by

mailalamin
Copyright
© © All Rights Reserved
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
78 views90 pages

BarCampTampa2011 WriteBetterHTML PDF

This document summarizes best practices for writing CSS to make websites faster, more maintainable, accessible, and future-proof. It recommends: 1. Using less CSS by separating styles into global and section-specific files and reusing common styles. 2. Avoiding over-engineering CSS with unnecessary style guides by following conventions set in global styles and only creating unique styles when needed. 3. Leveraging pseudo-elements like ::before and ::after to add semantic content without using additional HTML elements, which improves efficiency and maintainability. Common uses include adding icons, counters, and tooltips.

Uploaded by

mailalamin
Copyright
© © All Rights Reserved
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/ 90

WRITE BETTER HTML BY

WRITING BETTER CSS


THE ROYAL WE
Chris Coyier @chriscoyier
BETTER?
1 Less of it // Speed
2 More Semantic // Maintainability
3 More Accessible // SEO
4 Futureproof // Happy People
123
1 HOW WUFOO
DOES CSS
“RULES”
• Only 2 CSS files per page (Global + Site Section)
• These 2 are made from combined smaller files
(like design patterns or site sub sections)
• Versioned in production (dynamic.13432.css)
Timestamped in development (dynamic.css?time=xxx)
• No inline styles or <style> blocks
• Reuse everything (e.g. table.css)
•Work in chunks (e.g. print.css)
SIMPLIFIED SITE STRUCTURE
GLOBAL CSS
GLOBAL CSS
SITE SECTION CSS
SITE SECTION CSS
<!DOCTYPE html>

<head>

{autoVersion}/css/global/dynamic.css{/autoVersion}
{autoVersion}/css/landing/dynamic.css{/autoVersion}

Smarty function (could be any server side language)


.htaccess
AddHandler application/x-httpd-php .php .html .xml .css .js
/css/global/dynamic.css
<?php
require_once($GLOBALS['root'].'/library/services/
AutoVersion.php');

$fileArray = array(
'/css/global/structure.css',
'/css/global/buttons.css',
'/css/global/lightbox.css',
'/css/global/form.css'
);

$av = new AutoVersion();


$av->fly($dynamicURL,$fileArray);
?>
/css/landing/dynamic.css
<?php
require_once($GLOBALS['root'].'/library/services/
AutoVersion.php');

$fileArray = array(
'/css/landing/structure.css',
'/css/landing/table.css',
'/css/landing/else.css',
'/css/landing/signup.css',
'/css/landing/tour.css'
);

$av = new AutoVersion();


$av->fly($dynamicURL,$fileArray);
?>
AutoVersion function
1) Fetches all files
2) Combines together
3) Minifies
4) Adds version number
<!DOCTYPE html>

<head>

<link rel="stylesheet" href="/css/global/dynamic.1234.css">


<link rel="stylesheet" href="/css/landing/dynamic.1234.css">
global/dynamic.css
• Loaded on every page of site
• Put as much as practical in here. User only loads
this file once, so maximizes use of browser cache.
• Common design patterns are in here
(buttons.css, lightbox.css, forms.css)
area/dynamic.css

• Loaded in specific area of site


• Less common design patterns in here
(graph.css, calendar.css, table.css)
global area
/css/global/structure.css /css/admin/manager.css
/css/global/buttons.css
/css/global/lightbox.css
/css/global/form.css
global area
/css/global/structure.css /css/widgets/datagrid.css
/css/global/buttons.css /css/global/filter.css
/css/global/lightbox.css /css/global/calendar.css
/css/global/form.css /css/global/quicksearch.css
/css/entries/structure.css
/css/entries/print.css
global area
/css/global/structure.css /css/docs/docs.css
/css/global/buttons.css /css/global/table.css
/css/global/lightbox.css
/css/global/form.css
ALL
CSS
is in /css/

organized by
site section
2 DON’T OVER
THINK IT
Good thinking Well intentioned
BIG FANCY STYLE GUIDE
• Primary color #BADA55 / Secondary color #F00
• Headers should be 20px from navigation and
15px from following content
• Logo should have 30px of padding around it
• Links should have 1px dotted bottom borders
that’s what
GLOBAL.CSS
is for
NEED TO DEVIATE?
Really? Do you?

BY
SECTION
NEED TO DEVIATE?
Really? Do you?

STYLE
ONLY
NEED TO DEVIATE?
Really? Do you?

TOTALLY
UNIQUE
DON’T
OVER
THINK
IT
3 PSEUDO
ELEMENTSpseudo class
:visited :hover :active :link
selectors
:first-child :last-child :nth-child() :nth-of-type()
:enabled :disabled :checked :indeterminate
:focus :target :root :lang()
http://css-tricks.com/pseudo-class-selectors/
:before
:after
HTML <div>In</div>

div:before {
content: "Robots ";
}
CSS

In
HTML <div>In</div>

div:before {
content: "Robots ";
}
CSS
div:after {
content: " Disguise";
}

Robots In Disguise
So what’s with
the different name?
Pseudo selectors select elements that
already exist (perhaps in different states).

Pseudo elements create new content that


doesn’t exist (yet).
::before
::after
::first-line ::first-letter
:before
:after
:first-line :first-letter
HTML <div>In</div>

div:before {
content: "Robots ";
CSS
}
div:after {
content: " Disguise";
}

Robots In Disguise
Resulting <div>
HTML In
(sorta) </div>
Robots
Resulting <div>
HTML In
(sorta) </div>
Disguise

Not “before/after the element”...


<div>
Resulting Robots
HTML In
(sorta) Disguise
</div>

It’s before/after the content inside.


<div>
Resulting <h1>Blah blah blah</h1>
HTML <p>More stuff</p>
(sorta) Nothing to see here.
</div>
<div>
Robots
Resulting <h1>Blah blah blah</h1>
HTML <p>More stuff</p>
(sorta) Nothing to see here.
Disguise
</div>
E LOT!
C AM

M E LOT!
CA
M E LOT!
CA

It’s only a model...


(Not really in DOM)
Not for “no content” elements

<img src=”robot.jpg” alt=”Robot”>


<input type=”email” name=”email” />
<br>

• Allows but shouldn’t • Checkboxes


• Styles as if was inside • Radio Buttons
<a class=”button” href=”http://wufoo.com/gallery/”>
HTML <img src=”/images/icon_gallery.png” alt=””>
Visit Our Form Gallery
</a>

.button {
/* Awesome gradients and stuff */
}
CSS
.button img {
/* Probably some margin and stuff */
}
alt=""
equals

That’s not important.


Screen readers don’t need to see that.
alt=""
equals

Then get that mothersucker


out of your HTML
<a class=”button button-gallery” href=”http://wufoo.com/gallery/”>
HTML Visit Our Form Gallery
</a>

.button {
/* Awesome gradients and stuff */
}
CSS
.button-gallery:before {
content: url(/https/www.scribd.com/images/icon_gallery.png);
}
x200
<a class=”button” href=”http://wufoo.com/gallery/”>
<img src=”/images/icon_gallery.png” alt=””>
Visit Our Form Gallery
</a>

200 extra lines of HTML


200 places you aren’t being semantic
200 places you need to change one-by-one
200 opportunities to be more efficient
<html style=”background: yellow;”>

That’s a website. It’s abstract. Deal with it.


CSS
html {
CSS background: red;
}
Efficiency!
<a class=”button button-gallery” href=”http://wufoo.com/gallery/”>
Visit Our Form Gallery
</a>
x200
.button-gallery:before {
content: url(/https/www.scribd.com/images/icon_gallery.png);
content: “”;
display: inline-block;
width: 16px;
height: 16px;
background-image: url(/https/www.scribd.com/images/sprite.png);
background-position: -32px -32px;
}
spritecow.com
spriteme.org
RABBLE RABBLE RABBLE!
HTML <h1></h1>
<h2></h2>

CSS h1:before {
content: “Wufoo”;
}
h2:before {
content: “Making forms easy + fast + fun”;
}
Bad for accessibility
Bad semantically
Bad for SEO
SCREEN READERS
NVDA doesn’t read

Jaws doesn’t read

Window Eyes doesn’t read

VoiceOver (OS X) does read

Testing (mostly) by Lucica Ibanescu


http://cssgallery.info/testing-the-accessibility-of-the-css-generated-content/
What can content be?
.thing:before {
content: ?
}
TEXT / STRING
content: “$”;
content: “\0022”;
IMAGE
content: url(i/icon-smile.png);
Behaves like an <img>

content: -webkit-linear-gradient(...);

Needs dimensions
ATTRIBUTE
content: attr(href);
content: attr(data-city);
On list items COUNTER
content: counter(li);
counter-increment: li;
counter-reset: li;
On list
NOTHING
content: “”;
HTML
content: “<h1>Nope</h1>”;
TEXT / STRING

<div class="price">30</div>
<div class="price" lang="cn">100</div>

[lang=‘cn’] .price:before,
.price[lang=‘cn’]:before {
content: ‘\00a5’;
}
COUNTER
ol {
counter-reset: li;
}
ol > li:before {
content: counter(li);
counter-increment: li;
}

http://www.456bereastreet.com/lab/styling-ordered-list-numbers/
ATTRIBUTE
<a href=”#” data-tooltip=”is hot.”>
Your mom
</a>

a[data-tooltip] {
position: relative;
}
a[data-tooltip]:after {
content: attr(data-tooltip);
position: absolute;
/* Fancy styles */
opacity: 0;
}
a[data-tooltip]:hover:after {
opacity: 1;
}
COMBINING WITH MEDIA QUERIES
mobile portrait

mobile landscape

tablet

small monitor

large monitor

http://css-tricks.com/css-media-queries/
You can’t talk about Pseudo Elements
without talking about...

Nicolas
“Dr. Pseudo Element”
Gallagher
http://nicolasgallagher.com/

@necolas
Shapes!
e a re e asy.
Thes

re le ss e a sy.
These a
.star {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
.star:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
http://css-tricks.com/examples/ShapesOfCSS/
http://nicolasgallagher.com/pure-css-gui-icons/demo/
Remember, CSS TWO not THREE

Browser Support
CSS-Tricks
97% 85% Other tech
92%
3.5+
1+
3.0- positioning issues

9+
8 :: / :hover / z-index 1.3+ 6+
7-

http://css-tricks.com/browser-support-pseudo-elements/
MORE
http://css-tricks.com/9516-pseudo-element-roundup/
Links
http://necolas.github.com/normalize.css/
http://snook.ca/archives/html_and_css/font-size-with-rem
http://particletree.com/notebook/automatically-version-your-css-and-javascript-files/
http://css-tricks.com/855-specifics-on-css-specificity/

Photos
http://www.flickr.com/photos/webel/347801397/

Type
Gotham Condensed
Gotham Rounded
TUNGSTEN
Whitney
Thanks!
http://bit.ly/???

You might also like