{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поговорим про технические детали того как обычно работают с БЕМ методологией.","type":"unstyled","key":"999kf"},{"data":{"image":{"id":"5ff48892f906b16872e00947"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кот из 5 элемента","type":"atomic:image","key":"5ak87"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":5,"offset":0}],"inlineStyleRanges":[{"length":4,"offset":44,"style":"BOLD"},{"length":7,"offset":62,"style":"BOLD"},{"length":11,"offset":185,"style":"BOLD"},{"length":33,"offset":247,"style":"BOLD"}],"text":"Ранее мы выяснили как определять, что такое блок, а что такое элемент в методологии. А так же, выяснили, что один и тот же блок со всеми своими элементами может встречаться на странице не один раз. Это и есть технические вводные которые нужны для воплощения методологии в верстке.","type":"unstyled","key":"3ejgf"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":9,"offset":41}],"inlineStyleRanges":[{"length":28,"offset":84,"style":"ITALIC"},{"length":5,"offset":149,"style":"BOLD"},{"length":9,"offset":169,"style":"BOLD"},{"length":7,"offset":202,"style":"BOLD"}],"text":"Немного вспомним, а какие же вообще есть селекторы? Чтобы покрыть это требование - \"множество блоков на странице\" мы можем использовать селекторы по тегам, селекторы по атрибутам и наконец селекторы по классам.","type":"unstyled","key":"5160g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теги","type":"header-two","key":"7ehbt"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":15,"offset":353}],"inlineStyleRanges":[{"length":8,"offset":32,"style":"BOLD"},{"length":5,"offset":41,"style":"BOLD"},{"length":11,"offset":147,"style":"BOLD"},{"length":25,"offset":325,"style":"ITALIC"}],"text":"Рассмотрим сначала селекторы по названию тегов. Эта идея это первое что приходит в голову, она словно витает в воздухе и она похожа, на то как оно должно быть. Многие поколения разработчиков и верстальщиков всячески лоббируют эту идею. В современных реалиях ее вполне можно реализовать так в новых стандартах HTML появились \"пользовательские элементы\" (custom elements). ","type":"unstyled","key":"c7b8g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":59,"style":"ITALIC"}],"text":"\n \n \n","type":"blockquote","key":"q6fs"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":10,"offset":90}],"inlineStyleRanges":[{"length":9,"offset":35,"style":"BOLD"},{"length":12,"offset":47,"style":"BOLD"},{"length":2,"offset":199,"style":"BOLD"},{"length":8,"offset":209,"style":"BOLD"},{"length":16,"offset":227,"style":"BOLD"},{"length":19,"offset":303,"style":"BOLD"},{"length":19,"offset":331,"style":"BOLD"},{"length":15,"offset":389,"style":"BOLD"},{"length":10,"offset":90,"style":"ITALIC"}],"text":"Но к сожалению что бы их создавать правильно и по стандарту нужно использовать технологию JavaScript. Но в тоже время можно использовать их и без нее, но тут возникают риски, что страница становится не совсем валидной и не все поисковые роботы смогу понять, что находится на ней. Так же есть проблемы с производительностью так как при масштабировании количества пользовательских элементов растут задержки при их обработки после загрузки страницы.","type":"unstyled","key":"clsr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тогда CSS селекторы будут выглядеть как","type":"unstyled","key":"5j0tf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"my-custom-block {\n background: red;\n}\nmy-custom-block-element {\n padding: 10px;\n}","type":"blockquote","key":"bnkdj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":82,"style":"BOLD"},{"length":9,"offset":128,"style":"BOLD"}],"text":"Так же в случае использования селекторов по тегам не очень очевидно, что делать с элементами блоков? Навскидку можно предложить несколько решений.","type":"unstyled","key":"4kngq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":16,"style":"BOLD"},{"length":5,"offset":41,"style":"BOLD"},{"length":14,"offset":47,"style":"BOLD"},{"length":26,"offset":267,"style":"ITALIC"}],"text":"1. Использовать название блоков качестве части имени элемента. Тем самым можно создать элементы к которые можно стилизовать исходя из названия их тега, который содержит в себе название элемента. В этом случае на каждый тип такого элемента нужно будет создавать новый пользовательский элемент. Эта техника применена в примере выше.","type":"unstyled","key":"v819"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":10,"offset":16}],"inlineStyleRanges":[{"length":10,"offset":16,"style":"ITALIC"},{"length":10,"offset":438,"style":"ITALIC"},{"length":16,"offset":89,"style":"BOLD"},{"length":6,"offset":131,"style":"BOLD"},{"length":15,"offset":144,"style":"BOLD"},{"length":7,"offset":172,"style":"BOLD"},{"length":22,"offset":208,"style":"BOLD"},{"length":19,"offset":337,"style":"BOLD"},{"length":31,"offset":533,"style":"BOLD"}],"text":"2. Использовать Shadow DOM (теневой DOM). Этот способ хорош тем, что обеспечивает хорошую изоляцию стилей. То есть стили элементов внутри блока не будут влиять на страницу целиком, а только на элементы блока внутри теневого дерева, а это именно то что и хотелось добиться. Но и этого подхода есть свои недостатки. Во первых он поддержан не всеми браузерами. Во вторых опять таки как и у пользовательских элементов тут нужно задействовать JavaScript, а это значит что при увеличении разнообразия элементов, опять таки могут возникнуть проблемы с производительностью","type":"unstyled","key":"a24gc"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":4,"offset":187}],"inlineStyleRanges":[{"length":16,"offset":15,"style":"BOLD"},{"length":10,"offset":222,"style":"ITALIC"}],"text":"Конечно же это не исчерпывающий список способов организации блоков и элементов на странице. Я уверен что существует еще как минимум несколько. Но кажется, чтобы сделать такую организацию html тегами придется задействовать JavaScript. Далее рассмотрим способы которые этого не требуют.","type":"unstyled","key":"579u6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Атрибуты","type":"header-two","key":"cu9av"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":9,"offset":61},{"key":7,"length":6,"offset":151},{"key":8,"length":3,"offset":222}],"inlineStyleRanges":[{"length":22,"offset":61,"style":"BOLD"},{"length":18,"offset":151,"style":"BOLD"},{"length":11,"offset":182,"style":"ITALIC"},{"length":3,"offset":222,"style":"ITALIC"},{"length":4,"offset":289,"style":"ITALIC"}],"text":"Как было сказано ранее помимо селекторов по тегам существуют селекторы по атрибутам. Эту особенность тоже можно использовать для организации структуры блоков и элементов. В качестве подопытного атрибута можно использовать rel, так же на просторах интернета, можно встретить использование \"data\" атрибутов. ","type":"unstyled","key":"99cp5"},{"data":{},"depth":0,"entityRanges":[{"key":9,"length":8,"offset":115}],"inlineStyleRanges":[{"length":17,"offset":24,"style":"BOLD"},{"length":24,"offset":60,"style":"BOLD"},{"length":20,"offset":123,"style":"BOLD"},{"length":11,"offset":170,"style":"BOLD"},{"length":16,"offset":217,"style":"BOLD"},{"length":22,"offset":336,"style":"BOLD"},{"length":10,"offset":360,"style":"BOLD"},{"length":3,"offset":252,"style":"ITALIC"},{"length":13,"offset":391,"style":"ITALIC"}],"text":"Именно тут раскрывается первый недостаток этого метода - он нарушает смысл атрибутов. То есть выходит так, что эти атрибуты задуманы для одного, а по факту их используют для другого. Это приводит к тому, что например поисковые машины ожидают увидеть в rel атрибуте данные для индексации ссылок, а по факту там находиться информация для стилизации этих ссылок. Тоже самое можно сказать и про data атрибуты.","type":"unstyled","key":"cdutr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":60,"style":"BOLD"},{"length":20,"offset":96,"style":"BOLD"}],"text":"Если же, все это не важно, тогда чтобы организовать систему блоков и элементов, нужно придумать правила наименования, как это было для тегов. Если там была предложена идея \"использовать название блоков в качестве части имени элементов\" то тут можно ее продолжить.","type":"unstyled","key":"4djaj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Заголовок

","type":"blockquote","key":"1lpmv"},{"data":{},"depth":0,"entityRanges":[{"key":10,"length":3,"offset":277}],"inlineStyleRanges":[{"length":17,"offset":21,"style":"BOLD"},{"length":11,"offset":43,"style":"BOLD"},{"length":11,"offset":80,"style":"BOLD"},{"length":5,"offset":98,"style":"BOLD"},{"length":8,"offset":113,"style":"BOLD"},{"length":15,"offset":153,"style":"BOLD"},{"length":8,"offset":198,"style":"BOLD"},{"length":18,"offset":234,"style":"BOLD"},{"length":21,"offset":378,"style":"BOLD"},{"length":3,"offset":277,"style":"ITALIC"},{"length":4,"offset":400,"style":"ITALIC"}],"text":"Как видно на примере не всегда понятно где разделитель \"-\" выступает в качестве разделителя имени блока от имени элемента, а где он выступает в качестве пробела в имени блока/элемента. Обозначенная проблема будет возникать при выборе любого разделителя, по этому в методологии БЭМ существует договоренность, что в качестве разделителя между именем блока и элемента используется двойное подчеркивание \"__\" с использованием этого правила пример будет выглядеть как","type":"unstyled","key":"7k1m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Заголовок

","type":"blockquote","key":"9dqn1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используя эту разметку, мы можем определить стили следующим образом","type":"unstyled","key":"2hd2c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"[rel=my-block] {\n background: red;\n}","type":"blockquote","key":"8811m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"[rel=my-block__element] {\n padding: 10px;\n}","type":"blockquote","key":"5i4tn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"[rel=my-block__header] {\n color: blue;\n}","type":"blockquote","key":"7912d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":108,"style":"ITALIC"}],"text":"Тем самым мы добьемся искомого результата. А что если какой то из наших блоков все же используется свойство rel?","type":"unstyled","key":"6fa0k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Заголовок

\n Ссылка\n

","type":"blockquote","key":"3djht"},{"data":{},"depth":0,"entityRanges":[{"key":11,"length":11,"offset":39}],"inlineStyleRanges":[{"length":14,"offset":54,"style":"BOLD"},{"length":14,"offset":160,"style":"BOLD"},{"length":21,"offset":86,"style":"ITALIC"},{"length":6,"offset":112,"style":"ITALIC"},{"length":7,"offset":145,"style":"ITALIC"}],"text":"В этом случае придется воспользоваться селекторами по части атрибута это могут быть \" *= \", \" ^= \", \" ~= \" или \" $= \". Если всегда использовать \" *= \" то есть риск ошибиться в названии блоков. Например если у нас есть блоки","type":"unstyled","key":"6asld"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"5fjuj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":44,"style":"ITALIC"},{"length":7,"offset":157,"style":"ITALIC"},{"length":24,"offset":65,"style":"BOLD"},{"length":1,"offset":90,"style":"BOLD"}],"text":"При попытке выделить их с помощью селектора [rel *= super-block] будут выделены оба блока, что не всегда ожиданно. Так что лучше в общем случае пользоваться \" ~= \" этот селектор дает меньше всего побочных эффектов.","type":"unstyled","key":"5d42b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":25,"style":"BOLD"},{"length":33,"offset":93,"style":"BOLD"},{"length":12,"offset":144,"style":"BOLD"},{"length":6,"offset":229,"style":"BOLD"}],"text":"В общем все эти проблемы заставляют задумываться при написании селекторов, а значит тут есть много мест для неожиданных ошибок и для того чтобы их избежать, на практике используется подход к наименованию блоков и элементов через классы.","type":"unstyled","key":"f653k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Классы","type":"header-two","key":"qv6n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":18,"style":"BOLD"}],"text":"Если использовать классы для примера который был использован выше для атрибутов, то получится","type":"unstyled","key":"7bt1j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":32,"style":"ITALIC"},{"length":5,"offset":70,"style":"ITALIC"},{"length":22,"offset":144,"style":"ITALIC"}],"text":"

\n \n

\n Ссылка\n

","type":"blockquote","key":"92mk6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":29,"style":"BOLD"},{"length":7,"offset":76,"style":"BOLD"},{"length":29,"offset":135,"style":"BOLD"},{"length":14,"offset":59,"style":"ITALIC"},{"length":5,"offset":94,"style":"ITALIC"}],"text":"В этом примере сразу заметно отсутствие проблем с ссылками rel=\"nofollow\" и смыслом - атрибут class придуман специально для работы со стилями отображения элементов.","type":"unstyled","key":"36jsf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":49,"style":"BOLD"},{"length":19,"offset":169,"style":"BOLD"},{"length":16,"offset":209,"style":"BOLD"},{"length":26,"offset":362,"style":"BOLD"}],"text":"Так же хотелось бы обратить внимание на пример с вложенными элементами. В своей практике я встречал интересную интерпретацию этого случая ее смысл заключается в том что вложенным элементам в класс дописывался элемент родитель и вместо my-block__header разработчик писал my-block__element__header, так как эти элементы вложены в друг друга. С этим подходом есть несколько опасных моментов","type":"unstyled","key":"7hs5m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":3,"style":"BOLD"}],"text":"1. Длина класса элемента начинает расти в зависимости от его глубины вложенности. На 3-4 уровне имя класса становится очень большим, настолько большим, что становится больше основного содержимого страницы.","type":"unstyled","key":"8tst"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":77,"style":"BOLD"},{"length":3,"offset":128,"style":"ITALIC"}],"text":"2. Самое неприятное в том что такой подход заставляет переделывать стили при изменении иерархии элементов. Ведь изначально идея БЕМ в том что бы упрощать переносы блока и элементов по верстке.","type":"unstyled","key":"3d2op"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Так что в целом так делать не стоит.","type":"unstyled","key":"3f9s4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Модификатор","type":"header-two","key":"9210r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":37,"style":"BOLD"},{"length":15,"offset":129,"style":"BOLD"},{"length":3,"offset":160,"style":"ITALIC"}],"text":"Теперь когда стало понятно что такое блоки и элементы, и почему их нужно реализовывать через классы. Пришло время раскрыть смысл последней буквы в аббревиатуре БЕМ.","type":"unstyled","key":"3medk"},{"data":{},"depth":0,"entityRanges":[{"key":12,"length":13,"offset":89}],"inlineStyleRanges":[{"length":1,"offset":0,"style":"BOLD"},{"length":4,"offset":29,"style":"BOLD"},{"length":10,"offset":49,"style":"BOLD"}],"text":"М - это модификатор по своей идее, он созвучен с состоянием блока. Так же как это было у псевдоклассов, их наличие еще одна причина по которой модификаторы для блоков довольно редко применяются в современной верстке, но когдато это был очень важный компонент методологии.","type":"unstyled","key":"dcgcs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":8,"style":"BOLD"},{"length":19,"offset":64,"style":"BOLD"},{"length":12,"offset":94,"style":"BOLD"},{"length":11,"offset":118,"style":"BOLD"}],"text":"То есть модификатор имеет смысл для блока у которого может быть несколько состояний, по этому модификаторы для блоков опциональны, так как не всем блокам нужны состояния и по этому модификаторы используются значительно реже.","type":"unstyled","key":"5dguh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":49,"style":"BOLD"},{"length":21,"offset":87,"style":"BOLD"},{"length":15,"offset":125,"style":"BOLD"},{"length":14,"offset":156,"style":"BOLD"},{"length":18,"offset":214,"style":"BOLD"}],"text":"Чтобы использовать модификатор на блоке, принято дублировать название блока и отделять название модификатора от имении блока двойным дефисом \"--\" или одним подчеркиванием \"_\". Тут в отличии от элементов в интернете нет общего мнения. Российская школа говорит об подчеркивании а зарубежная о дефисах. Пример","type":"unstyled","key":"bf796"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":19,"style":"ITALIC"},{"length":17,"offset":89,"style":"ITALIC"}],"text":"

Заголовок

\n Ссылка\n

","type":"blockquote","key":"1m4m9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":5,"style":"ITALIC"},{"length":1,"offset":46,"style":"ITALIC"},{"length":21,"offset":80,"style":"ITALIC"},{"length":11,"offset":106,"style":"ITALIC"},{"length":10,"offset":121,"style":"ITALIC"},{"length":7,"offset":138,"style":"ITALIC"},{"length":4,"offset":117,"style":"BOLD"},{"length":7,"offset":131,"style":"BOLD"},{"length":11,"offset":145,"style":"BOLD"}],"text":"Где \"my-block\" - это блок small - модификатор. Тоже самое верно и для элементов my-block__header--big где my-block - блок header - элемент big - модификатор","type":"unstyled","key":"ed9eg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Буду рад комментариям идеям лайкам, всему тому что поможет сделать эту статью лучше. Поможет вам и другим людям, что прочтут их.","type":"unstyled","key":"2ll54"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"svAW9SeNPd6lFZlJ9ATv"}],"entityMap":{"11":{"data":{"badSeoLink":"true","url":"https://zen.yandex.ru/media/id/5a8ed6eddcaf8e23b97cf564/osnovy-sss-selektory-5ab7b7bba936f4ffe3f06b2e"},"mutability":"MUTABLE","type":"LINK"},"12":{"data":{"url":"https://zen.yandex.ru/media/id/5a8ed6eddcaf8e23b97cf564/css-psevdoklassy-5d357e5d998ed600ae41dd04"},"mutability":"MUTABLE","type":"LINK"},"0":{"data":{"url":"https://zen.yandex.ru/media/id/5a8ed6eddcaf8e23b97cf564/css-bem-bloki-i-elementy-5dda41871d7c9c37ebeddd28"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"badSeoLink":"true","url":"https://zen.yandex.ru/media/id/5a8ed6eddcaf8e23b97cf564/osnovy-sss-selektory-5ab7b7bba936f4ffe3f06b2e"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"url":"https://learn.javascript.ru/custom-elements"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"url":"https://learn.javascript.ru/"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"url":"https://learn.javascript.ru/shadow-dom"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"badSeoLink":"true","url":"https://zen.yandex.ru/media/id/5a8ed6eddcaf8e23b97cf564/osnovy-html-5aab98ba256d5c6d18182ebe"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"badSeoLink":"true","url":"https://zen.yandex.ru/media/id/5a8ed6eddcaf8e23b97cf564/osnovy-sss-selektory-5ab7b7bba936f4ffe3f06b2e"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"url":"https://zen.yandex.ru/media/id/5a8ed6eddcaf8e23b97cf564/css-bloki-blochnye-elementy-5b1e39ac7800191fcd1ebd35"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"url":"http://htmlbook.ru/html/a/rel"},"mutability":"MUTABLE","type":"LINK"},"9":{"data":{"badSeoLink":"true","url":"https://zen.yandex.ru/media/id/5a8ed6eddcaf8e23b97cf564/osnovy-html-5aab98ba256d5c6d18182ebe"},"mutability":"MUTABLE","type":"LINK"},"10":{"data":{"url":"https://zen.yandex.ru/media/id/5a8ed6eddcaf8e23b97cf564/css-bem-bloki-i-elementy-5dda41871d7c9c37ebeddd28"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}