सीएसएस बीईएम मॉडल - स्केलेबल और रखरखाव योग्य सीएसएस लिखने के लिए एक गाइड

इस लेख में, हम बीईएम (ब्लॉक, एलिमेंट, मॉडिफायर) पद्धति के बारे में जानेंगे, जो एक लोकप्रिय सीएसएस नामकरण परंपरा है जो आपको बड़ी परियोजनाओं के लिए स्वच्छ, संरचित और रखरखाव योग्य सीएसएस लिखने में मदद करती है। बीईएम यह सुनिश्चित करता है कि जैसे-जैसे प्रोजेक्ट बढ़ता है आपका कोड स्केलेबल बना रहता है और स्टाइल टकराव की संभावना कम हो जाती है।

1. बीईएम क्या है?

BEM का अर्थ है:

• ब्लॉक: एक स्टैंडअलोन इकाई जो अपने आप में सार्थक है, जैसे कि एक बटन, मेनू, या फॉर्म।
• तत्व: ब्लॉक का एक हिस्सा जो एक विशिष्ट कार्य करता है, जैसे बटन लेबल या मेनू आइटम।
• संशोधक: किसी ब्लॉक या तत्व की भिन्नता या स्थिति, जैसे अक्षम बटन या हाइलाइट किया गया मेनू आइटम।

बीईएम पद्धति पुन: प्रयोज्य, पूर्वानुमानित और रखरखाव योग्य सीएसएस कोड बनाने पर जोर देती है।

बीईएम नामकरण परंपरा:

.block {}
.block__element {}
.block--modifier {}

• ब्लॉक: मुख्य कंटेनर का प्रतिनिधित्व करता है।
• तत्व: ब्लॉक नाम का अनुसरण करता है, जिसे डबल अंडरस्कोर (__) द्वारा अलग किया जाता है।
• संशोधक: डबल हाइफ़न (--) द्वारा अलग किए गए ब्लॉक या तत्व नाम का अनुसरण करता है।

2. संरचना को परिभाषित करना

आइए एक उदाहरण के साथ बीईएम की संरचना को तोड़ें।

उदाहरण:

    

        
Home
        
About
        
Contact
    

इस उदाहरण में:

• ब्लॉक: .मेनू नेविगेशन मेनू का प्रतिनिधित्व करने वाला मुख्य ब्लॉक है।
• तत्व: .menu__list और .menu__item ब्लॉक के भीतर तत्व हैं।
• संशोधक: .menu__item--active एक संशोधक है जो मेनू आइटम की सक्रिय स्थिति को दर्शाता है।

3. बीईएम में ब्लॉक

ए ब्लॉक एक स्वतंत्र, पुन: प्रयोज्य घटक है। इसे एक स्व-निहित इकाई के रूप में सोचें जिसे अन्य तत्वों से इसकी शैली प्रभावित होने की चिंता किए बिना आपके कोड में कहीं भी रखा जा सकता है।

उदाहरण:

.button {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
}

यहां, .बटन एक ब्लॉक है जो बटन घटक के लिए शैलियों को परिभाषित करता है। आप इस ब्लॉक को अपनी वेबसाइट के कई हिस्सों में पुन: उपयोग कर सकते हैं।

4. बीईएम में तत्व

एक तत्व एक ब्लॉक का एक हिस्सा है जिसका कोई स्टैंडअलोन अर्थ नहीं है। यह ब्लॉक से जुड़ा हुआ है और ब्लॉक से संबंधित कार्य करने के लिए मौजूद है।

उदाहरण:

.button__icon {
    margin-right: 10px;
}
.button__label {
    font-size: 14px;
}

यहाँ:

• .button__icon .buttonब्लॉक के भीतर एक तत्व है, जो बटन में एक आइकन का प्रतिनिधित्व करता है।
• .button__label एक अन्य तत्व है, जो बटन के टेक्स्ट लेबल का प्रतिनिधित्व करता है।

5. बीईएम में संशोधक

एक संशोधक एक ब्लॉक या तत्व की विविधता का प्रतिनिधित्व करता है। संशोधक का उपयोग किसी घटक के स्वरूप या व्यवहार को बदलने के लिए किया जाता है, जैसे बटन का रंग बदलना या किसी तत्व को बड़ा बनाना।

उदाहरण:

.button--primary {
    background-color: #2ecc71;
}
.button--large {
    padding: 15px 30px;
}

यहाँ:

• .बटन--प्राथमिक एक संशोधक है जो बटन के पृष्ठभूमि रंग को बदलता है।
• .बटन--बड़ा एक अन्य संशोधक है जो बटन का आकार बढ़ाता है।

संशोधक को तत्वों पर भी लागू किया जा सकता है:

.button__icon--small {
    width: 10px;
    height: 10px;
}

6. बीईएम का उपयोग करने के लाभ

• स्केलेबिलिटी: बीईएम को स्केलेबल बनाने के लिए डिज़ाइन किया गया है, जो इसे कई घटकों के साथ बड़ी परियोजनाओं के लिए आदर्श बनाता है।
• पुन: प्रयोज्यता: ब्लॉक स्व-निहित होते हैं और किसी परियोजना के विभिन्न भागों में पुन: उपयोग किए जा सकते हैं।
• रखरखाव: बीईएम स्पष्ट, सुसंगत नामकरण को प्रोत्साहित करता है, जिससे परियोजना बढ़ने पर सीएसएस को बनाए रखना आसान हो जाता है।
• पूर्वानुमेयता: आप आसानी से बता सकते हैं कि कौन से तत्व किस ब्लॉक से संबंधित हैं और संशोधक के आधार पर उनकी विविधताओं को समझ सकते हैं।

7. कार्रवाई में बीईएम

आइए एक अधिक संपूर्ण उदाहरण देखें जिसमें ब्लॉक, तत्व और संशोधक शामिल हैं:

HTML:

    

        
Card Title
    
    

        
This is a simple card component.
    
    

        Read More
    

सीएसएस:

/* Block */
.card {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 5px;
}

/* Elements */
.card__header {
    margin-bottom: 15px;
}
.card__title {
    font-size: 18px;
    color: #333;
}
.card__body {
    margin-bottom: 15px;
}
.card__text {
    color: #666;
}
.card__footer {
    text-align: right;
}

/* Modifier */
.card__button--primary {
    background-color: #3498db;
    color: white;
}

इस उदाहरण में:

• .कार्ड वह ब्लॉक है जो संपूर्ण कार्ड घटक का प्रतिनिधित्व करता है।
• .card__header, .card__title, .card__body, और .card__footer कार्ड ब्लॉक के भीतर तत्व हैं।
• .card__button--प्राथमिक एक संशोधक है जो कार्ड के भीतर बटन पर प्राथमिक शैली लागू करता है।

8. बीईएम में टालने योग्य सामान्य गलतियाँ

• बहुत सारे नेस्टेड तत्व: गहरे नेस्टेड तत्वों से बचें, क्योंकि इससे वर्ग नाम अनावश्यक रूप से लंबे हो सकते हैं।
• अनावश्यक संशोधक: संशोधक का उपयोग केवल तभी करें जब आपको किसी ब्लॉक या तत्व की उपस्थिति या स्थिति को बदलने की आवश्यकता हो।
• बीईएम को अन्य नामकरण परंपराओं के साथ जोड़ना: स्थिरता के लिए अपने पूरे प्रोजेक्ट में बीईएम पर टिके रहें।

निष्कर्ष

बीईएम पद्धति आपके सीएसएस को व्यवस्थित, पूर्वानुमानित और स्केलेबल बनाए रखने का एक शक्तिशाली तरीका है। अपने घटकों को ब्लॉक, तत्वों, और संशोधक में विभाजित करके, आप स्वच्छ कोड बनाए रख सकते हैं और शैली संघर्षों से बच सकते हैं, जिससे आपके प्रोजेक्ट का विकास तेज और अधिक कुशल हो जाएगा। बढ़ता है।

मुझे लिंक्डइन पर फॉलो करें

रिदोय हसन