BEM का सबसे अच्छा परिचय हैरी रॉबर्ट्स से है:
बीईएम - अर्थ ब्लॉक, तत्व, संशोधक - यैंडेक्स पर लोगों द्वारा सोचा गया एक फ्रंट-एंड नामकरण पद्धति है। यह आपके सीएसएस वर्गों के नामकरण का एक स्मार्ट तरीका है जो उन्हें अन्य डेवलपर्स को अधिक पारदर्शिता और अर्थ देता है। वे कहीं अधिक सख्त और सूचनात्मक हैं, जो बड़ी परियोजनाओं पर डेवलपर्स की टीमों के लिए बीईएम नामकरण सम्मेलन को आदर्श बनाता है जो कुछ समय तक चल सकता है।
सैस 3.3 के बाद से, हम इस तरह की चीजें लिख सकते हैं:
.block ( /* CSS declarations for `.block` */ &__element ( /* CSS declarations for `.block__element` */ ) &--modifier ( /* CSS declarations for `.block--modifier` */ &__element ( /* CSS declarations for `.block--modifier__element` */ ) ) )जब तक CSS नियम छोटे और आधार चयनकर्ता सरल होते हैं, पठनीयता ठीक रहती है। लेकिन जब चीजें अधिक जटिल हो जाती हैं, तो यह सिंटैक्स यह पता लगाना कठिन बनाता है कि क्या चल रहा है। इस वजह से, हमें अपने बीईएम सिंटैक्स के लिए दो आवरण मिश्रण बनाने का प्रलोभन दिया जा सकता है:
/// Block Element /// @access public /// @param (String) $element - Element's name @mixin element($element) ( &__#($element) ( @content; ) ) /// Block Modifier /// @access public /// @param (String) $modifier - Modifier's name @mixin modifier($modifier) ( &--#($modifier) ( @content; ) )हमारे पिछले नए मिश्रणों के साथ हमारे पिछले उदाहरण को फिर से देखें:
.block ( /* CSS declarations for `.block` */ @include element('element') ( /* CSS declarations for `.block__element` */ ) @include modifier('modifier') ( /* CSS declarations for `.block--modifier` */ @include element('element') ( /* CSS declarations for `.block--modifier__element` */ ) ) )ध्यान दें कि स्ट्रिंग के आसपास के उद्धरण वैकल्पिक हैं, हम केवल उन्हें अतिरिक्त पठनीयता के लिए जोड़ते हैं।
अब, यदि आपको लगता है elementऔर modifierटाइप करने के लिए बहुत लंबा है, तो आप दो छोटे उपनाम बना सकते हैं जैसे:
/// @alias element @mixin e($element) ( @include element($element) ( @content; ) ) /// @alias modifier @mixin m($modifier) ( @include modifier($modifier) ( @content; ) )उपनाम का उपयोग करना:
.block ( /* CSS declarations for `.block` */ @include e('element') ( /* CSS declarations for `.block__element` */ ) @include m('modifier') ( /* CSS declarations for `.block--modifier` */ @include e('element') ( /* CSS declarations for `.block--modifier__element` */ ) ) )