1

CSS Best PracticesBy Peter Funk

2

Web development since 1996

Senior Front-end web developerat Ancestry.com

Proficient at CSS, HTML, and native JavaScript

Developed and maintain CSS3.me

3

4

Current CSS Files are:

DisorganizedUnreadableLarge in sizeContain invalid codeVirtually unmaintainable

"Any developer who claims he never writes bad code is either lying, ignorant or living in a fantasy world." - Davy Brion

5

Organization /

Readability

Naming / Declaration

Shorthand

Avoidances

Tips / Tricks

6

Organization / Readability

Organize styles• DOM Order

• Grouped Order

/* Header */.header { property:value; }.header .menu { property:value; }/* Content */.content { property:value; }.content .widget { property:value; }/* Footer */.footer { property:value; }.footer .links { property:value; }

/* Containers */.header { property:value; }.content { property:value; }.footer { property:value; }/* Navigation */.header .menu { property:value; }.footer .links { property:value; }/* Widgets */.content .widget { property:value; }

7

Organization / Readability

Organize properties

.button {width: 227px;height: 35px;line-height: 35px;background-color: #3A78AC;border: 1px solid #333;border-radius: 18px;text-decoration: none;box-shadow: 0 2px 2px rgba(0, 0, 0, .3);color: #fff;text-shadow: 0 -1px rgba(0, 0, 0, .5);top: 9px;left: 9px;display: block;position: absolute;font-size: 15px;font-weight: 700;line-height: 15px;text-transform: uppercase;

}

8

Organization / Readability

Organize properties• Alphabetical order.button {

background-color: #3A78AC;border: 1px solid #333;border-radius: 18px;box-shadow: 0 2px 2px rgba(0, 0, 0, .3);color: #fff;display: block;font-size: 15px;font-weight: 700;height: 35px;left: 9px;line-height: 35px;position: absolute;text-align: center;text-decoration: none;text-shadow: 0 -1px rgba(0, 0, 0, .5);text-transform: uppercase;top: 9px;width: 227px;

}

9

Organization / Readability

Order vender properties• Alphabetical order.widgetHeaderBackground {

background-color: #3A78AC;background-image: -moz-linear-gradient(top,

#62A0D4, #4785B9 55%, #2D6B9F 55%, #19578A);background-image: -ms-linear-gradient(top,

#62A0D4, #4785B9 55%, #2D6B9F 55%, #19578A);background-image: -o-linear-gradient(top,

#62A0D4, #4785B9 55%, #2D6B9F 55%, #19578A);background-image: -webkit-linear-gradient(top,

#62A0D4, #4785B9 55%, #2D6B9F 55%, #19578A);background-image: linear-gradient(top, #62A0D4,

#4785B9 55%, #2D6B9F 55%, #19578A);filter: progid:

DXImageTransform.Microsoft.gradient(startColorstr = '#62A0D4', endColorstr = '#19578A');

-ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorstr = '#62A0D4', endColorstr = '#19578A')";}

10

Organization / Readability

Make styles readable• Single-line styles

.content { float:left; padding:10px; width:590px; }

.widget { color:red; height:40px; margin-top:30px; }

• Multi-line styles

.content {float: left;padding: 10px;width: 590px;

}.widget {

color: red; height: 40px;

margin-top: 30px;}

11

Organization / Readability

Use whitespace• Single-line styles

.content█{█float:left;█padding:10px;█width:590px;█}

.widget█{█color:red;█height:40px;█margin-top:30px;█}

• Multi-line styles

.content█{float:█left;padding:█10px;width:█590px;

}.widget█{

color:█red;height:█40px;margin-top:█30px;

}

12

Organization / Readability

Organize styles

Organize properties

Order vender properties

Make styles readable

Use whitespace

13

Naming / Declaration

Use semantic namingBAD:.sB {…}.button3 {…}.topLeftButton {…}.greenButton {…}

GOOD:.searchButton {…}

14

Naming / Declaration

Use a naming convention

BAD:.sEaRcHbUtToN {…}.searchbutton {…}

GOOD:.searchButton {…}.search-button {…}.search_button {…}

• Camel Casing, Hyphens, or Underscores

15

Naming / Declaration

Use necessary selectorsBAD:form.form {…}

div.first, ul.first, li.first {…}

div.contentDiv {…}

.firstItemStyle_and_titleWithImageStyle {…}

form#searchForm.formClass {…}

html body div.myWidget form.myForm input#myInput {…}

.theOnlyElementToEverUseThisClass {…}

#sideBarLink, #sideBarLink2, #sideBarLink3 {…}

16

Naming / Declaration

Use a wrapping selector for components#myWidget .header {…}#myWidget .header p {…}#myWidget .content {…}#myWidget .content p {…}#myWidget form {…}#myWidget input {…}#myWidget .searchButton {…}#myWidget .content a {…}#myWidget .footer {…}#myWidget .footer a {…}

17

Naming / Declaration

Use semantic naming

Use a naming convention

Use necessary selectors

Use a wrapping selector for

components

18

Shorthand

Use shorthand notation when availablemargin: 1px 1px 1px 1px; = margin: 1px;

margin: 1px 2px 1px 2px; = margin: 1px 2px;margin: 1px 2px 3px 2px; = margin: 1px 2px 3px;

BackgroundBorderFont with Line-HeightListMarginOutlinePaddingCSS3 properties (most)

19

Shorthand

Use shorthand if all properties declaredfont-family: Arial, Helvetica, serif;

font-size: 13px;font-weight: 700;line-height: 120%;=font:700 13px/120% Arial, Helvetica, serif;

BAD:background: url(someImg.jpg);color: #fff;

GOOD:background: #000 url(someImg.jpg);color: #fff;

Know property defaults

20

Shorthand

Remove units on zero valuespadding: 0px; = padding: 0em; = padding: 0;

box-shadow: 05px 8.0px = box-shadow: 5px 8px;

Remove leading/trailing zeros

21

Shorthand

Use when available

Use if all properties declared

Know property defaults

Remove units on zero values

Remove leading/trailing zeros

22

Avoidances

Avoid the use of !important

Avoid browser hacks

Avoid the * selector

Avoid too many selectors

Avoid inline styles

Avoid multiple element selectors

23

Avoidances

Avoid inappropriate properties

Avoid empty rules

Avoid duplicate properties

Avoid @import

Avoid too many web fonts

Avoid complex attribute selectors

24

Tips

Use comments

Know the box model

CSS3 only for presentational

purposes

Understand Specificity

Use a CSS formatting tool

Use a CSS compressor

25

Tips

Show upgrade links for old browsers

Declare background images once

Learn about all CSS properties and

values

Know how to use z-index

Use word-wrap: break-word

Use text-overflow: ellipsis

26

Organize / Make

Readable

Name / Declare Well

Use Shorthand

Avoid bad code

Know / Use

properties

27

peterjfunk@gmail.com

www.peterjfunk.com/CSS.pptx

CSS3.me