मैं बीईएम सीखने की कोशिश कर रहा हूं और इसके लाभों की सराहना करने में कठिनाई हो रही है। उदाहरण के तौर पर, मैं इस कोड को हासिल करने के लिए Tailwind's Utility-First पेज पर गया था:

<div class="chat-notification">
  <div class="chat-notification__logo-wrapper">
    <img class="chat-notification__logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification__content">
    <h4 class="chat-notification__title">ChitChat</h4>
    <p class="chat-notification__message">You have a new message!</p>
  </div>
</div>

  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification__logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification__logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification__content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification__title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification__message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }

जब मैं इसे देखता हूं, तो मैं मदद नहीं कर सकता लेकिन सोचता हूं कि इसे सरल बनाया जाना चाहिए

<div class="chat-notification">
  <img src="logo.jpg" alt="ChitChat Logo">
  <h4>ChitChat</h4>
  <p>You have a new message!</p>
</div>

.chat-notification {
  position:relative;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  box-sizing:border-box;
  padding-left: 3.5rem;
}
.chat-notification img {
  position:absolute;
  top:0;
  left:0;
  clip: rect(0,200,400,0);
    width: 3rem;
}
.chat-notification h4 {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
}
.chat-notification p {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
}

मैंने मूल रूप से HTML को सरल बनाया और अनावश्यक रैपर, डिवाइटिस, क्लासिटिस से छुटकारा पाया। मेरा प्रश्न यह है कि जब img, h4, p जैसे टैग पहले से ही काफी विशिष्ट और अर्थपूर्ण हैं तो क्लास डिस्क्रिप्टर जैसे __logo-wrapper और __title उपयोगी क्यों हैं?

bem
1
John 11 फरवरी 2020, 07:22

3 जवाब

  1. कैस्केड स्केल नहीं करते हैं। एक चयनकर्ता .chat-notification img या .chat-notification h4 का अर्थ है कि आपके ब्लॉक chat-notification में एक उप-ब्लॉक शामिल नहीं है जो एक <img> या एक <h4> तत्व का उपयोग कर सकता है।
  2. चयनकर्ता में तत्वों का उपयोग करने से कोड अनम्य हो जाता है। हो सकता है कि आप <img> के बजाय एक <svg>, एक <canvas>, एक <video> प्रदर्शित करना चाहें, लेकिन आपके वर्तमान CSS कोड के साथ आपको पहले CSS कोड बदलना होगा . आपका SEO सलाहकार आपसे <h4> को <h2> से बदलने के लिए कहेगा और आपको अपने CSS चयनकर्ताओं को बदलना होगा।

[संपादित करें] क्लासिटिस से संबंधित: BEM, कैस्केडिंग स्टाइल्स और क्लासिटिस?< /em>

4
Paleo 19 फरवरी 2020, 17:20

अच्छा किया, लेकिन अब यदि आप उसी मुहावरे वाले किसी पृष्ठ पर संशोधित कोड डालने का प्रयास करते हैं तो यह काम नहीं करेगा। इसका मतलब है कि कैस्केड काम नहीं करता जैसा आप चाहते हैं। सीएसएस मॉड्यूल इस समस्या को हल करने का एक विकल्प हो सकता है लेकिन यह कक्षाओं का भी उपयोग करता है।

साथ ही अधिकांश मामलों में html तत्वों में कक्षाएं छोड़ने के लिए कोई वास्तविक जीवन कारण नहीं हैं। ब्राउज़रों को उनसे जुड़ी कक्षाएं और शैलियाँ पसंद हैं। एकल स्तर की कक्षाएं कैस्केड की तुलना में बहुत तेजी से काम करती हैं। ज़ोफली/ब्रॉटली के कारण स्थानांतरित बाइट लगभग बराबर हैं। कक्षाएं छोड़ने से स्रोत कोड पढ़ना कठिन हो जाता है।

लेकिन यह सिर्फ कक्षाओं के बारे में है।

मैंने मूल रूप से HTML को सरल बनाया और अनावश्यक आवरणों, डिवाइटिस से छुटकारा पाया

एचटीएमएल मार्कडाउन को सरल बनाना आमतौर पर एक अच्छी बात है। logo-wrapper और content तत्व केवल बेमानी हैं और उन्हें छोड़ना BEM के विपरीत नहीं है। उदा.:

<div class="chat-notification">
  <img class="chat-notification__logo" src="logo.jpg" alt="ChitChat Logo">
  <h4 class="chat-notification__title">ChitChat</h4>
  <p class="chat-notification__message">You have a new message!</p>
</div>

__logo-wrapper और __title जैसे क्लास डिस्क्रिप्टर क्यों उपयोगी होते हैं जब img, h4, p जैसे टैग पहले से ही काफी विशिष्ट और अर्थपूर्ण होते हैं?

दरअसल, सादगी के कारण उदाहरण वाक्पटु नहीं है। यहां हमारे पास सिर्फ तीन फ़ील्ड और एक कंटेनर है। जब आपके पास कुछ चित्र या कुछ अलग "संदेश" होंगे (जैसे पक्ष और विपक्ष फ़ील्ड) तो आपको img और p टैग चिह्नित करने होंगे। साथ ही img अर्थपूर्ण बात नहीं है, यह HTML दुनिया की एक इकाई है, लेकिन आपकी नहीं। यह केवल एक अमूर्त छवि नहीं है, यह एक logo है, इसलिए इसे शब्दार्थ रूप से बेहतर ढंग से चिह्नित करें।

HTML को एक निम्न-स्तरीय जेनरेट की गई चीज़ के रूप में सोचना बेहतर है जो हमारे एप्लिकेशन को ब्राउज़र में अनुवाद करने में मदद करती है। इसीलिए लाइब्रेरी जैसे BEMHTML और bem-react मौजूद है।

उदा.

({
    block: 'chat-notification',
    content: [
        { elem: 'logo', image: 'logo.jpg', text: 'ChitChat Logo' },
        { elem: 'title', content: 'ChitChat' },
        { elem: 'message', content: 'You have a new message!' }
    ],
})

टेम्पलेट्स के साथ उदाहरण

0
Alex Yaroshevich 12 फरवरी 2020, 18:29

गैर-बीईएम सीएसएस एचटीएमएल के साथ कसकर जुड़ा हुआ है, यानी। HTML में परिवर्तन से CSS में परिवर्तन होने की संभावना है। मेरा तर्क है कि यह सॉलिड कोडिंग सिद्धांतों के खिलाफ जाता है, खुले-बंद और संभवतः एकल जिम्मेदारी सिद्धांत को तोड़ता है।

यह बेहतर होगा यदि CSS को HTML के साथ इतना कसकर न जोड़ा जाए।

बीईएम आपको सीएसएस वर्गों की एक अमूर्त संरचना बनाने की अनुमति देकर इसमें मदद करता है जो एचटीएमएल तत्वों से सख्ती से बंधे नहीं हैं और अधिक लचीले ढंग से लागू किए जा सकते हैं।

यह एक लागत पर आता है कि आपको और आपकी टीम को यह याद रखना होगा कि वह अमूर्त क्या है, लेकिन मुझे लगता है कि यह न्यूनतम है क्योंकि बीईएम एक काफी सरल मॉडल है।

आप बड़े कोडबेस में भी समस्याओं का सामना कर सकते हैं जहां नामकरण टकराव हो सकता है, लेकिन इसके आसपास पहुंचने में आपकी सहायता के लिए टूल हैं, जैसे सीएसएस मॉड्यूल।

व्यक्तिगत रूप से मैं बीईएम से प्यार करता हूं और जब भी मैं कर सकता हूं इसका इस्तेमाल करता हूं।

0
HNipps 19 फरवरी 2020, 17:27