kizu / bemto

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

Add a possibility to set global classes without prefix. #80

Closed lacedon closed 7 years ago

lacedon commented 8 years ago

I added new parameter global_classes_prefix to settings. If this parameter contain some string then all classes that have that string at the beginning will be added without prefix and this string.

kizu commented 8 years ago

I'm not sure this should be fixed this way. Right now I'm thinking of reverting the previous behaviour for all classes after the first, as there are a lot of issues (not only with prefix). I'll see if it could be done as a minor version, or as a major fix.

lacedon commented 8 years ago

I think it could be useful if prefix's added to not only first class.

On our project we've never had two block class for one tag

+b.block-1.block-2
<div class="b-block-1 b-block-2"></div>

But we use a possibility to add element class and block class for one tag

+b.global-block
    +b.__item.local-block
<div class="b-global-block">
    <div class="b-global-block__item b-local-block">
</div>

Do I understand right if it would parse to:

<div class="b-global-block">
    <div class="b-global-block__item local-block">
</div>

Maybe we can add some flag if add or not prefix?

kizu commented 8 years ago

I'm thinking of using the postfix element context syntax to mark up the blocks that need to have prefix (those that should be treated just as simple classes), so

+b.block-1.block-2

would be equal to

.b-block-1.block-2

while

+b.block-1.block-2__

would be equal to

.b-block-1.b-block-2

However, that would also mean that the nested items would inherit the second block in that case, which is not something that would be always wanted I guess :)

I'm trying to think of any other way to differentiate simple classes from BEM classes only using the syntax available for classnames, but can't find anything good atm.

kizu commented 7 years ago

In bemto.pug@2.1.0 I've added a way to setup the prefixes using an object, with it you can add a global- prefix (or any other name for it), so you could have those classnames without prefix at all. See this part of Readme on how to use this.