Post on 23-Feb-2016
description
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