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 / ReadabilityOrganize 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 / ReadabilityOrganize 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 / ReadabilityOrganize 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 / ReadabilityOrder 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 / ReadabilityMake 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 / ReadabilityUse 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 stylesOrganize propertiesOrder vender propertiesMake styles readableUse whitespace

13

Naming / DeclarationUse semantic naming

BAD:.sB {…}.button3 {…}.topLeftButton {…}.greenButton {…}

GOOD:.searchButton {…}

14

Naming / DeclarationUse a naming convention

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

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

• Camel Casing, Hyphens, or Underscores

15

Naming / DeclarationUse necessary selectors

BAD: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 / DeclarationUse 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 namingUse a naming conventionUse necessary selectorsUse a wrapping selector for

components

18

ShorthandUse 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

ShorthandUse 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

ShorthandRemove 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 availableUse if all properties declaredKnow property defaultsRemove units on zero valuesRemove leading/trailing zeros

22

Avoidances

Avoid the use of !importantAvoid browser hacksAvoid the * selectorAvoid too many selectorsAvoid inline stylesAvoid multiple element selectors

23

Avoidances

Avoid inappropriate propertiesAvoid empty rulesAvoid duplicate propertiesAvoid @importAvoid too many web fontsAvoid complex attribute selectors

24

Tips

Use commentsKnow the box modelCSS3 only for presentational

purposesUnderstand SpecificityUse a CSS formatting toolUse a CSS compressor

25

Tips

Show upgrade links for old browsersDeclare background images onceLearn about all CSS properties and

valuesKnow how to use z-indexUse word-wrap: break-wordUse 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