CSS Best Practices By Peter Funk 1

Web development since 1996 Senior Front-end web developer at Ancestry.com Proficient at CSS, HTML, and native JavaScript Developed and maintain CSS3.me 2

3

Current CSS Files are: Disorganized Unreadable Large in size Contain invalid code Virtually unmaintainable 4 "Any developer who claims he never writes bad code is either lying, ignorant or living in a fantasy world." - Davy Brion

Organization / Readability Naming / Declaration Shorthand Avoidances Tips / Tricks 5

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; } 6

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; } 7

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; } 8

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')"; } 9

Organization / Readability Make styles readable Single-line styles.content { float:left; padding:10px; width:590px; }.widget { color:red; height:40px; margin-top:30px; } 10 Multi-line styles.content { float: left; padding: 10px; width: 590px; }.widget { color: red; height: 40px; margin-top: 30px; }

Organization / Readability Use whitespace Single-line styles.content█{█float:left;█padding:10px;█width:590px;█}.widget█{█color:red;█height:40px;█margin-top:30px;█} 11 Multi-line styles.content█{ float:█left; padding:█10px; width:█590px; }.widget█{ color:█red; height:█40px; margin-top:█30px; }

Organization / Readability Organize styles Organize properties Order vender properties Make styles readable Use whitespace 12

Naming / Declaration Use semantic naming BAD:.sB {…}.button3 {…}.topLeftButton {…}.greenButton {…} GOOD:.searchButton {…} 13

Naming / Declaration Use a naming convention BAD:.sEaRcHbUtToN {…}.searchbutton {…} GOOD:.searchButton {…}.search-button {…}.search_button {…} 14 Camel Casing, Hyphens, or Underscores

Naming / Declaration Use 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 {…} 15

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 {…} 16

Naming / Declaration Use semantic naming Use a naming convention Use necessary selectors Use a wrapping selector for components 17

Shorthand Use shorthand notation when available margin: 1px 1px 1px 1px;=margin: 1px; margin: 1px 2px 1px 2px;=margin: 1px 2px; margin: 1px 2px 3px 2px;=margin: 1px 2px 3px; 18 Background Border Font with Line-Height List Margin Outline Padding CSS3 properties (most)

Shorthand Use shorthand if all properties declared font-family: Arial, Helvetica, serif; font-size: 13px; font-weight: 700; line-height: 120%; = font:700 13px/120% Arial, Helvetica, serif; 19 BAD: background: url(someImg.jpg); color: #fff; GOOD: background: #000 url(someImg.jpg); color: #fff; Know property defaults

Shorthand Remove units on zero values padding: 0px; = padding: 0em; = padding: 0; 20 box-shadow: 05px 8.0px = box-shadow: 5px 8px; Remove leading/trailing zeros

Shorthand Use when available Use if all properties declared Know property defaults Remove units on zero values Remove leading/trailing zeros 21

Avoidances Avoid the use of !important Avoid browser hacks Avoid the * selector Avoid too many selectors Avoid inline styles Avoid multiple element selectors 22

Avoidances Avoid inappropriate properties Avoid empty rules Avoid duplicate properties Avoid too many web fonts Avoid complex attribute selectors 23

Tips Use comments Know the box model CSS3 only for presentational purposes Understand Specificity Use a CSS formatting tool Use a CSS compressor 24

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 25

Organize / Make Readable Name / Declare Well Use Shorthand Avoid bad code Know / Use properties 26

CSS3.me 27