标签: bem

我只是围绕着OOCSS方法.我认为它使一切更容易理解,我也尝试使用BEM命名约定.

使用这个原则,我试图为主页创建一个导航 - 基本上只是一个内联列表.由于OOCSS是关于抽象的,我到目前为止创建了这个CSS:

.horizontal-list {
    padding: 0;
    list-style: none;
}

.horizontal-list__item {
    display: inline;
}

我尝试不使用类名,nav或者navigation在应用皮肤之前首先尝试布局结构 - 这就是我的实际问题开始的地方.

要添加一些颜色,更改字体大小等,我可能只是将其添加为修饰符之类的.horizontal-list--nav.另一个修饰符可以用于面包屑导航:.horizontal-list--breadcrumb.它会这样吗？

对我来说它是合乎逻辑的,因为文本颜色与列表本身无关,但是列表是例如面包屑,但我不确定我是否从错误的方向接近了这个东西.

此外,该列表的HTML将如下所示:

<ul class="horizontal-list">
    <li class="horizontal-list__item"><a href="#">Link</a></li>
    <li class="horizontal-list__item"><a href="#">Link</a></li>
    <li class="horizontal-list__item"><a href="#">Link</a></li>
</ul>

这li是一个horizontal-list明确的元素.但是a嵌入其中的li是什么,我如何标记呢？根据OOCSS原则,我不应该这样做

.horizontal-list__item a {
    color: white;
}

对？但是在horizontal-list__item__item某种程度上添加一个类似乎也是错误的.我该怎么做？

到目前为止,我见过的所有教程都描述了如何创建单页网站或仅创建几个包.这是一个简单的网站导航示例:

• example.com/home
• example.com/about
• example.com/services
  • example.com/services/marketing
  • example.com/services/development
• example.com/contact

有可能用bem-tools,bemjson,bemhtml构建这样一个站点,但是没有像node.js或php这样的服务器端技术吗？

构建应该只包含一个目录,每个页面包含最终的.html,.css,.js文件和图像,并且应该托管在像Amazon S3这样的静态文件上.它也应该是一个oldschool静态网站,而不是单页的ajax网站.

是否有任何易于使用的解决方案用于此用例,还是应该创建自己的构建过程来从捆绑目录中收集文件？

我不确定命名我的 BEM 块的最佳方法，因为它们需要包装器。例如，给定以下标记：

<div class="products-list">

  <div class="product__item">
    <div class="product__item__title">Product 1</div>
    <img class="product__item__image" />
  </div>

  <div class="product__item">
    <div class="product__item__title">Product 2</div>
    <img class="product__item__image" />
  </div>

</div>

我觉得顶部包装器（产品列表）有点丢失。

使用类似的东西显然太深了：

products-list__product__item__image

那么，我们如何处理 BEM中的包装器，其中子元素也是包装器？

我只想知道以下代码是否遵循BEM方法最佳实践？为块修饰符创建元素,即在这种情况下,"block - mod"是"块"块的修饰符.是否允许使用此模式创建嵌套元素:"block - mod__elm".

<div class="block block--mod">
   <div class="block__elm block--mod__elm">
</div>

当我使用 BEM 时，我对简单的场景感到困惑。示例中有一个基本按钮：

.button {
    // styles for button
}

及其具有更具体样式的修饰符：

.button.button_run {
    // additional styles for this type of button
    // i.e. custom width and height
}

有一刻我意识到我需要 的修饰符button_run，让我们将其命名为button_run_pressed：

.button_run_pressed {
    // more styles, i.e. darker background color
}

button_run_pressed问题是，按照 BEM 约定来命名最后一个元素是不正确的。但我需要仅向“运行”按钮添加“按下”样式，而不是通过编写类button_pressed和混合修饰符来为所有按钮添加“按下”样式button button_run button_pressed。

我应该如何重构我的代码以匹配 BEM 约定？

所以我一直在用我认为正确的BEM编写我的 classNames 。像这样的东西：

<div className="article">
    <div className="article__textbox">
        <h1 className="article__textbox--heading"></h1>
        <p className="article__textbox--subheading"></p>
        <span className="article__textbox--author"></span>
    </div>
</div>

看看我是如何拥有文本框的，然后我在里面的所有内容都给出了 2 个破折号？我最近发现这是无效的 BEM，现在我需要知道应该如何命名嵌套的东西。例如，我应该为标签命名什么<p>？

如何在遵循BEM 方法的同时有效地使用伪类？

我的具体示例如下 - 我需要创建一个具有自定义外观的复选框功能。为此，我通常会使用input:checked + label选择器。我正在尝试将其转换为 BEM，但我能做的最好的是：

CSS：

/*.custom-checkbox 
{
}*/

.custom-checkbox__input
{
    display: none;
}

.custom-checkbox__input:checked ~ .custom-checkbox__box-label
{   
    background-image: url("../../images/pro/check.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.custom-checkbox__box-label
{
    width: 1.4rem;
    height: 1.4rem;
    position: relative;
    top: 0.2rem;
    
    display: inline-block;
    background: white;
    border: 0px solid;
    border-radius: 0.2em;
}

.custom-checkbox__box-label:hover,
.custom-checkbox__txt-label:hover
{
    cursor: pointer;
}

HTML：

   <li class="custom-checkbox">
     <input class="custom-checkbox__input" type="checkbox" id="distinctcat_cb1" checked>
     <label class="custom-checkbox__box-label" for="distinctcat_cb1"></label>
     <label class="custom-checkbox__txt-label" for="distinctcat_cb1">Categories</label>
   </li>

由于兄弟选择器 ( ~)，这与 BEM …

目前使用 scss 我了解变量、包含和嵌套。

我正在尝试创建一个使用 BEM 命名结构的新 scss 设置。所以例如

.btn {
  padding: 20px;
  .btn__value {
    color: $valColour;
  }
}

.btn--gold {
  color: $gold;
}

所以我有类 .btn__value 嵌套，因为它将是按钮块内部的一个跨度，并且只在那里使用，它取决于按钮父元素，所以 BEM 状态使用 __ 作为元素类名的前缀。

但是按钮的颜色是样式器，因此它们没有嵌套（我不确定这一点，因为我可能会像下面这样嵌套这个。）

.btn {
  padding: 20px;
  .btn__value {
    color: $valColour;
  }
  &.btn--gold {
    color: $gold;
  }
}

我正在尝试为此找出最佳实践。如果有人有任何意见，我很乐意听到。我不是嵌套的忠实粉丝。但是，由于它名为 btn--我不会在其他任何地方使用它。

我具有以下BEM设置：

  .mytable {
      font-size: 16px;
        margin: 30px 0;
      &--standard {
        border: 1px solid red;
        &__row {
          border: 1px solid blue;
        }
      }

我想做的是仅将行样式应用于修改后的表类。

输出以下内容

.mytable--standard__row {
  border: 1px solid blue;
}

这显然不是我想要达到的目标。

有没有一个整洁/标准的方法来解决这个问题？

在使用全局样式时，我有点困惑。考虑以下：

假设我有一个样式表，它定义了按钮的制作方式：

/* Button.CSS */
button {
  background-color: #CCC;
}

button.Blue {
  background-color: #00F;
  color: #FFF;
}

Button.Blue.Hollow {
  background-color: none;
  border: 1px solid #00F;
  color: #00F;
}

然后使用模板中的按钮和标准 BEM 表示法（我将使用 Block__Element--Modifier 表示法）

<!-- index.html -->
<ul class="Widget">
  <li class="Widget__Item">
    <button class="Widget__Button"></button>
  </li>
  <li class="Widget__Item">
    <button class="Widget__Button Blue"></button>
  </li>
  <li class="Widget__Item">
    <button class="Widget__Button Blue Hollow"></button>
  </li>
</ul>

这是混合类的可接受的做法吗？我觉得我违反了封装块样式的一些规则。