Я пытался использовать не в полной мере такой БЭМ, как его используют и описывают в Яндексе.
В Яндексе сейчас пишут на BEMHTML, они генеряет html/css из BEMJSON. В полной мере - это когда BEM-Tools используются. А когда мы ручками пишем код в канонах БЭМ (и то отступая от них, т.к. не используем мы отдельные css для каждого блока и т.д.) - это как-раз и есть не в полной мере.
Для маленьких сайтов это же ведь не оправдано, правильно?
Оправдано и рекомендовано для любых сайтов. Удобнее так писать, тут нет трудностей. Править потом легче. Развивать - легче, а вы не знаете что может вырасти из вашего маленького сайта.
Это я уже и сам понял, но, что я делаю не правильно?
Существует два БЭМ:
- верстка независимыми блоками
- верстка абсолютно независимыми блоками
А у вас же - пока совсем не БЭМ. Почему? Посмотрим какие
требования выдвигаетзадачи решает БЭМ:
Источники: сказав(ла):
-
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
:
- видео:
- слайды с субтитрами:
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
- ранний подклад на пЯТЬнице:
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
- поздний на Я.Субботнике:
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
- Первое официальное описание БЭМ (2 сентября 2011 года): Что такое БЭМ? :
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
- Актуальное официальное описание БЭМ: Что такое БЭМ? :
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
- Разделение кода на части, разделение ответственности
- Повторное использование кода
- Использование кода, не зная деталей его реализации
- Масштабируемость, возможность поддержки, развития, роста проекта на многие годы вперёд
Решением этого стала БЭМ-методология. Краеугольным камнем её является понятие Независимого Блока.
Проблемой в CSS выступает каскад.
БЭМ - способ сделать каскадные таблицы стилей НЕкаскадными
БЭМ.Клуб на Я.рушке - Независимый блок;https://clubs.ya.ru/bem/replies.xml?item_no=4 сказав(ла):
Независимый блок (НБ или просто блок) это самодостаточный элемент страницы, который при перемещении в другое место на странице или на другую страницу не теряет своей самодостаточности.
БЭМ.Клуб на Я.рушке - История создания БЭМ (часть первая);https://clubs.ya.ru/bem/replies.xml?item_no=1398 сказав(ла):
Правила независимости блока:
1) для описания элемента используется class, но не id
2) каждый блок имеет префикс
3) в таблице стилей нет классов вне блоков
Вёрстка независимыми блоками - это изначальный, самый первый БЭМ: UAWeb2007: Виталий Харисов: "Вёрстка независимыми блоками":
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
Дальше он развился в Абсолютно-Независимые-Блоки, изначально это было ради производительности, но потом так стали делать всё потому что удобно. Хотя ранее считали его избыточным, делили блоки на простые и составные и даже сейчас в Яндексе спорят о необходимости доводить АИБ до самых нижних нод.
В общем правоверным вариантом сейчас считается исключительно АИБ.
Но т.к. БЭМ - гибкая методология, то каждый адаптирует её по своему.
Можно совмещать АИБ и Независимые блоки с каскадом до элементов.
Что важно!
- Каскад должен использоваться только для элементов, не для блоков! Т.е. навешивать стили каскадом можно лишь на те сущности что не планируется куда-то скопировать, переместить, использовать отдельно от родительского блока.
- Не должно быть конфликтов стилей. Т.е. не должно быть стилей с одинаковыми названиями для разных элементов, что могут наложится. Или все имена классов - уникальные, или прячутся за каскадом. Остальное - стили вне блоков.
Где у вас ошибки?
1) Блоки не является независимыми по настоящему.
- Он может развалится если вы попробуете перенести его без изменений в другой проект.
- Он очень сильно зависит от изначальных установок. Не просто от окружения, а от изначальных установок.
Смотрим что у него внутри:
- .borr_caption - требует {margin: 0} у базовых элементов - заголовков. Нестандартное поведение, в общих стилях у заголовков могут быть/есть/должны быть отступы.
- .benefits - требует {margin: 0;} и {list-style: none;}
- ну вы поняли...
2) Есть стили для элементов внутри блока, имена которых могут потом вызвать конфликты. Стили не привязанные только к этому блоку, ни каскадом ни именованием. Вы создали много отдельных классов для отдельных элементов и написали им стили. Стили для элементов, того что находится внутри блоков. Эти стили могут с чем-то конфликтовать, могут быть перезаписаны...
самое важное! - могут использоваться где угодно! Их страшно трогать! Это таки "стили вне блоков".
Как я размышляю: "они все одинаковые за исключением ширины, соответственно будет класс .borr который описывает все правила за исключением ширины и будет модификатор, т.е. класс .borr_middle или .borr_big, которые определяют его ширину соответственно, а так же может переопределить некоторые другие правила(у меня .borr_big margin переопределяет)". Так вот, мне надо просто модификаторы .borr_middle или .borr_big писать так:
.borr.borr_middle
.borr.borr_big
а не так как я написал, что бы стили не зависели от каскада или я вообще совсем не правильно мыслю и делаю? Или может просто кажется не правильным из-за того что не понятно где блок, а где модификатор?
Смотрите:
-
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
-
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
Надеюсь стало понятней.
Чтоб вникнуть в идею, очень рекомендую ознакомится с:
1) Доклад Харисова c Я.Субботника в Минске 2012 "История создания БЭМ. Кратко, сбивчиво и неполно"
- Видео:
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
- Слайды:
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
Многое станет понятно. Именно видео посмотрите.
2) Сравнение на конкретном примере, классического подхода к вёрстке и БЭМ:
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
(смотрите начиная с 18 слайда).
Сколько получает в месяц по вашему мнению среднестатистический верстальщик в вакууме
От 600 грн (такая ЗП была у коллеги в её родном маленьком городке, пока она не приехала в Харьков).
До 6000$ (
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
)
новичок - только что прибывший на работу
Junior в небольшой компании в Харькове: 300-400$.
В Минске - аналогично.
В Киеве, Москве - затрудняюсь сказать, но больше.
Скорее "уровня middle", да? Потому что можно иметь и 10 лет опыта, но работать хреново. Мы говорим о человеке способном работать самостоятельно, качественно и знающем хотя-бы jQuery.
В небольших компаниях в Харькове - от 750-850$
В Минске - аналогично.
В крупных компаниях: от 1000-1300$ + куча плюшек типа длинного отпуска, мед. страховки, оплаты спорта и еды и т.п.
В Киеве - больше.
ну и проработавший 5 лет.
Можно 5-лет проработать и не знать что такое контекст форматирования блока. Поэтому условимся что говорим о senior'ах.
Всё что выше.
Смотря в каком городе и в какой компании.
Я не разговаривал на эту тему с коллегами-сеньёрами
но исходя из
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
, вакансий в инете и предложений HR, это ЗП в районе 1800-2000$.
Для начинающего верстальщика, сколько времени и денег в среднем занимает верстка одной главной страницы, к примеру простой:
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
День.
$10 час * 8 часов = 80$
и сложной:
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
Два дня.
Это не сложная страница, а обычная.
$10 * 16 = $160
А так же меня интересует сколько времени и денег, опять же для начинающего верстальщика занимает верстка простого проекта, скажем главная страница:
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
,
ну и + 3-5 внутренних страниц.
1 день титулка + по 1/4-1/3 дня на внутряк.
Тут мы ещё сталкиваемся с ритмом разработки, много времени на вёрстку вам всё-равно не дадут.
Опытный потратит то же время что и джуниор: день на простую, два - на обычную (если его не торопят, он может и быстрей). Только качество вёрстки будет совершенно другим и за ним не нужно будет исправлять, и переделывать в ходе развития и поддержки.
, но как всегда есть вопросы.
