Best Practices: Markup & CSS

Best Practices: Markup & CSS
Engineering Boot Camp Best Practices: Markup & CSS Nate Koechley Platform Engineering

Getting Started Have Firefox? http://getfirefox.com
Have Firebug? Have Web Developer Toolbar? Have Y!Slow? The Yahoo! WebDev/F2E Twiki The Yahoo! User Interface (YUI) Library Yahoo! Bug Reporter (for Firefox)

Team Communication http://ue.corp.yahoo.com/natek/classes
Subscribe to Please join the community on YUI Platform: Me personally:

Be a trendsetter for quality and professionalism.

Do what is standard; then do what is common; then do what works.
Making Decisions Do what is standard; then do what is common; then do what works. In that order.

First Exercise: Finding Errors

Markup Best Practices

Best Practice: Author HTML first
Best Practice: Author HTML first. Don’t worry about presentation, just express the data the best you can while creating a smart DOM foundation.

Write Strict HTML 4. 01 http://twiki. corp. yahoo
What is a doctype? Don’t make the browser guess Declare your intentions Which doctype to use? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " Why? Standards vs Quirks rendering mode Use XHTML syntax and HTML semantics.

Basics Always lowercase Always double quotes Always well formed

Be Honest Markup describes content. Add meaning and structure.
Choose elements with meaning (H1, P, CITE), instead of those without (DIV, SPAN) Add meaning and structure. Forget about looks. Call it what it is.

Markup Quiz

Which of the following is more semantically correct?
<span class="title">This is a Title</span> B: <h1>This is a Title</h1> C: <p><b>This is a Title</b></p>

Basic Unordered List A: B: C: D: Snickers<br />
Mounds<br /> Almond Joy<br /> Butterfinger<br /> B: <li>Snickers <li>Mounds <li>Almond Joy <li>Butterfinger C: <li>Snickers</li> <li>Mounds</li> <li>Almond Joy</li> <li>Butterfinger</li> D: <ul> </ul>

Which of the following is more semantically correct?
<hn>A List of Stuff</hn> <ul> <li>Robots</li> <li>Monkeys</li> <li>Vikings</li> <li>KitKats</li> </ul> B: <dl> <dt>A List of Stuff</dt> <dd>Robots</dd> <dd>Monkeys</dd> <dd>Vikings</dd> <dd>KitKats</dd> </dl>

Which is better? A: <div id="footer">
Copyright 2003 Charles DeMar | This text is arbitratry. </div> B: <div id="footer"> <p>Copyright 2003 Charles DeMar | This text is arbitratry.</p>

Which is better? A: <form> B: <form> C: <form>
<p><label for="name">Name:</label> <input type="text" id="name" /></p> </form> B: <form> <div> <label for="name">Name:</label> <input type="text" id="name" /> </div> C: <form> <label for="name">Name:</label> <input type="text" id="name" /><br /><br />

Which is most correct? Why?
A: <a href=" <strong>The Greatest Web Site Ever</strong></a> B: <strong><a href=" Greatest Web Site Ever</a></strong> C: <a href=" class="strong">The Greatest Web Site Ever</a>

Which is best? A: <p>My upcoming book, <em>SimpleQuiz: Get Down With Markup</em>, will be a bestseller.</p> B: <p>My upcoming book, <i>SimpleQuiz: Get Down With Markup</i>, will be a bestseller.</p> C: <p>My upcoming book, <cite>SimpleQuiz: Get Down With Markup</cite>, will be a bestseller.</p>

Which is best? A: <ul> B: <ul>
<li>Paragraph 1<br /><br /> Paragraph 2</li> </ul> B: <ul> <li>Paragraph 1 <p>Paragraph 2</p></li> C: <ul> <li> <p>Paragraph 1</p> <p>Paragraph 2</p> </li>

Avoiding Divitis & Classitis

Avoid Divitis & Classitis
Don’t misuse or overuse the DIV element Use more meaningful elements instead Avoid using DIVs and SPANs only for their css hooks Use descendent selectors instead <div id="news"> <div class="headline"> News item 1 </div> <div class="newsstory"> story here </div> <div class="headline"> News item 2 </div> <div class="newsstory"> story here </div> </div>

Avoid Divitis & Classitis
DIVs define structure and regions. Markup makes better CSS hooks and patterns <div id="news"> <h2>News item 1</h2> <p> story here </p> <h2>News item 2</h2> <p> story here </p> </div>

Classitis <ul> <li><a class=“link”>foo</a></li> </ul> Best practice: IDs and Classes must make sense and add value when viewing source.

Classes and IDs are HTML
Classes extend the meaning of HTML “Semantic Classes” or “element subclasses” <ul class=“nav”> <li>NFL</li> <li>MLB</li> <li>NBA</li> </ul>

Classes and IDs are HTML
IDs are 3D: HTML: foo.html#news CSS: #news {color:red;} JS: document.getElementByID(“news”)

Be Generous. Have Empathy.
Use the full menu of HTML. Take the time to do it right. Can be explicit Can be permanent Markup is where humans and computers touch… take the time to be thorough. Have stubborn empathy for our users.

Use These Tags http://twiki.corp.yahoo.com/view/Devel/UseTheseTags
a abbr acronym address area base blockquote br button caption cite code col colgroup dd del dfn div dl dt em form h1, h2, ... h6 iframe img input ins kbd label legend li link map meta noscript object ol optgroup option p param pre q samp script select span strong style sub sup table td textarea th thead tr tt ul var

Example: Better Tables

Better Tables (for tabular data)
Data is tabular when the contents of a cell are related to two or more headers.

Use thead, tfoot & tbody <table> <thead>
<tr></tr> </thead> <tfoot> </tfoot> <tbody> </tbody> </table>

Use caption & summary <table summary=“This table has per-page visits and views data for the month and for the year-to-date.”> <caption>page stats by month and year</caption>

Use scope in headers <th scope=“col” abbr=“month”>This Month</th> <th scope=“row”>home.html</th>

Match TD’s headers to TH’s ids
<tr> <th scope="col">Page</th> <th scope="col" id=“visits”>Visits</th> </tr> <th scope="row" id=“pg-home">home.htm<th> <td headers=“visits pg-home">20</td>

Better Complex Tables See it all in action at

Better Forms Use label Use fieldset Use optgroup
Lots of cool stuff in HTML… did you know the INS element takes a datetime attribute?

Exercise: Using YUI Reset & Fonts

Exercise 1: CSS Reset and CSS Fonts
16 pixels (in %) Verdana, 11px (in %), grey (#666). 20px after. bold italic 1em margin between paragraphs You’ll need to modify the display property of some elements.

Standard Module Format

A bit of extra markup, but offers consistency and extensibility:
Standard Module Format: A bit of extra markup, but offers consistency and extensibility: <div class=“mod” id=“yourID”> <div class=“hd”></div> <div class=“bd”></div> <div class=“ft”></div> </div>

Standard Module Format: http://twiki. corp. yahoo
Keep cruft outside of content areas <div class=“mod” id=“yourID”> <div class=“other stuff here”></div> <div class=“content”> <div class=“hd”></div> <div class=“bd”></div> <div class=“ft”></div> </div>

The “Off the Wires” Module

Off the Wires Soccer-England's Wilkin... World Cup effect hits... Donadoni named Italy nat... Donadoni takes Ital... FACTBOX-Soccer-Italy's... » More Off the Wires

<h3>Off the Wires</h3>
<ul> <li>Soccer-England's Wilkin...</li> <li>World Cup effect hits...</li> <li>Donadoni named Italy nat...</li> <li>Donadoni takes Ital...</li> <li>FACTBOX-Soccer-Italy's...</li> <a href=“url”>» More Off the Wires</a>

<div class=“mod”>
<h3>Off the Wires</h3> <ul> <li>Soccer-England's Wilkin...</l1> <li>World Cup effect hits...</li> <li>Donadoni named Italy nat...</li> <li>Donadoni takes Ital...</li> <li>FACTBOX-Soccer-Italy's...</li> <a href=“url”>» More Off the Wires</a> </div>

<div class=“mod”>
<div class=“hd”> <h3>Off the Wires</h3> </div> <div class=“bd”> <ul> <li>Soccer-England's Wilkin...</l1> <li>World Cup effect hits...</li> <li>Donadoni named Italy nat...</li> <li>Donadoni takes Ital...</li> <li>FACTBOX-Soccer-Italy's...</li> <div class=“ft”> <p><a href=“url”>» More Off the Wires</a></p>

Exercise: Making Bullet Lists

Adding Bullets to Lists
Reset.css removes default bullets & padding List Item List Item List Item

Reset.css removes default bullets & padding Use padding to create space for the bullet List Item List Item List Item

Reset.css removes default bullets & padding Use padding to create space for the bullet Use CSS background image for bullet List Item List Item List Item

Reset.css removes default bullets & padding Use padding to create space for the bullet Use CSS background image for bullet Position the background image bullet List Item List Item List Item

CSS Sprites

CSS Sprites http://www.alistapart.com/articles/sprites
List Item List Item List Item

CSS Sprites Use Background Positioning to align the appropriate image
List Item

CSS Sprites Use Background Positioning to align the appropriate image
Move down the sprite by negatively positioning the top of the background image. List Item List Item List Item

Exercise: Using Standard Module Format
Techniques: Use: Use Standard Module Format (SMF) What happens to spacing when text is zoomed? Ref:

CSS is accretive. Rule #1 Computed Style Rule #2

Two primary layering models
The Cascade model: Rules are sorted according to weight and origin. The Inheritance model: Some properties are passed to descendent nodes, some of which can accept them.

The Cascade Rule #1 Computed Style Rule #2

Inheritance Parent node Child node Grandchild Rule #1

Tip: LoVe/HAte Links Always follow that pattern, LoVe/HAte
a:link {text-decoration:none;} a:visited {red} a:hover {text-decoration:underline;} a:active {}

Floats need Width Always give floated elements width.

Do NOT use the Underscore Hack
The underscore hack does NOT target IE in IE7 (the parsing bug has been fixed) selector {_property:value;} Use the *hack if NECESSARY: selector {*property:value;} <style> #leaf {width:100px;*width:110px;} </style>

Approved hacks/filters
selector { width:100px; *width:150px; /* ie6 & ie7 */ _width:175px; /* ie6 */ } Also: {zoom:1;} /* hasLayout in IE*/ selector:after /*clearfix !IE*/

Do NOT use CSS expressions
IE’s CSS expressions are tempting, but broken. Problem: recalculated after every JS thread.

Reference CSS with <link>
rel="stylesheet" type="text/css" href=“ Don’t or <style>

Shorthand Values #weather { padding-top:12px; padding-right:3px;
padding-bottom:6px; padding-left:9px; } Shorthand is “clockwise”: padding:12px 3px 6px 9px;

Exercises: YUI Grids

<div id=“doc”> 750px, centered </div>

<div id=“doc2”> 950px, centered </div>

<div id=“doc4”> 974px, centered </div>

<div id=“hd”>header</div>
<div id=“bd”>body</div> <div id=“ft”>footer</div>

<div class=“yui-b”> <div class=“yui-b”>

<div id=“doc” class=“yui-t5”
div.yui-b <div id=“yui-main”> <div class=“yui-b”/> </div> </div>

<div id=“doc” class=“yui-t2”
div.yui-b <div id=“yui-main”> <div class=“yui-b”/> </div> </div>

<div class=“yui-g”>
<div class=“yui-u first”/> <div class=“yui-u”/> </div>

<div class=“yui-gb”>

<div class=“yui-gf”>

<div class=“yui-g”>
<div class=“yui-gb”> <div class=“yui-gf”>

Exercise: Building a Grid
Start here: Goal: 950px centered page Nav column, 300px wide, right side Weighted two-column grid: 75% and 25% Even three-column grid stacked below Techniques: Set the page width via root DIV node ID Experiment with other page widths Choose template preset width via root DIV node class Notice the source-order independence at the template level. Choose the correct “nesting grids”

Exercise, Grids part 2 Set page width to 825px (in EM)
Set narrow block to 225px .yui-t1 .yui-b {float:left;width: em;*width: em;} .yui-t1 #yui-main .yui-b{margin-left: em;*margin-left: em;}

Better CSS Exercise: Clearing Floats
Exercise: Negative Margins (7-10 split) Exercise: Staying Right Exercise: Building Yahoo! News

Exercise: Clearing Floats

Clearing Floats Lorem ipsum dolor sit amet, consec te tuer adipiscing elit lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Clearing Floats float:left; Lorem ipsum dolor sit amet, consec te tuer adipiscing elit lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Clearing Floats Lorem ipsum dolor sit amet, consec te tuer

Clearing Floats <style> .clear {clear:both;} </style>
<div class=“clear”></div>

Clearing Floats Lorem ipsum dolor sit amet, consec te tuer

Markup, or generated content
Clearing Floats Lorem ipsum dolor sit amet, consec te tuer Markup, or generated content

Self Clearing Floats Technique
Technique for IE: selector {zoom:1;} /*triggers hasLayout*/ Technique for others: selector:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } On having “layout”

Exercise: Clearing Floats
Start Here: Techniques: Use “Self Clearing” Techniques selector {zoom:1;} /*triggers hasLayout*/ selector:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}

7-10 Split w/ Negative Margins
Exercise: 7-10 Split w/ Negative Margins

7-10 Split with Negative Margins
Box 1

Box 1 float:left; margin-right:320px; < px >

Box 1’s 320px of right margin Box 1 Box 2

Box 1 float:left; margin-right:320px; Box 2 float:right; margin-left:-300px;

Exercise: 7-10 Split with Negative Margins
Start Here: Techniques: Float apart Create space for left box with margins on right box. Negative margins on left box allow it to slide up. Difference between margin width = gutter size

Accessible Hidden Text

<h2>Folders</h2>
Skip to content <h2>See your full list of folders</h2> Good, but overly verbose for sighted users. <h2><span class=“accessible”>See your full list of </span>folders</h2> <style> .accessible {text-indent:-1300px;overflow:hidden;} .accessible {position:absolute; top-1300px;left:-1300px;} </style> Good for everybody!

Sidestep Box Model Issues Altogether

Let width be natural Don’t add margin/padding/border to widths.

.mod { width:200px; border:1px; padding:1em; } <div class=“mod”> Lorem ipsom </div>

.mod { width:200px; } .bd { border:1px; padding:1em; <div class=“mod” <div class=“content”> Lorem ipsom </div>

Exercise: Building Yahoo! News

Building Yahoo! News

exercise_news-start.html exercise_news-resources.html

6 CSS Debugging Tips Keep it simple (and valid).
Always assume it’s your fault – read the W3C Specs. Prevention is better than cure Isolate the problem. Use hacks only as a last resort. Really. Debug with !important, but not allowed in production.

Thanks! (and please send feedback to natek@ or miraglia@)
Slides: Community: Me: Mail: Y!IM: Mobile:

CSS Notes

Available Microformats
hCalendar hCard rel-license rel-nofollow rel-tag VoteLinks XFN XMDP XOXO adr geo hAtom hResume hReview rel-directory rel-enclosure rel-home rel-payment Robots Exclusion xFolk

Various Generators hCard http://microformats.org/code/hcard/creator
hReview hCalendar

<div id="hcard-Nate-E-Koechley" class="vcard">
<a class="url fn n" href=" <span class="given-name">Nate</span> <span class="additional-name">E</span> <span class="family-name">Koechley</span> </a> <div class="org">Yahoo! Inc.</div> <a class=" " <div class="adr"> <span class="locality">San Francisco</span>, <span class="region">CA</span>, <span class="postal-code">94110</span> <span class="country-name">USA</span> </div> <div class="tel"> </div>

Best Practices: Markup & CSS

Similar presentations

Presentation on theme: "Best Practices: Markup & CSS"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Best Practices: Markup & CSS

Similar presentations

Presentation on theme: "Best Practices: Markup & CSS"— Presentation transcript:

Similar presentations

About project

Feedback