BEM：了解分解组件和定位组件的距离有多远？(BEM: Knowing how far to break down components and positioning components?)

编程入门行业动态更新时间:2024-10-09 11:29:36

我已经开始使用BEM和我正在造型的网站。我试图理解我应该如何分解组件（块）。例如，我有一个标题，其中有一个导航栏。标题被归类为块，但其中的导航栏可能是新块或标题块的一部分。这里最好的建议是什么？

我希望找到一些实现这种事情的示例网站，以便对它有一个很好的理解，但到目前为止，我发现没有任何东西可以证明它。

我也假设组件应该布局它的元素，所以这很好，是flexbox的一个很好的候选者。我现在面临的问题是在页面中布置组件。想象一下，必须并排布置2个组件，另一个很好的flexbox候选者，但知道放置显示器的位置：flex？然后，组件也不会通过使用flex item css（即flex-shrink，flex-grow，basis，order等）来负责将自己置于页面内。

这意味着父母正在指示将自己置于页面上的位置，并且它现在不是100％独立块，因为它需要display: flex在其容器上。

我确实找到了一些关于文件结构的信息，并想知道这是否可以提供帮助？也许我没有完全理解它 - 目录布局可以用于此吗？

I have started to use BEM with a site I am styling. I am trying to understand to how to far I should be breaking down components (blocks). For example, I have a header that has a navigation bar in there. The header is classed as a block but the navigation bar in there could be a new block or part of the header block. What is best advised here?

I was hoping to find some example sites that implement this sort of thing to get a good understanding of it but up until now, I have found nothing that appears to demonstrate it.

I am also working under the assumption that the component should layout its elements, so this is great, a good candidate for flexbox. The problem I face now is laying out the component in the page. Imagine having to layout 2 components side by side, another good candidate for flexbox but knowing where to place the display: flex ? also wouldn't the component then be in charge of placing itself within the page by using flex item css i.e. flex-shrink, flex-grow, basis, order etc..

This means that the parent is dictating where to place itself on the page and it isn't 100% an independent block now as it needs a display: flex on its container.

I did find some info with regards to file structure and wondered if this was something that could help? Maybe I am not fully understanding it - could the directory Layout be used for this?