BEM: Block, Element, Modifier

Notastomadasde:http://www.vanseodesign.com/css/blockelementmodifier/

TheBEMapproachtodevelopingwebsitescomesfromthedevelopersatYandex.Ithassimilar
goalstotheapproachesweveseenbefore.
Quickdevelopment
Teamefficiency
Scalability
Codereuse

BlocksandElements
UnderBEMablockisitsownindependententity.Blockscanbesimpleorcomplexandtheycan
containotherblocks.

Atthehighestlevelofadesign,yourblocksmightbeyourheaderblock,footerblock,main
contentblock,andsidebarblock.Yourheaderwouldlikelyincludeseveralblocksinsidesuchas
oneforyourlogoandtagline,anotherforanavigationbar,andmaybeanothermakingupa
searchfieldandbutton.

Elementsarepartsofblocks.Theyperformcertainfunctionswithintheblockandtheyrecontext
dependent.Takeanelementoutsideitsblockanditnolongermakessense

Blocksandelementsshouldhavekeywords(names)associatedwiththem.Theonlywaythe
samenameorkeywordisreusediswhenthesameblockorelementisbeingreused.Blocks
mustbeindependentofeachothertoallowforarbitraryplacementwithinthedesign.Wewantto
beabletotakeoursearchblockandeasilymoveitfromthetoprightintheheadertothemiddle
ofthesidebarforexample.

Thisleadsto3guidelinesforwritingcss:
Blocksshouldhaveuniquenames,whichbecomeclasses
HTMLelementsshouldnotbeusedincssselectorssincetheyarentcontextfree
Cascadingselectorsforseveralblocksshouldbeavoided

Modifiers
Whathappenswhenyouhaveablocklikeasearchinputandbuttonandyouwanttoadd
anothertothepagethatlookssimilar,thoughnotexactlylikethefirst?Thisiswheremodifiers
comein.Modifiershelpuscreatesimilarthoughdifferentblocksfromalreadyexistingblocks.

Amodifierisapropertyofablockoranelementthataltersitslookorbehavior.
DocumentocreadoporFranciscoQuintero
Amodifierhasanameandavalue.Severalmodifierscanbeusedatonce.

Typicallyamodifierwillbeanadditionalcssclassyouwouldaddtoanelement.

Paramayordetalle,leerdocumentacin:http://bem.info/method/definitions/
DocumentocreadoporFranciscoQuintero