Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS oocss / b.e.m question

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #42794
    fuqlibs
    Member

    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?

    #124998
    fuqlibs
    Member

    Thank you for the advise. It is much appreciated.

    #124999
    fuqlibs
    Member

    Can you also give me an example of sub-modules for future reference.

    #125145
    fuqlibs
    Member

    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?

    #125155
    fuqlibs
    Member

    # 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.

    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.

    #125157
    fuqlibs
    Member

    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.

    #125162
    fuqlibs
    Member

    Yes. Thank you

    #125385
    fuqlibs
    Member

    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/

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.