I have an object called .list {} that has an --inline and --stacked modifier I also have classes that extend the .list {} class called .toolbar, .menu, and .tabs. However, I noticed that twitter bootstrap keeps these as classes as modifiers rather than extending classes like I do. Is the method I am doing wrong, and what would you suggest?
An extension is more like a sub-module, so I think that Bootstrap do it correctly, as 'toolbar', 'menu', and 'tabs' aren't sub-modules, but different types of lists.
I am not finding much on "sub-modules" even in that article. The one problem I see with keeping these as modifiers is that each can have additional modifiers and I am not sure that fits in the B.E.M. structure.
For example, currently I have
.list { } and .tab { } which inherits the properties of list.
tab { } has tab--top and tab--bottom.
If I did it this way, can I have a sub modifier like
Maybe I've caused a little bit of confusion with the use of "sub-modules", as Harry just calls them "elements" (which are descendants of the "block").
Also, I think I'm a little confused, as you are using modifier syntax, and claiming that you are actually extending classes?
Would you mind showing your code?
In terms of list--tab--top I think you are getting a little confused, as "tab" is the modifier, but "top" is an element (or sub-module), so I think this is what you would be after: list--tab__top.
Each class below list requires the list object to appear in the class attribute. The reason is, List contains all the main code, like the clearfix, changing the list type, setting the padding, etc. It was setup to be DRY.
list
list--inline
list--block
menu
tabs
tabs--top
tabs--bottom
toolbar
Bootstrap Hierarchy
Bootstrap has everything contained in one object. For example, --tabs would be a modifier.
The problem
I know you suggested I follow the bootstrap way of doing this, but really each could be separate objects that inherit the style from list (sort of like Nicole Sullivans idea of a "skin") The second problem is that classes like tab have their own modifiers like top and bottom.
Is my thinking correct on this? I just dont know if requiring extra classes follows the oocss and bem methodologies. But I can honestly see some of these classes getting more modifiers in the long wrong.
I still don't know if I follow you 100%, but I think this is what you're after:
You would have all of the list styling in .list and the styles that make it look like tabs in .list--tabs. You would then use the following:
<ul class="list list--tabs">...</ul>
This means that the ul has all the styling of .list with the extra changes from .list--tabs. Also, make sure that .list--tabs comes after .list in your style sheet so that the cascade does its thing (naturally taking care of any styles that are being overridden).
If the "tabs" modifier has its own elements, that only relate to "tabs", then I would use the following (on the relevant element/s):
<div class="list--tabs__top">...</div>
So basically, that is saying that you have a modified list, with a sub-element of "top". Also, you can clearly see that this "top" element only applies to the "tabs" modification of .list.
This way, you minimize the replication of styles, and use what you called "skins" to modify core styles.
I think that my reasoning when doing this originally was correct. Here is an interesting read. I believe the same person wrote inuit.css. I have no idea why bootstrap is making --pills and --tabs modifiers and trapping additional options in. Tabs should be an object from the .nav abstraction with its own modifiers for positions.
I have an object called .list {} that has an --inline and --stacked modifier I also have classes that extend the .list {} class called .toolbar, .menu, and .tabs. However, I noticed that twitter bootstrap keeps these as classes as modifiers rather than extending classes like I do. Is the method I am doing wrong, and what would you suggest?
An extension is more like a sub-module, so I think that Bootstrap do it correctly, as 'toolbar', 'menu', and 'tabs' aren't sub-modules, but different types of lists.
Thank you for the advise. It is much appreciated.
Can you also give me an example of sub-modules for future reference.
Rather than me doing it, check out this in-depth article: http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
I am not finding much on "sub-modules" even in that article. The one problem I see with keeping these as modifiers is that each can have additional modifiers and I am not sure that fits in the B.E.M. structure.
For example, currently I have
.list { } and .tab { } which inherits the properties of list.
tab { } has tab--top and tab--bottom.
If I did it this way, can I have a sub modifier like
list list--tab list--tab--top?
I just want to make sure this is correct?
Maybe I've caused a little bit of confusion with the use of "sub-modules", as Harry just calls them "elements" (which are descendants of the "block").
Also, I think I'm a little confused, as you are using modifier syntax, and claiming that you are actually extending classes?
Would you mind showing your code?
In terms of
list--tab--topI think you are getting a little confused, as "tab" is the modifier, but "top" is an element (or sub-module), so I think this is what you would be after:list--tab__top.Current Hierarchy
Each class below list requires the list object to appear in the class attribute. The reason is, List contains all the main code, like the clearfix, changing the list type, setting the padding, etc. It was setup to be DRY.
Bootstrap Hierarchy
Bootstrap has everything contained in one object. For example, --tabs would be a modifier.
The problem
I know you suggested I follow the bootstrap way of doing this, but really each could be separate objects that inherit the style from list (sort of like Nicole Sullivans idea of a "skin") The second problem is that classes like tab have their own modifiers like top and bottom.
Is my thinking correct on this? I just dont know if requiring extra classes follows the oocss and bem methodologies. But I can honestly see some of these classes getting more modifiers in the long wrong.
I just wanted to add the markup would look like this for the current solution
If I make tabs as a modifier, it would appear like this to define its position
Thanks again for your help. I do appreciate it.
I still don't know if I follow you 100%, but I think this is what you're after:
You would have all of the list styling in
.listand the styles that make it look like tabs in.list--tabs. You would then use the following:This means that the
ulhas all the styling of.listwith the extra changes from.list--tabs. Also, make sure that.list--tabscomes after.listin your style sheet so that the cascade does its thing (naturally taking care of any styles that are being overridden).If the "tabs" modifier has its own elements, that only relate to "tabs", then I would use the following (on the relevant element/s):
So basically, that is saying that you have a modified list, with a sub-element of "top". Also, you can clearly see that this "top" element only applies to the "tabs" modification of
.list.This way, you minimize the replication of styles, and use what you called "skins" to modify core styles.
Does that make sense?
Yes. Thank you
I think that my reasoning when doing this originally was correct. Here is an interesting read. I believe the same person wrote inuit.css. I have no idea why bootstrap is making --pills and --tabs modifiers and trapping additional options in. Tabs should be an object from the .nav abstraction with its own modifiers for positions.
http://csswizardry.com/2011/09/the-nav-abstraction/