Для Junior’ов, для junior’ов… а то начнут тут… да мы, да это…
Доделал проект(сайт) pug+sass+es6+gulp+BEM. Во время разработки столкнулся со многими трудностями. Эта статья рассчитана на новичков, на тех, кто не знает об отрицательных маржинах, слышали о методологии именования БЭМ, но не пробовали ее, для тех, кто не имеет огромного опыта в разработке. Надеюсь, вам здесь будет интересно. Если же вы читаете это на работе, сидя у 4-ех мониторов и одной рукой пишите код для ИИ, а второй листаете хабр, то я бы хотел у вас услышать конструктивную критику о методах, которые были использованы здесь.
Я пишу данную статью т.к. мне интересно это, мне интересно разбирать свои проекты. Это дает мне возможность развиваться и закрывать брешь в моих знаниях определенных технологий. Спасибо что прочитали, надеюсь вам понравилось.
Доделал проект(сайт) pug+sass+es6+gulp+BEM. Во время разработки столкнулся со многими трудностями. Эта статья рассчитана на новичков, на тех, кто не знает об отрицательных маржинах, слышали о методологии именования БЭМ, но не пробовали ее, для тех, кто не имеет огромного опыта в разработке. Надеюсь, вам здесь будет интересно. Если же вы читаете это на работе, сидя у 4-ех мониторов и одной рукой пишите код для ИИ, а второй листаете хабр, то я бы хотел у вас услышать конструктивную критику о методах, которые были использованы здесь.
Отрицательные margin и width 110%
Про такой фокус я знаю давно, но на практики применял лишь впервые. В макете было ограничение(wrapper = width: 1170px, красная граница). Справа контент соответствовал ограничению и прилегал к границе, а вот слева картинка вылезала за границу. Сначала это может пугать, но стоит подробней узнать о работе margin-letf: -100px и вы уже знаете, как решить поставленную задачу. К слову, это flex и желтым я отметил границы объектов.
Мы привыкли использовать width, height как 100%, и это понятно, все для адаптива, с помощью width, можно добиться схожего результата как и с отрицательными маржинами. Просто дайте размер потомку больше своего родителя(например, width: 130%)
![](https://habrastorage.org/r/w1560/webt/gg/va/7z/ggva7zggpe3f0mk-sxomu7susgo.png)
Мы привыкли использовать width, height как 100%, и это понятно, все для адаптива, с помощью width, можно добиться схожего результата как и с отрицательными маржинами. Просто дайте размер потомку больше своего родителя(например, width: 130%)
![](https://habrastorage.org/webt/gg/va/7z/ggva7zggpe3f0mk-sxomu7susgo.png)
Структура css по БЭМ
Это, наверно, было самое сложное для меня.
![image](https://habrastorage.org/r/w780q1/webt/ng/gt/aa/nggtaajgcf6zp1isdk96se3zeq0.jpeg)
Эта картинка хорошо демонстрирует мой проект, да и вообще любой проект. Когда ты пишешь первую сотню строк, то все кажется простым, и ты не замечаешь проблем. Так ты дописываешь проект, длиной в 900 строк и неожиданно для себя, решил пролистать файлик, ну или добавить медиа запросы.
![](https://habrastorage.org/r/w1560/webt/8v/ei/lb/8veilbbczw5fqahun7zxa1lglt8.png)
Ты пишешь стили для элемента в media, смотришь на сайт и не понимаешь, почему стили не работают, как требуется. В поисках проблемы ты потратил уже 15 минут, ты проверил таски в gulp и пролистал скомпилированный файл css.
Случайно, случайно … ты находишь проблему в каскадной таблице стилей, а точнее в способе наложения стилей на элементы. В самом начале моего пути в web, я конечно же читал о том, что у селекторов есть разный приоритет применения. Если кратко, то за обычный(div, ul, a, p и т.д.) селектор -1 бал, за класс-10, за идентификатор 100.
![](https://habrastorage.org/r/w1560/webt/c0/s9/5s/c0s95shpxqkxc6ubv-iajveqdj8.png)
Проверив внимательно все вложенности, я все же нашел ошибку. Оказывается нужно и за вложенностью элементов следить, и придавать этому не последнее значение.
Сюда можно отнести и структуру файла css(sass). Есть Блок “portfolio”, в нем куча элементов по типу “portfolio__*”, но два класса в этой вложенности лишние, на мой взгляд.
Это был первый проект в котором я пытался строго придерживаться BEM, но не потратил и минуты на проектирование в самом начале, а придумывал классы на ходу, это привило к тому, что поддержка дается с трудом.
![](https://habrastorage.org/r/w1560/webt/wq/je/ud/wqjeudiqas6vdvhieoih3wsa-hg.png)
А вот это, на мой взгляд, хороший пример BEM’a
![](https://habrastorage.org/r/w1560/webt/_k/nv/sz/_knvszl5gz1mxq61ixnsa1hu5ds.png)
![image](https://habrastorage.org/webt/ng/gt/aa/nggtaajgcf6zp1isdk96se3zeq0.jpeg)
Эта картинка хорошо демонстрирует мой проект, да и вообще любой проект. Когда ты пишешь первую сотню строк, то все кажется простым, и ты не замечаешь проблем. Так ты дописываешь проект, длиной в 900 строк и неожиданно для себя, решил пролистать файлик, ну или добавить медиа запросы.
![](https://habrastorage.org/webt/8v/ei/lb/8veilbbczw5fqahun7zxa1lglt8.png)
Ты пишешь стили для элемента в media, смотришь на сайт и не понимаешь, почему стили не работают, как требуется. В поисках проблемы ты потратил уже 15 минут, ты проверил таски в gulp и пролистал скомпилированный файл css.
Случайно, случайно … ты находишь проблему в каскадной таблице стилей, а точнее в способе наложения стилей на элементы. В самом начале моего пути в web, я конечно же читал о том, что у селекторов есть разный приоритет применения. Если кратко, то за обычный(div, ul, a, p и т.д.) селектор -1 бал, за класс-10, за идентификатор 100.
![](https://habrastorage.org/webt/c0/s9/5s/c0s95shpxqkxc6ubv-iajveqdj8.png)
Проверив внимательно все вложенности, я все же нашел ошибку. Оказывается нужно и за вложенностью элементов следить, и придавать этому не последнее значение.
Сюда можно отнести и структуру файла css(sass). Есть Блок “portfolio”, в нем куча элементов по типу “portfolio__*”, но два класса в этой вложенности лишние, на мой взгляд.
Это был первый проект в котором я пытался строго придерживаться BEM, но не потратил и минуты на проектирование в самом начале, а придумывал классы на ходу, это привило к тому, что поддержка дается с трудом.
![](https://habrastorage.org/webt/wq/je/ud/wqjeudiqas6vdvhieoih3wsa-hg.png)
А вот это, на мой взгляд, хороший пример BEM’a
![](https://habrastorage.org/webt/_k/nv/sz/_knvszl5gz1mxq61ixnsa1hu5ds.png)
Длинные классы BEM
Об этой проблеме я читать в одной из статьи посвященной BEM, но сам столкнулся впервые с этим. Очень напоминает проблемы с bootstrap, в нем тоже были… есть длинные классы. Как можно обойтись минимальным количеством классов?
Это default btn.
![](https://habrastorage.org/r/w1560/webt/1i/gb/nc/1igbncnuo3fzwmn0ulbmanymjei.png)
А это уже модифицированные кнопки…
![](https://habrastorage.org/r/w1560/webt/cc/ki/ss/cckissrlnh40d_tke2r7otfvtlc.png)
![](https://habrastorage.org/r/w1560/webt/ed/lo/1m/edlo1muh6feklkqfbhmx-knhiao.png)
![](https://habrastorage.org/r/w1560/webt/ix/yc/ba/ixycbahqbvrkqenppvuhzv1nv5k.png)
![](https://habrastorage.org/r/w1560/webt/sg/nv/dx/sgnvdxnkymofw6cw78jomojjybw.png)
Это default btn.
![](https://habrastorage.org/webt/1i/gb/nc/1igbncnuo3fzwmn0ulbmanymjei.png)
А это уже модифицированные кнопки…
![](https://habrastorage.org/webt/cc/ki/ss/cckissrlnh40d_tke2r7otfvtlc.png)
![](https://habrastorage.org/webt/ed/lo/1m/edlo1muh6feklkqfbhmx-knhiao.png)
![](https://habrastorage.org/webt/ix/yc/ba/ixycbahqbvrkqenppvuhzv1nv5k.png)
![](https://habrastorage.org/webt/sg/nv/dx/sgnvdxnkymofw6cw78jomojjybw.png)
Сложные селекторы
В учет того, что писать приходилось по BEM, то отсюда вытекали некоторые осложнения в проекте. Про длинные классы я уже написал, вот еще один случай.
На страницы были 6 схожих элементов. При медиа запросах, нужно было прятать определенное количество элементов. Не создавать ведь новые классы для каждого объекта. Пришлось воспользоваться псевдоклассом nth-child(). Раньше его использовал лишь обрезанным способом(child(1), child(3), child(4) и т.д.), сейчас была необходимость спрятать все элементы, кроме первых двух. Потратив 5 мин на чтение документации воспользовался nth-child(n+3), тем самым получив нужный мне результат.
![](https://habrastorage.org/r/w1560/webt/ni/g3/h9/nig3h9m7j84og2cl7n1sxfehczs.png)
Еще один пример, как можно взять нужный элемент через группу селекторов, а не придумывать специальный класс для этого элемента.
![](https://habrastorage.org/r/w1560/webt/gw/xw/ws/gwxwwsnoow_j3hi9nnrgaarc27y.png)
Смотрим картинку ниже. Следующая запись div.1 > p выберет лишь объекты с классом “2”, div.3 > p соответственно будут получены объекты с классом “4”. На картинке показано, как это работает. Выбираются ближайшие элементы вниз по иерархии.
![](https://habrastorage.org/r/w1560/webt/uc/fe/x8/ucfex8heevuputvqvfaouocrq1c.png)
На страницы были 6 схожих элементов. При медиа запросах, нужно было прятать определенное количество элементов. Не создавать ведь новые классы для каждого объекта. Пришлось воспользоваться псевдоклассом nth-child(). Раньше его использовал лишь обрезанным способом(child(1), child(3), child(4) и т.д.), сейчас была необходимость спрятать все элементы, кроме первых двух. Потратив 5 мин на чтение документации воспользовался nth-child(n+3), тем самым получив нужный мне результат.
![](https://habrastorage.org/webt/ni/g3/h9/nig3h9m7j84og2cl7n1sxfehczs.png)
Еще один пример, как можно взять нужный элемент через группу селекторов, а не придумывать специальный класс для этого элемента.
![](https://habrastorage.org/webt/gw/xw/ws/gwxwwsnoow_j3hi9nnrgaarc27y.png)
Смотрим картинку ниже. Следующая запись div.1 > p выберет лишь объекты с классом “2”, div.3 > p соответственно будут получены объекты с классом “4”. На картинке показано, как это работает. Выбираются ближайшие элементы вниз по иерархии.
![](https://habrastorage.org/webt/uc/fe/x8/ucfex8heevuputvqvfaouocrq1c.png)
Заключение
Я пишу данную статью т.к. мне интересно это, мне интересно разбирать свои проекты. Это дает мне возможность развиваться и закрывать брешь в моих знаниях определенных технологий. Спасибо что прочитали, надеюсь вам понравилось.