1 / 27

CSS Best Practices

CSS Best Practices. By Peter Funk. Web development since 1996 Senior Front-end web developer at Ancestry.com Proficient at CSS, HTML, and native JavaScript Developed and maintain CSS3.me. Current CSS Files are:. Disorganized Unreadable Large in size Contain invalid code

ena
Download Presentation

CSS Best Practices

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS Best Practices By Peter Funk

  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

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

  4. Organization / Readability • Naming / Declaration • Shorthand • Avoidances • Tips / Tricks

  5. Organization / Readability • DOM Order • Grouped Order Organize styles /* 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 2pxrgba(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 • Alphabetical order Organize properties .button { background-color: #3A78AC; border: 1px solid #333; border-radius: 18px; box-shadow: 0 2px 2pxrgba(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 • Alphabetical order Order vender properties .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 • Single-line styles Make styles readable .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; }

  10. Organization / Readability • Single-line styles Use whitespace .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 • Organize styles • Organize properties • Order vender properties • Make styles readable • Use whitespace

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

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

  14. Naming / Declaration BAD: form.form {…} div.first, ul.first, li.first {…} div.contentDiv {…} .firstItemStyle_and_titleWithImageStyle {…} form#searchForm.formClass {…} html body div.myWidgetform.myForminput#myInput {…} .theOnlyElementToEverUseThisClass {…} #sideBarLink, #sideBarLink2, #sideBarLink3 {…} Use necessary selectors

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

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

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

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

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

  20. 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 @import 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. peterjfunk@gmail.com www.peterjfunk.com/CSS.pptx CSS3.me

More Related