N
N
nublog2014-10-03 05:55:57
HTML
nublog, 2014-10-03 05:55:57

Reflections on BEM. Duplicate files or treat element as a block?

I'm still learning about BEM.
Consider a simple search form. From the BEM point of view, this form is a block consisting of two, for example, elements: an input field and a button. The specs also say that a block is a "brick" and an element is a part of a block that has no meaning outside of that block. Thus, the file structure of the search form looks like this:

blocks/
  search/
    search.xsl
    search.css
      __input/
        search__input.xsl
        search__input.css
      __button/
        search__button.xsl
        search__button.css

Now let's move on to the authorization block, which contains the following elements: input fields (login and password) and a button.
blocks/
  login/
    login.xsl
    login.css
      __input/
        login__input.xsl
        login__input.css
      __button/
        login__button.xsl
        login__button.css

As a result, we have, say, two css files (search_input and login_input) with identical content.
Question: does it make sense to duplicate files? After all, you can consider the input field not as an element, but as a separate block. If necessary, prescribe a modifier. Of course, these are all examples; The same applies to other elements: headings, lists, and so on. In the modifiers, we already write, so to speak, the original styles - how some elements differ from others. Something like this...
So the structure will look like this:
blocks/
  input/
    input.xsl
    input.css
      _type/ <!-- При необходимости вешаем модификаторы -->
        input_type_login.xsl
        input_type_login.css
        input_type_search.xsl
        input_type_search.css
  button/
    button.xsl
    button.css
      _type/ <!-- При необходимости вешаем модификаторы -->
        button_type_login.xsl
        button_type_login.css
        button_type_search.xsl
        button_type_search.css

And there are no "search" or "login" folders, no duplicates.
Perhaps I initially misunderstood the methodology? Perhaps that's all it is? I repeat while I deal with the file structure and classes on a test example in manual mode. After I understand all the basics, I will switch to a full-fledged BEM.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
N
nublog, 2014-10-03
@nublog

Found the answer. Such a division into elements exists and is called bam-components.
en.bem.info/libs/bem-components/v2

V
Valentine, 2014-10-03
@gephaest

I'm not very familiar with BEM, but I would use mixins from LESS.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question