Scalable and Modular Architecture for CSS

Apuntestradosdesde:http://www.vanseodesign.com/css/smacssintroduction/

SMACSSstandsforScalableandModularArchitectureforCSSandithas2coregoals.
Increasethesemanticvalueofasectionofhtmlandcontent
Decreasetheexpectationofaspecifichtmlstructure

SMACSSisanapproachtowritingcssandhtmlwithmoreemphasisplacedonusingclasses

UnlikeOOCSS,itdoesntsuggestusingclassesforeverything.ItsfinewithIDsanddescendent
selectorswhereappropriate

MuchlikeOCCSS,thepurposeofthiscategorizationislesscoderepetition,amoreconsistent
experience,andeasiermaintenance.UnderSMACSSthereare5generalcategoriesofcss
rules.
BaseTheseareyourdefaults(html,body,h1,ul,etc)
LayoutThesedividethepageintomajorsections
ModuleThesearethereusablemodularcomponentsofadesign
StateThesedescribehowthingslookwheninaparticularstate(hiddenorexpanded,
active/inactive)
ThemeThesedefinethingslikeacolorschemeortypographictreatmentacrossa
site

JonathanoffersanamingconventionforworkingwithSMACSS,thoughhesquicktopointout
youdontneedtofollowhisconvention.Hedoesfeelthathavingsomeconsistentnaming
conventionisimportant.
BaseNothingneeded
Layoutlorlayoutprefixes
Stateisprefixasinisactiveorishidden
ModuleModulesjustusemodulename(.callout)insteadoftryingtoprefixeach,
howeverrelatedmodulesreceiveaconsistentprefixtohelporganizethem

Base Rules
Baserulesareapplieddirectlytoelementsthroughelementselectors,descendentselectors,
childselectors,pseudoclasses,howevernotspecificclassorIDselectors.
Asthenameimpliesthesearethebaseordefaultstylesforelements.CSSresetsarean
exampleofbasestyles.Basestylesareprettysimpleandprobablyarentmuchdifferentthan
whatyoualreadydounderclassiccss.

DocumentocreadoporFranciscoQuintero
LayoutRules
Therearemajorandminorlayoutcomponentsineverydesign.Aheaderblockwouldbeamajor
component,whilethecombinationoflogoandtaglinewithintheheaderwouldbeaminor
component.ThelayoutrulesofSMACSSapplytomajorcomponents.Minorcomponentsfall
underthemodulerules.

Theamountofreusecanalsodeterminewhichblocksaremajorandminorpartsofthelayout.
MorerepetitionshouldleadyoutothinkmoduleoverlayoutandclassesoverIDs.However,
SMACSSdoesntlimitIDstobehavioralhooks.Itseesthemmoreintraditionalcssterms.Single
usecallsforIDs.Multipleusescallforclasses.

Generallyalayoutstylewillhaveasingleselector(eitheranIDorclass).Additionallytherecould
beastylesettoallowthelayoutstyletorespondtodifferentfactors.

ModuleRules
Againmodulesarebuiltaroundminorpagecomponentslikenavigationbarsandwidgets.They
tendtobeinsidelayoutcomponentsandevenwithinothermodules.

Modulesshouldbedesignedsotheycanexistontheirown,whichgivesthemgreaterflexibilityin
beingcombinedandmovedaroundtodifferentpartsofthedesignwithoutbreakingthelayout.
WithmoduleswedowanttoavoidIDsandelementselectors.Morereusemeansclasses.

Whereyoucanreasonablypredictwhathtmlelementswillbeuseditsoktousedescendent
selectorsasin.modulespan,butasprojectsgrowthingswillquicklybecomelesspredictable
andsoitbecomeslimitingtoattachelementselectorstomoduleclasses.Themoregenericthe
htmlselector(suchasdivorspan),themorelikelytherewillbeaconflict.

SubclassingModules
Modulesareforreuseandnaturallywellwanttoreusemodulesindifferentsectionsofour
layoutsWhenwedo,wemightreachfortheparentelementtomodifythestyle.

StateRules
Astatestyleisonethataugmentsoroverridesotherstylesundergivenconditions.Forexample
anaccordionwithcollapsedandexpandedstates.Thesearetypicallyappliedtothesame
element,shouldbebuilttostandalone,andareusuallydevelopedonasingleclassselector.
DocumentocreadoporFranciscoQuintero

Statechangesarerepresentedinoneofthreeways:
ClassnameThechangehappensbyaddingorremovingaclass,usuallywith
Javascript
PseudoclassThechangehappenstoelementsthataredescendantsorsiblingsof
theelementwiththepseudoclass
MediaqueryThechangehappensunderdefinedcriteria,suchasdifferentviewport
sizes.

ThemeRules
Themerulesaresimilartostaterulesinthattheydescribehowlayoutandmodulesmightlook.
However,theyarentusedasoftenwithinasingleprojectandsoJonathandoesntconsider
themaspartofthecoretypes.

Themeruleswoulddefinecolorsortypographyacrossasiteandseparatingthemesintotheir
ownsetofstylescanallowthemtobemoreeasilymodified.

Paramsdetalle,leerellibro:http://smacss.com/book/
DocumentocreadoporFranciscoQuintero