1. CSS Best Practices By Peter Funk 1

2. 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. 3

4. 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

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

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

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

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

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

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

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

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

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

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

15. 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

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

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

18. 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)

19. 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

20. 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

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

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

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

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

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 25

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

27. peterjfunk@gmail.com www.peterjfunk.com/CSS.pptx CSS3.me 27