BEM के अनुसार टाइप करना क्यों बेहतर है - व्यावहारिक उदाहरण

बीईएम ( यांडेक्स सीएसएस लेखन पद्धति के बारे में - Block__Element_Modifier (सबसे सही डिक्रिप्शन रिकॉर्ड) अब आप हर कदम पर सुन सकते हैं। मामला अच्छा निकला और दुनिया भर में घुमाया गया। यांडेक्स भी W3C में चढ़ गया (चाहे वह जुड़ा हो या नहीं - मुझे नहीं पता, लेकिन मुझे आशा है कि - [ वास्तव में नहीं ] )।

मुझे लगता है कि बहुत से लोग जिन्होंने इसे अभी तक आज़माया नहीं है, लेकिन उन्होंने बीईएम विवरण पढ़ा है, एक उचित सवाल पूछ रहे हैं: "इस सभी क्रिया का व्यावहारिक उपयोग क्या है?" वास्तव में, बहुत विस्तृत विवरण के बावजूद, मुख्य रूप से मुख्य "चिप" पर कब्जा करना मुश्किल है। बेशक, कई फायदे वर्णित हैं और कार्यप्रणाली की सामान्य भावना सकारात्मक है, और ऐसा लगता है कि यह कोशिश करना अच्छा होगा, लेकिन इसमें कुछ विशिष्ट का अभाव है। यहाँ एक जीवित या कुछ पर एक उदाहरण है। यहाँ मेरे पास एक वेबसाइट है, यहाँ BEM के लिए लेआउट नहीं है, मुझे सब कुछ क्यों बदलना चाहिए? खासकर जब आप इस तथ्य पर विचार करते हैं कि BEM मूल रूप से कक्षाओं को छोड़कर सभी चयनकर्ताओं को समाप्त कर देता है, तो W3C में इतने स्मार्ट पति को एहसास नहीं हुआ कि सब कुछ इतना गलत है?

इसके लिए मैं कई उदाहरणों का हवाला देता हूं, जिनके साथ आप (निश्चित रूप से, यदि आप किसी तरह लेआउट से जुड़े हुए हैं), तो मैं इस शब्द से हर दिन डरता नहीं हूं। और ऐसी स्थितियों में क्या बदलाव होगा यदि लेआउट मूल रूप से बीईएम में किया गया था।

बीईएम के बारे में थोड़ा सा

संक्षेप में, पूरा बीईएम सिस्टम 2 शोध (सिद्धांत / नियम) में फिट बैठता है:

1. एक वर्ग के अलावा कोई चयनकर्ता नहीं है - अर्थात कोई भी टैग, आईडी और सामान, केवल कक्षाओं पर नहीं लटकाए गए।
2. — .. .class1 .class2{ display: none; }, 1 () (/ /). [ ]

. — .

— ( , ) .

( )

- . . .

1

. , . :

.content a{
  color: green;
}

, — AJAX . ajax-link — CSS . 2 , . a.ajax-link, css .

, content ID — .

#content a{
  color: green;
}

«» id — #content .ajax-link, .. id , , .

1pro

.. :

#buy-form fieldset .buttons input.submit{
  color: green;
}

, , — - , #buy-form.

2

:

.content h1{
  font-size: 18px;
}
.content h1 a{
  color: green;
}
.content h1 a span{
  text-decoration: none;
}

, h1 h3 div, ( — , — ). .. 1 HTML 3 .

( ) CSS / .

-, , .. .
-, .

, .

1 1pro

( 1) id ( 1pro) :

.content__link{
  color: green;
}

: content link [ _].

. .. . .content__link CSS , :

.content__link{
  color: green;
}
.content__link_type_ajax{
  color: red;
  text-decoration: none;
}

: .

.. :

<a class="conten__link content__link_type_ajax" href="#"> </a>

1pro - :

.buy-form__submit{
  color: green;
}

. , , ( ), . , HTML , . , , -. CSS ( ). , .

2

, — :

.content-header{
  font-size: 18px;
}
.content-header__link{
  color: green;
}
.content-header__link-text{
  text-decoration: none;
}

, — 1 HTML . …

. … . , + Twitter Bootstrap . , . . . — . ( , ..) — ( ) , .

, .

• - — — - . , .
• ( ). ( ), .

PS: vithar.

.