Hello! Tell me, for example, I need to stylize the first and the last element of the list.I try to type out according to BEM, I have not used this methodology before.
Is it logical to do these elements by the rules, does it seem to me to be piled up or is it normal ?:
<ul class="top-menu__list">
	<li class="top-menu__item"><a href="" class="top-menu__link top-menu__link_first">Homepage</a></li>
	<li class="top-menu__item"><a href="" class="top-menu__link">Style Demo</a></li>
	<li class="top-menu__item"><a href="" class="top-menu__link top-menu__link_last">Link Text</a></li>
</ul>
  • And through css is not destiny?)) – Curious37 Apr 24 '19 at 06:21

1 Answers 1

Not so, it is more logical to hang the modifier on the item element, and not the link - because the link from its parent is one and does not know anything about what is happening outside.

Although it seems to me that this is a rare case when even with a BAM it is appropriate to use first-child/last-child selectors.Well, because such a modifier cannot appear somewhere in the middle more than once.
  • Mighty Trailer, then “micro” specificity will appear here) .top-menu__item_first a {...}, because I stylize the a links(padding), so that the click area is larger.
    But it seems to me too, it is easier to sample in such cases.
    – Indiana Jones Apr 24 '19 at 02:23
  • Yes, no.For BEM, it is quite normal to assign a class to a link if it is for it that stylization is required.
    And so it’s okay too.
    <li class="top-menu__item top-menu__item_first">
    <a class="top-menu__link top-menu__link_first">Homepage</a>
    </li>


    But personally, I prefer(in most cases) pseudo-selectors.
    – Spirit96 Apr 24 '19 at 06:33
  • Spirit96, Nope.Assign a class to a link is normal, but not in this case.
    The first modifier for item is appropriate, because there are five items in the menu and the first and last among them.:
    .top-menu__item_first .top-menu__link {
      ...
    }

    Here, by the way, you can draw an analogy with the same pseudo-selectors.If we use: first-child - to which element will it be applied?
    – Mighty Trailer Apr 24 '19 at 12:22
  • Mighty Trailer, I looked at various sites for examples of implementation and many do:
    li.class: first-child a {
      ...
    }
    – Indiana Jones Apr 24 '19 at 13:58
  • Mighty Trailer, still a mini-question...maybe I don’t understand it, but what does your sentence mean ?:
    doesn’t know anything about what’s happening outside
    – Indiana Jones Apr 24 '19 at 20:09
  • Mighty Trailer, I agree with you, but only in part.Yes, the _first modifier on the link is not appropriate.A _no-border would fit more. – Spirit96 Apr 24 '19 at 21:12
  • Spirit96, what does _no-border mean? ) ie you just do not agree with the name? – Indiana Jones Apr 24 '19 at 21:36
  • Indiana Jones, well, this is for example(not the best).
    We have different link styles in the first and last element.
    I am sure that the differences are only visual, not functional.
    If we hang a class on a link, and not on a list item, then the irrelevance of the _first name described Dominic.Therefore, we change the class name without reference to numbering.
    – Spirit96 Apr 24 '19 at 21:51
  • Spirit96, I realized ..in fact, I simply remove the extra paddings there — the padding on the first element on the left is zeroed, on the last element on the right(and I try to do everything by e-mail). – Indiana Jones Apr 24 '19 at 22:01
  • Indiana Jones,"knows nothing about what is happening outside" is a concept according to which components should have only the necessary minimum of information about each other.The less a component knows too much, the less it relies(explicitly or implicitly) on This knowledge is all the more independent and easier to modify in the future.
    As a rule, a block/element has information about its descendants(well, because it is its descendants, it controls them), but it should not know anything about the higher level.And even about its brothers(blocks/elements from the same level in the tree), if possible, he better not know.
    – Mighty Trailer Apr 24 '19 at 23:14
  • Mighty Trailer,Spirit96, I'm sorry I covered it with questions...please tell me by design how best to format the CSS file.

    Here I go in order of design:

    .Top-menu__list {...}
    
    .top-menu__item {...}
    
    .top-menu__link {...}


    Suppose I will not add a class to a link, but I will do as above:

    .top-menu__item_first .top-menu__link {...}, or
    .top -menu__item: first-child .top-menu__link {...}

    In terms of design, then register it after .top-menu__item {...} or after .top-menu__link {...}

    It seems like the names should be grouped, it turns out after .top-menu__item {...}, but on the other hand, this refers to the link, then it turns out after .top-menu__link {...}

    Give advice on how to do the"Feng Shui")
    – Indiana Jones Apr 25 '19 at 00:47
  • Indiana Jones, Write as convenient.Grouping by meaning is convenient, grouping for grouping is not. – Spirit96 Apr 25 '19 at 01:00
  • I would write below.I always write any component selectors(nesting, plus and etc.) below the first mentions of all the component parts.It may not, for example, p + p go higher than p - only below. – Mighty Trailer Apr 25 '19 at 01:40
  • Mighty Trailer, good afternoon! Sorry to raise an old topic, I wanted to ask, but what about the grouping of selectors, how would it be better to do it? Here I’ll assume that there are selectors in the .header__title and .header__description stream - they have {line-height: 1, margin: 0}, then later in the .header__search-field stream and .header__search-button - they have the same {line-height : 1, margin: 0}.Where are they clearer to group ?: after they are declared or you can write them before:

    .Header__title,
    .header__description,
    .header__search-field,
    .header__search-button {
    	line-height: 1;
    	margin: 0;
    }
    – Indiana Jones May 11 '19 at 16:19
  • Indiana Jones, I personally write grouped selectors before.

    It is important to note one thing.I group selectors only if the values ​​of the general properties are not just equal, but identically are equal.a coincidence, but follows from the logic of the layout.
    Relatively speaking, I have a logo and a menu and they have the same height of 100px.Having indicated this height for them together, I emphasize that they must always be equal in height and cannot be changed separately for them.
    – Mighty Trailer May 11 '19 at 16:41
  • Mighty Trailer, Thanks, interesting approach, I will take a note) But it seems to me that simply grouping by value is also useful, so as not to prescribe each element, especially if there are quite a few of them on the page. – Indiana Jones May 11 '19 at 17:21