Для 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%)
Мы привыкли использовать width, height как 100%, и это понятно, все для адаптива, с помощью width, можно добиться схожего результата как и с отрицательными маржинами. Просто дайте размер потомку больше своего родителя(например, width: 130%)
Структура css по БЭМ
Это, наверно, было самое сложное для меня.
Эта картинка хорошо демонстрирует мой проект, да и вообще любой проект. Когда ты пишешь первую сотню строк, то все кажется простым, и ты не замечаешь проблем. Так ты дописываешь проект, длиной в 900 строк и неожиданно для себя, решил пролистать файлик, ну или добавить медиа запросы.
Ты пишешь стили для элемента в media, смотришь на сайт и не понимаешь, почему стили не работают, как требуется. В поисках проблемы ты потратил уже 15 минут, ты проверил таски в gulp и пролистал скомпилированный файл css.
Случайно, случайно … ты находишь проблему в каскадной таблице стилей, а точнее в способе наложения стилей на элементы. В самом начале моего пути в web, я конечно же читал о том, что у селекторов есть разный приоритет применения. Если кратко, то за обычный(div, ul, a, p и т.д.) селектор -1 бал, за класс-10, за идентификатор 100.
Проверив внимательно все вложенности, я все же нашел ошибку. Оказывается нужно и за вложенностью элементов следить, и придавать этому не последнее значение.
Сюда можно отнести и структуру файла css(sass). Есть Блок “portfolio”, в нем куча элементов по типу “portfolio__*”, но два класса в этой вложенности лишние, на мой взгляд.
Это был первый проект в котором я пытался строго придерживаться BEM, но не потратил и минуты на проектирование в самом начале, а придумывал классы на ходу, это привило к тому, что поддержка дается с трудом.
А вот это, на мой взгляд, хороший пример BEM’a
Эта картинка хорошо демонстрирует мой проект, да и вообще любой проект. Когда ты пишешь первую сотню строк, то все кажется простым, и ты не замечаешь проблем. Так ты дописываешь проект, длиной в 900 строк и неожиданно для себя, решил пролистать файлик, ну или добавить медиа запросы.
Ты пишешь стили для элемента в media, смотришь на сайт и не понимаешь, почему стили не работают, как требуется. В поисках проблемы ты потратил уже 15 минут, ты проверил таски в gulp и пролистал скомпилированный файл css.
Случайно, случайно … ты находишь проблему в каскадной таблице стилей, а точнее в способе наложения стилей на элементы. В самом начале моего пути в web, я конечно же читал о том, что у селекторов есть разный приоритет применения. Если кратко, то за обычный(div, ul, a, p и т.д.) селектор -1 бал, за класс-10, за идентификатор 100.
Проверив внимательно все вложенности, я все же нашел ошибку. Оказывается нужно и за вложенностью элементов следить, и придавать этому не последнее значение.
Сюда можно отнести и структуру файла css(sass). Есть Блок “portfolio”, в нем куча элементов по типу “portfolio__*”, но два класса в этой вложенности лишние, на мой взгляд.
Это был первый проект в котором я пытался строго придерживаться BEM, но не потратил и минуты на проектирование в самом начале, а придумывал классы на ходу, это привило к тому, что поддержка дается с трудом.
А вот это, на мой взгляд, хороший пример BEM’a
Длинные классы BEM
Об этой проблеме я читать в одной из статьи посвященной BEM, но сам столкнулся впервые с этим. Очень напоминает проблемы с bootstrap, в нем тоже были… есть длинные классы. Как можно обойтись минимальным количеством классов?
Это default btn.
А это уже модифицированные кнопки…
Это default btn.
А это уже модифицированные кнопки…
Сложные селекторы
В учет того, что писать приходилось по BEM, то отсюда вытекали некоторые осложнения в проекте. Про длинные классы я уже написал, вот еще один случай.
На страницы были 6 схожих элементов. При медиа запросах, нужно было прятать определенное количество элементов. Не создавать ведь новые классы для каждого объекта. Пришлось воспользоваться псевдоклассом nth-child(). Раньше его использовал лишь обрезанным способом(child(1), child(3), child(4) и т.д.), сейчас была необходимость спрятать все элементы, кроме первых двух. Потратив 5 мин на чтение документации воспользовался nth-child(n+3), тем самым получив нужный мне результат.
Еще один пример, как можно взять нужный элемент через группу селекторов, а не придумывать специальный класс для этого элемента.
Смотрим картинку ниже. Следующая запись div.1 > p выберет лишь объекты с классом “2”, div.3 > p соответственно будут получены объекты с классом “4”. На картинке показано, как это работает. Выбираются ближайшие элементы вниз по иерархии.
На страницы были 6 схожих элементов. При медиа запросах, нужно было прятать определенное количество элементов. Не создавать ведь новые классы для каждого объекта. Пришлось воспользоваться псевдоклассом nth-child(). Раньше его использовал лишь обрезанным способом(child(1), child(3), child(4) и т.д.), сейчас была необходимость спрятать все элементы, кроме первых двух. Потратив 5 мин на чтение документации воспользовался nth-child(n+3), тем самым получив нужный мне результат.
Еще один пример, как можно взять нужный элемент через группу селекторов, а не придумывать специальный класс для этого элемента.
Смотрим картинку ниже. Следующая запись div.1 > p выберет лишь объекты с классом “2”, div.3 > p соответственно будут получены объекты с классом “4”. На картинке показано, как это работает. Выбираются ближайшие элементы вниз по иерархии.
Заключение
Я пишу данную статью т.к. мне интересно это, мне интересно разбирать свои проекты. Это дает мне возможность развиваться и закрывать брешь в моих знаниях определенных технологий. Спасибо что прочитали, надеюсь вам понравилось.
