bem / project-stub

deps
314 stars 199 forks source link

mods to use -- #35

Closed sgraham785 closed 9 years ago

sgraham785 commented 10 years ago

the bem methodology uses blockelem--mod but the engine uses blockelem_modName_modValue

how can I configure the engine to use the --mod?

since I have a css framework already defined that way, this would be nice to do

tadatuta commented 10 years ago

actually BEM methodology uses block__elem_modName_modValue and block__elem--mod is what Harry Roberts decided to use and which is much less flexible: there's no way to express different values for the same modifier which is quite common (different size, theme, etc). and also we need to store knowledge about modifiers in some data structure which is again much easier using key-value.

so i'd suggest you to switch to block__elem_modName_modValue but if it's really impossible for you, i can help to configure the platform. but please tell if it's really so and what parts of the platform do you use (BEMHTML, i-bem.js, etc)?

sgraham785 commented 10 years ago

I should have stated "my bem methodology"... you make a valid point and I will look into changing my structure, to follow the standards closer. can you point me to a list of commonly uses modNames/ key-values?

also after thinking about this i still prefer the -- to separate the mods, even if keeping the name and value block__elem--modName_modValue

so i would like to know how to change just the prefixed mod _ to -- while keeping the second intact as is

sgraham785 commented 10 years ago

ah i forgot to mention that I am using BEMHTML & BEMJSON

tadatuta commented 10 years ago

Ok, it seems that you use almost the whole stack.

So you need to redefine:

  1. BEMHTML default templates to change separator
  2. i-bem.js to use you notation
  3. config level to make bem-tools understand new filenames

For (1) look for MOD_DELIM at https://github.com/bem/bem-core/blob/v1/common.blocks/i-bem/i-bem.bemhtml For (2) https://github.com/bem/bem-core/blob/v1/common.blocks/i-bem/i-bem.vanilla.js#L34 https://github.com/bem/bem-core/blob/v1/common.blocks/i-bem/i-bem.vanilla.js#L314 and https://github.com/bem/bem-core/blob/v1/common.blocks/i-bem/__internal/i-bem__internal.vanilla.js#L13 For (3) https://github.com/bem/bem-tools/blob/dev/lib/levels/nested.js (you need to create your own level type which will inherit from nested and redefine just modifier separator).

But it'd be a bit complicated because right now the code is written assuming that modifier separators are the same on both sides.

can you point me to a list of commonly uses modNames/ key-values?

i'm not sure if such a list exists but there are really a lot of them. e.g. size, theme, type and i'd say the most of modifiers are rather key-value then just key (actually single key modifiers are in fact boolean with a value of true which can be omitted).

sgraham785 commented 10 years ago

great thanks!

Is there somewhere that I can ask questions about implementation easier than in this Issue Comment thread?

I have a few other questions about writing specific attr in elements in BEMJSON e.g. as well as creating link inline on content e.g. "Click here" making here a link using the BEMJSON

I am sure I will have more as I dig deeper, so it would like to be able to ask without using github

tadatuta commented 10 years ago

Is there somewhere that I can ask questions

if you feel your question is useful for some other guys you can ask it in our FB: https://www.facebook.com/groups/bem.info/ or on http://stackoverflow.com with bem tag.

If it's something just about your own feel free to mail me: tadatuta@yandex-team.ru

specific attr in elements in BEMJSON e.g. ×

{ block: 'b', content: { elem: 'e', attrs: { '×': '×' } } }

creating link inline

{ content: ['Click ', { block: 'link', url: '#somewhere', content: 'here' }] }

or ugly way:

{ content: 'Click <a href="#somewhere">here</a>' }