1 Web development since 1996 Senior Frontend web developer at Ancestrycom Proficient at CSS HTML and native JavaScript Developed and maintain CSS3me 2 3 Current CSS Files are Disorganized ID: 782043
Download The PPT/PDF document "CSS Best Practices By Peter Funk" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
CSS Best Practices
By Peter Funk
1
Slide2Web development since 1996
Senior Front-end web developer
at Ancestry.com
Proficient at CSS, HTML, and native JavaScriptDeveloped and maintain CSS3.me
2
Slide33
Slide4Current CSS Files are:
DisorganizedUnreadable
Large in size
Contain invalid codeVirtually unmaintainable
4
"Any developer who claims he never writes bad code is either lying, ignorant or living in a fantasy world." - Davy
Brion
Slide5Organization / Readability
Naming / Declaration
Shorthand
Avoidances Tips / Tricks
5
Slide6Organization / 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
Slide7Organization / 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
Slide8Organization / 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
Slide9Organization / 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
Slide10Organization / 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;}
Slide11Organization / 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;
}
Slide12Organization / Readability
Organize styles
Organize properties
Order vender properties
Make styles readable
Use whitespace
12
Slide13Naming / Declaration
Use semantic naming
BAD:
.
sB
{…}
.button3 {…}
.
topLeftButton
{…}
.
greenButton
{…}
GOOD:
.
searchButton
{…}
13
Slide14Naming / Declaration
Use a naming convention
BAD:
.
sEaRcHbUtToN
{…}
.
searchbutton
{…}
GOOD:
.
searchButton
{…}
.search-button {…}
.
search_button
{…}
14
Camel Casing, Hyphens, or Underscores
Slide15Naming / 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
Slide16Naming / 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
Slide17Naming / Declaration
Use semantic naming
Use a naming convention
Use necessary selectors
Use a wrapping selector for components
17
Slide18Shorthand
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)
Slide19Shorthand
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
Slide20Shorthand
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
Slide21Shorthand
Use when available
Use if all properties declared
Know property defaults
Remove units on zero values
Remove leading/trailing zeros
21
Slide22Avoidances
Avoid the use of !important
Avoid browser hacks
Avoid the * selector
Avoid too many selectors
Avoid inline styles
Avoid multiple element selectors
22
Slide23Avoidances
Avoid inappropriate properties
Avoid empty rules
Avoid duplicate properties
Avoid @import
Avoid too many web fonts
Avoid complex attribute selectors
23
Slide24Tips
Use comments
Know the box model
CSS3 only for presentational purposes
Understand Specificity
Use a CSS formatting tool
Use a CSS compressor
24
Slide25Tips
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
Slide26Organize / Make Readable
Name / Declare Well
Use Shorthand
Avoid bad code Know / Use properties
26
Slide27peterjfunk@gmail.com
www.peterjfunk.com/CSS.pptx
CSS3.me
27