BEM नामकरण परंपरा

Block, Element, Modifier

BEM: .block एक स्वतंत्र कंपोनेंट, .block__element उसके अंदर का हिस्सा, .block--modifier block का एक वेरिएंट। सब कुछ सपाट, कम-स्पेसिफिसिटी क्लास रहती है।

HTML और CSS में BEM

कोई नेस्टेड सेलेक्टर नहीं — हर क्लास सीधे किसी मक़सद से मेल खाती है।

<div class="card card--featured">
  <h3 class="card__title">Title</h3>
  <p class="card__body">Text</p>
</div>

क्यों उपयोगी

BEM गहराई से नेस्टेड सेलेक्टर (.card .header .title) से बचाता है, जिससे स्पेसिफिसिटी कम और अनुमानित रहती है — इसलिए बाद के रूल पहले वालों को कास्केड से लड़े बिना ओवरराइड करते हैं।