Jump to content

Именнование по БЭМ


Endorphin
 Share

Recommended Posts

https://github.com/AlekseyPn/alekseypn.github.io/blob/master/index.html

вот есть верстка, разметку делал по свеже изученым материалам по разметке БЭМ, кто уже давно пользуется даннлй методологией оцените, интересно ваше мнение, и правильно ли я понял как нужно размечать по БЭМ, можете потыкаться по репозитозиторию, там есть еще несколько файлов. Заранее спасибо.

Link to comment
Share on other sites

Блин, я конечно уважаю все эти методологии, но...

Вот если прикрутить админку к вашей вёрстке,
блок `class="about"` явно должен быть редактируемый. Как пользователь нафигачит все эти классы? 

Хотя вопрос всё равно не об этом) 

Я другое хотел спросить, где материал изучали? :-) 

Link to comment
Share on other sites

Люблю бэм и тех кто его использует^_^. Замечу на счет модификаторов, практика показала что лучше использовать их не для элементов а для блока. Таким образом код чище и легче приплясывать в препроцессорах, как для штмл, так и для цсс.

Link to comment
Share on other sites

В 25.11.2016 в 15:27, npofopr сказал:

Блин, я конечно уважаю все эти методологии, но...

Вот если прикрутить админку к вашей вёрстке,
блок `class="about"` явно должен быть редактируемый. Как пользователь нафигачит все эти классы? 

Хотя вопрос всё равно не об этом) 

Я другое хотел спросить, где материал изучали? :-) 

Насчет админки да, такие вещи обсуждались на учебе что у пользователя возникнут проблемы при внесении контента, ибо не каждый контент менеджер или пользователь справится с этим :) ну я учусь пока, так что в бою буду размышлять по другому ибо опыт есть по работе с cms, а материал с ресурса htmlacademy. Их продвинутый интенсив.

В 25.11.2016 в 18:19, by chris сказал:

Люблю бэм и тех кто его использует^_^. Замечу на счет модификаторов, практика показала что лучше использовать их не для элементов а для блока. Таким образом код чище и легче приплясывать в препроцессорах, как для штмл, так и для цсс.

Насчет любви сарказм? :D Спасибо за совет, учту. Насчет модификаторов в данной верстке, критерий на обучении вложенность не более 1 селектора, допускается в крайнем случае. Поэтому модификатор у элемента. Интересно ваше мнение по поводу правильно ли я понял концепцию именования. И не наделал ли ерунды всякой :D

Edited by Endorphin
Link to comment
Share on other sites

6 часов назад, Endorphin сказал:

Поэтому модификатор у элемента. Интересно ваше мнение по поводу правильно ли я понял концепцию именования. И не наделал ли ерунды всякой :D

Тогда встает вопрос. Как вы понимаете классы .reviews и .btn в данной разметке - 

 <article class="about__reviews reviews">
 ...
 <a href="#" class="reviews__write btn">Написать</a>
 ...

 

Link to comment
Share on other sites

57 минут назад, by chris сказал:

Тогда встает вопрос. Как вы понимаете классы .reviews и .btn в данной разметке - 


 <article class="about__reviews reviews">
 ...
 <a href="#" class="reviews__write btn">Написать</a>
 ...

 

Ну по поводу btn это класс для кнопок в котором будет прописана общая стилизация для всех кнопок в макете, ибо они идентичны, по бэму рассказывали такой прием имеет место быть, чтобы не копипастить код для нее несколько раз, т.е у меня в less есть блок button, в котором будут все кнопки прописаны. .reviews сделал для того чтобы я смог отзывы стилизовать под тип слайдера. Нажал кнопочку следующий отзыв выехал. Как то так. Скажите свое мнение о данном блоке, если есть ошибка поправьте.

Link to comment
Share on other sites

4 часа назад, Endorphin сказал:

Ну по поводу btn это класс для кнопок в котором будет прописана общая стилизация для всех кнопок в макете, ибо они идентичны, по бэму рассказывали такой прием имеет место быть, чтобы не копипастить код для нее несколько раз, т.е у меня в less есть блок button, в котором будут все кнопки прописаны. .reviews сделал для того чтобы я смог отзывы стилизовать под тип слайдера. Нажал кнопочку следующий отзыв выехал. Как то так. Скажите свое мнение о данном блоке, если есть ошибка поправьте.

Этот прием называется миксами. Пока тут ошибок нет, но они могут возникнуть при внедрении стилей цсс. Только после пуша в репозиторий кода с правилами оформления, можно делать окончательные выводы о понимании бэм.
 

Link to comment
Share on other sites

12 часа назад, by chris сказал:

Этот прием называется миксами. Пока тут ошибок нет, но они могут возникнуть при внедрении стилей цсс. Только после пуша в репозиторий кода с правилами оформления, можно делать окончательные выводы о понимании бэм.
 

Спасибо. Хорошая новость, запомнил про миксы. Как сделаю пуш со стилями, покажу.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By stelmah.taganrog
      Сделал для себя учебную верстку по бесплатному макету. Вопросы на которые, возможно, мне смогут дать ответы более опытные верстальщики:
      - Постарался соблюсти принцип БЭМ для именования классов. Верно ли я применяю?
      - К сожалению, не удалось сделать, чтобы макет абсолютно соответсвовал PixelPerfect, особенно это заметно в тексте. Тестировал в Chrome 55.0.2883.87 (Windows 10). Подскажите на примере какого-нибудь блока в чем я делаю ошибки
      - Так же хотелось бы прочесть любую конструктивную критику

      Небольшое отступление, добавлю обязательно еще мобильный вариант и слайдеры, это в процессе. Хотелось бы узнать ошибки на том этапе, что выполнен.

      Исходники https://github.com/oleg-tgn/html-template-beautiful-things
      Демо https://oleg-tgn.github.io/html-template-beautiful-things/
    • By Andrew_007
      Доброго времени суток!
       
      Осваиваю верстку по методологии БЭМ. Не совсем понятно как делать HTML разметку. Как я понимаю нужно именовать классами все теги и при этом все блоки состоят из элементов, дальше все элементы состоят из блоков, далее эти блоки состоят из элементов, далее эти элементы состоят из блоков и так далее?
      То есть непонятно как определить где блок а где элемент, согласно вложенности?
      Вот так например правильно? http://codepen.io/Andre_w/pen/EaLVJW?editors=100
       
      Правильно я понял разметку по БЭМ или не совсем?
    • By xsladfs
      Доброго времени суток.
      Подскажите пожалуйста, соответствуют ли имена классов методологии БЭМ ?
      <div class="footer">    <div class="footer__row_1">        <div class="footer__row_1_column">            <h4 class="footer__row_1_column_title">Lacus interdum</h4>            <ul class="footer__row_1_column_list">                <li class="footer__row_1_column_list_item"><a href="#"></a></li>                <li class="footer__row_1_column_list_item"><a href="#"></a></li>                <li class="footer__row_1_column_list_item"><a href="#"></a></li>                <li class="footer__row_1_column_list_item"><a href="#"></a></li>            </ul>        </div>    </div></div>
    • By binomer
      Почитал про БЭМ в очередной раз. И задумался над одной вещью. Пусть у нас есть несколько блоков на странице. У каждого блока есть заголовок. Заголовки одинаковые. То есть их можно описать одними и теми же CSS-правилами.
       
      С одной стороны, логично заголовки обозначать как элементы блока. А с другой, так как они одинаковые, можно выделить в отдельный блок. Кто что думает по этому вопросу?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy