Login with github

Not Found

This page doesn't exists.

Latest issues

$ npm install npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: 'puml-link@0.0.1', npm WARN EBADENGINE required: { node: '0.10' }, npm WARN EBADENGINE current: { node: 'v16.1.0', npm: '7.11.2' } npm WARN EBADENGINE } npm WARN deprecated uuid@2.0.3: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. npm WARN deprecated node-uuid@1.4.0: Use uuid module instead npm WARN deprecated xmldom@0.1.31: Deprecated due to CVE-2021-21366 resolved in 0.5.0 npm WARN deprecated browserslist@1.3.6: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools. npm WARN deprecated csswring@4.2.3: Package no longer supported. Contact support@npmjs.com for more info. npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue npm WARN deprecated coa@1.0.3: Please upgrade to 1.0.4 for node 0.10, 0.12, or to 2.0+ for node 4+ npm ERR! code ERR_SOCKET_TIMEOUT npm ERR! errno ERR_SOCKET_TIMEOUT npm ERR! request to https://registry.npmjs.org/vow/-/vow-0.4.16.tgz failed, reason: Socket timeout

If some help tu me to solve this error. Greeting for your working.

There is a common scenario that keeps coming up when I'm designing blocks with complex layouts, which is the need for what I would call "wrapper elements" (and I mean BEM elements). I'd appreciate any help:

Look at the above picture. This is a "course-card" block. Among its elements, there are these two:

.course-card__duration
.course-card__level

Pretty straight-forward so far. Now, in order to achieve the layout that you see there, I would need another element to wrap those two, and its CSS would look something like this:

.course-card__? {
   display: flex;
   justify-content: space-between;
}

Now, the question is, what should such an element be called according to BEM standards?! It's an element that doesn't serve any semantic purpose, it's just there for layout purposes. I could think of the following options:

- course-card__level-and-duration-wrapper (which obviously looks horrible!)
- course-card__basic-info (still not ideal)
- you tell me?

This is not a rare case. I encounter one of these "wrapper element" cases in almost every block I'm implementing. In this same block, you can see in the picture that there is a need for another wrapper element that wraps instructor-avatar and instructor-name. I also couldn't find a satisfactory answer to this question, neither in en.bem.info nor in Stack Overflow or anywhere else, really.

  1. Should we add a "wrapper" or "container" suffix to the names of these kinds of elements?
  2. Should their names be as semantic as possible? For instance "basic-info" in the first example, and "instructor-info" in the second example? And we should avoid words like "wrapper" and "container" as much as possible?
  3. Are there any other guidelines and conventions in general to deal with these kinds of situations?

So, I'd appreciate any guidance. Thanks in advance.

4 years ago

Hi

Hi I am Kylie Deolla You can call me Kylie Nice to meet you guys https://www.playqiu.net/

<div class="block1">
    <div class="block2">
        <div class="block1__element"></div>
        <div class="block2__element"></div>
    </div>
</div>

What's the correct way to name list items using BEM. I've been using #1 below but have seen other websites use other BEM naming conventions.

#1

<ul class="products-list">
    <li class="products-list__item">
        <li class="products-list__item-title"></li>
        <li class="products-list__item-description"></li>
    </li>
</ul>

#2

<ul class="products__list">
    <li class="products__item">
        <li class="products__item-title"></li>
        <li class="products__item-description"></li>
    </li>
</ul>

#3

<ul class="products__list">
    <li class="products__item">
        <li class="products__title"></li>
        <li class="products__description"></li>    
    </li>
</ul>

#4

<ul class="products">
    <li class="products__item">
        <li class="products__item-title"></li>
        <li class="products__item-description"></li>
    </li>
</ul>

#5

<ul class="products">
    <li class="product">
        <li class="product__title"></li>
        <li class="product__description"></li>
    </li>
</ul>

Hello I am new to BEM and I have a question. Can I use two child classes on one element like this? Example:

<div class="prod">
   <div class="prod__col prod__item></div>
   <div class="prod__col prod__item></div>
</div>

First of all, thanks for such an amazing methodology and tools. I'm very happy so far about the results.

Here is a little problem I'm facing.

{
    block: 'menu',
    type: 'red', // NOTICE i'm intentionally defining it as type not as mod
    items: [
        { title: 'BBC', url: 'http://bbc.co.uk'},
        { title: 'CNN', url: 'http://cnn.com'}
    ]
}

My BEMJSON layouts being more abstract makes me more productive. I would like to ignore details like mods, elems and define them "on the fly" with BEMHTML block (re?)definitions.

block('menu')(
    mods()(function() {
        let custom_mods = {}

        custom_mods[this.ctx.type ? this.ctx.type : 'black'] = true; // menu_red, menu_black, etc.

        return Object.assign({}, this.ctx.mods, custom_mods)
    })
)

The possibilities are endless here. Amazing. Just what I wanted...

Except! My dependencies for menu_red are not included now.

Adding red mod to menu.deps.js is not a solution, because this way red is part of the bundle although BEMJSON defines only GREEN.

Is there a workaround? Thanks,

Hi! I'm new to BEM, trying to implement with a little project to learn it.

Inside my HTML file i have this code

<main class="game">

    <!-- Choose to play the game or see the highscores -->
    <div class="game__choose">
      <button class="btn" onclick="startGame()">Play Game</button>
      <button class="btn" onclick="showHighscores()">Show Highscores</button>
    </div>
    <!-- Choose to play the game or see the highscores -->

    <!-- Display elements of the game -->
    <div class="game__game-area">

      <div class="game__hud">
          <div id="questions-counter ">
              <h4>Question</h4>
              <h1>0</h1>
            </div>
            <div id="score">
              <h4 >Score</h4>
              <h1>0</h1>
            </div>
      </div>

    </div>
    <!-- Display elements of the game -->

According to the FAQs code should look like this

<div class='block'>
    <div class='block__elem1'>
        <div class='block__elem2'>
            <div class='block__elem3'></div>
        </div>
    </div>
</div>

So, my questions are:

  1. Is the class game__choose ok?
  2. In the class game__hud i have two more divs. Should the name be game__hud-question-counter or hud__question-counter for example?
5 years ago

Nested list

Hi,

I am making a structure for list that can be reused in other block elements but I have doubts with the nested items. If you make the sublist elements as a block itself, what would happen with its li elements, do you need to name them according with its father block element or they can be generic?

<ul class="list list--default">
    <li class="list--default__item">Lorem ipsum dolor sit amet</li>
    <li class="list--default__item">
        Lorem ipsum dolor <a href="#" title="link title" target="_self">sit amet</a>
        <ul class="list--default-sublist">
            <li class="list--default__item">
                Lorem ipsum dolor sit amet
                <ul class="list--default-sublist">
                    <li class="list--default__item">Lorem ipsum dolor sit amet</li>
                    <li class="list--default__item">Lorem ipsum dolor sit amet</li>
                </ul>
            </li>
            <li class="list--default__item">Lorem ipsum dolor sit amet</li>
        </ul>
    </li>
</ul>

Thx a lot.