search

kizu / bemto

Smart mixins for writing BEM in Pug
439 stars 66 forks source link

Incorrect tag generator for href elements #90

Closed lfoma closed 7 years ago

lfoma commented 7 years ago

When HTML tag does not specified for node, generator will choose div tag by default and this is ok. But if node had some context, default may change. For elements, who had href attribute, default tag is span, what is wrong.

As described in HTML spec, a tag may wrap blocks, tables and other elements.

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links). https://www.w3.org/TR/html5/text-level-semantics.html#the-a-element

Its pretty often to wrap photo or entire div in link.

Example:

  +b.button
   +e.link(href='/some')
     +e.wrapper

Will produce:

<div class="button">  
 <a href="/some" class="button__link">
   <span class="button__wrapper"></span>
 </a>
</div>

Its wrong to suggest that href children must be a string, because they dont usually. And its unpredictable behavior that seems like a bug and hard to catch.

kizu commented 7 years ago

default tag is span, what is wrong

This is indented behaviour of bemto, made to prevent cases where the inline by default link (<a> tag have default display: inline) would have block-level children which could break things. And those are the most cases — while it is possible to use links to wrap block-level element, it is a rarer case.

Also, if you're following BEM, you should always make the blocks and elements independent of the html elements they're used on, so you should always use local reset of a display property. If you'd do it, then it wouldn't matter which element — div or span would be inside links.

Finally, if we'd change it, it would be a breaking change, so it could happen not earlier than in 2.0.0. However, as stated above, I don't see this as an issue and don't plan any changes to how it works.

That said, there is already a build-in (but no documented, so something could change there) way of changing this behaviour for your project:

- bemto_tag_metadata.a.type = 'block';

This would make all links to behave as if they were block level.