whatswhat:

selector{property:value}

GENRALRULES
inselectornameuseasseparator
excorrect:#nameoftheselector
ex.incorrect:#name_of_the_selector,#nameOfTheSelector

avoidoverqualification,like:
div#contactform

useeasilyunderstandablewordforselectors
ex.correct:#leftblock,.websitemessagecontainer
ex.incorrect:#lb1,.wmc1

noinlinestyles!
leaveinlinestylesinyourcodeonlyincaseoftheelementhastobestyledwithavalue
thatitscomingfromawysiwygareaorifitwasspecificallyaskedbyabackenddeveloper

templates
allhtmltemplateshouldgoina_htmlnamefolder
dontcreateindexorhomehtml/phpfilesoaccessingthe_htmlfolder,thelistof
templateswillbelistedinthebrowser
addnumbertemplatenamenamestothehtml/phpfiles
excorrect:01homepage.php
ex.incorrect:homepage.php

images
usejpginsteadofpngifitspossible
doublechecktheimagefilesize

libraries
thefilesusedinlibrariesshouldhaveaseparatefolder,forbothcssandjs
ex.correct:css/libs/bootstrap.css
ex.incorrect:css/bootstrap.css
ex.correct:scripts/libs/bootstrap.min.js
ex.incorrect:scripts/bootstrap.min.js
alltheothercustomfileswillbeintherootofthefolder:
ex.correct:css/style.css
ex.incorrect:css/libs/style.css
ex.correct:js/scripts.js
ex.incorrect:js/libs/scripts.js
STRUCTURE

Correct:
#selector1,
#selector2,
#selector3{
background:#fff
color:#000
}

Incorrect:
#selector1,#selector2,#selector3{
background:#fff
color:#000
}

#selector1{background:#fffcolor:#000}

Putspacesbefore{inruledeclarations.
Alwaysprovidefallbackpropertiesforolderbrowsers.
Useonelineperpropertydeclaration.

PROPERTIES
Propertiesshouldbefollowedbyacolonandaspace
ex.correct:
.block{
display:inlineblock
minheight:100px
}
ex.incorrect:
.block{
display:inlineblock
minheight:100px
}

colors
usehexcolorsinsteadofRGB
ex.correct:
.block{
background:#ffffff
}
ex.incorrect
.block{
background:rgba(255,255,255,0)
}

ifneededyoucanusergba()withopacity,butfirstcheckthebrowserrequirementslistofthe
projectyouareworkingon

use6digitHEXcolorsinsteadof3
ex.correct:
.block{
background:#ffffff
}
ex.incorrect:
.block{
background:#fff
}

useshorthands
ex.recommended:
.block{
margin:10px20px
}
insteadof
.block{
margin:10px20px10px20px
}
or
.block{
margintop:10px
marginright:20px
marginbottom:10px
marginleft:20px
}

usevendorprefixes:
ex.correct
.box{
webkitboxshadow:inset001px1px#eee
mozboxshadow:inset001px1px#eee
boxshadow:inset001px1px#eee
}
insteadof
ex.incorrect:
.box{
boxshadow:inset001px1px#eee
}

VALUES
alwaysendinsemicolon
lineheightshouldbevaluelessor.em
avoidunnecessarypxto0values
ex.correct:
.block{
margin:0
}
ex.incorect
.block{
margin:0px
}
usefallbackforfonts
ex.correct:
.block{
fontfamily:CustomGoogleFont,Arial,sansserif
}
ex.incorect
.block{
fontfamily:CustomGooogleFont
}

COMMENTS
Commentsshouldbeusedliberallytoexplainanythingthatmaybeunclearatfirstglance,
especiallyIEworkaroundsorhacks.
.ie7.searchform{
/*
ForcetheitemtohavelayoutinIE7bysettingdisplaytoblock.
*/
display:inlineblock
}

TEMPLATING/THEMINGWORKFLOW
BEFOREyoustart
1.checkthedesignsandseeyouhaveeverythingyouneedtoworkbeforeyoustart
2.Clarifyeveryaspectofthedesignandfrontendfunctionalityyouneedtoimplementbeforeyou
start(editabletextzones,images,etc)
3.Fonts:seeiftherearecommercial/customfontsusedinthedesign.Askforthefontifyou
donthavethem
4.Checkthebrowserrequirementssoyouknowwhatsolutionsyouhavetoprovide
5.Seeifthedesignisresponsiveornot
6.CheckwiththeTeamLeadorProjectManagerthepriorityofthetemplates
7.Ifmoretherearemorethan1frontenddevontheprojectcheckTOGETHERthedesignsand
seewhatarethecommonelementthatcanbereusedthroughtheproject(displayiconsbased
oncertainclassname,selectorswithcommonproperties/values.

ASYOUTHEME/CREATEthetemplate
1.Checkcrossbrowserdisplayasyougo
afterfinishinganimportantpartofthetemplate(ex:header)checkinallbrowsersoyouwont
haveasurpriseattheend
2.Communicatewiththeteammembersconstantly

WHENYOUFINISHED
1.Checkeverythingisworkingasitshouldinallbrowsers/resolutions
2.Insertaninfo.txttoexplainstufftodevelopersifneeded

NEWSLETTERS
1.Checktoseeifthenewsletterneedsatablestructure,orifjustaplaintextwilldo.
2.testinallmajor+oldIE(7)browsersbeforeyousend
3.testyounewsletterbysendingtogmail,yahoo,hotmailaccounts
4.testnewsletterinOutlook,Thunderbird
5.Delivertointegrationthenewsletteronlywhenitsworkingproperlyinabovementionedemail
services/clients