草庐IT

html - SMACSS、BEM 和 OOCSS 不是可移植的吗？

coder 2023-08-03 原文

所以我对 OOCSS 有疑问。它应该更便携，但与我通常做事的方式相比，我发现它不那么便携。

我的例子:

我有一个小部件推荐。在主要内容正文(具有白色背景)中，推荐使用黑色字体。但在页脚(具有蓝色背景)中，推荐需要白色字体。

在 OOCSS 之前，我会做这样的事情:

#main-content .testominial {
  color: #000000;
}
#footer .testominial {
  color: #FFFFFF;
}

使用这种“旧”方法，我可以将我的小部件从内容区域拖到页脚，并且颜色会简单地工作 - 我不需要更改小部件的 CSS 或 DOM 类。

使用新的 OOCSS/BEM，我不应该将 .testimonial 类耦合到 ID(或位置)，而是我应该像这样子类化它:

.testominial {
  color: #000000;
}
.testominial--footer {
  color: #FFFFFF;
}

问题在于，如果不进入 DOM 并更改推荐小部件上的类，我就不能再将我的推荐从内容区域拖到页脚 - 它的可移植性较差，因为它需要开发人员手动干预；而在此之前，编辑者只需拖动它，样式就会自动生成。

我错过了什么吗？似乎没有可靠的真实示例？

最佳答案

您需要考虑删除 testimonial命名以及 footer .

考虑这个例子:

.primary-box { }
.primary-box--reduced { }
.primary-box--standout { }

在示例中，类完全独立于它们的页面上下文。结果是这些类是完全可重用的。页面上的任何框都可以采用上面的类，并期望其样式完全符合定义。

例如，您可以:

<header>
    <div class='primary-box primary-box--reduced'></div>
</header>
<div class='content-box'>
    <p class='primary-box primary-box--standout'></p>
</div>
<footer>
    <div class='primary-box primary-box--reduced'></div>
</footer>

现在，当设计师回来调整突出框的填充时，您可以直接转到这些样式并进行调整，确信唯一会受到影响的区域将是 HTML 中具有这些类的区域。

此外，当您决定移动时 .primary-box--reduced来自 <header>进入位于其上方的菜单栏或进入页脚，您可以确信样式会完全出现。

当你在某处需要另一个元素时，可能是 primary-box--standout ，或者只是一个默认值 primary-box在标题中，您只需创建它并添加类，它们的样式将完全遵循。

你也永远不会继承意想不到的样式。

这是一个非常真实的例子，我最近建的一个网站几乎都是这样建的，我说几乎都是因为我还在学习，但我可以保证我很快就遇到了最少的麻烦-具有非常流畅设计的移动元素是那些具有非特定上下文的元素。

重要的是缺乏上下文。在第一个示例中，.testimonial--footer非常依赖于上下文，您真的只需要在页脚的推荐中使用它。

就像变魔术一样CSS Wizardry cover this exact topic

编辑:我添加了这个例子来帮助对我的回答发表评论。这不是 BEM 或 OOCSS，尽管它更接近 the SMACSS approach。 .这就是我用 css 解决问题的方式，是一种混合 BEM/SMACSS 方法:

按顺序加载:

  • 模块文件，例如.primary-box
  • 页面部分文件，例如.header或 .call-to-action
  • 页面文件，例如.about-us或 .contact

每个文件变得越来越具体，同时构建更复杂的模块。基于上述示例并希望对 OP 有所帮助，您可以看到如下样式:

.header {
  .primary-box {
    color: #000;
  }
}

这将使用更具体的嵌套类表示法覆盖模块样式。请注意，我仍然会避免使用像 .header 这样的类名- .banner-standout会更好，因为它可以在任何地方重复使用而不会混淆

接下来，你甚至可以看到:

.about-us {
  .header {
    .primary-box {
      color: #f00;
    }
  }
}

我发现这在实际元素中对于上下文非常有效，同时保留了 BEM 的上下文无关功能，但我也强烈建议尽可能将此链向上推到模块中。如果我识别出新的通用页面部分或模块并适本地重新组织命名和文件，生活就会更轻松。在一个代码已经被仔细重构的元素中，我的页面文件中没有任何内容。

关于html - SMACSS、BEM 和 OOCSS 不是可移植的吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30498946/

SMACSSOOCSScodeprimary-boxprimaryhtmlcssbem

有关html - SMACSS、BEM 和 OOCSS 不是可移植的吗？的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  3. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  4. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  5. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  6. 【Java 面试合集】HashMap中为什么引入红黑树，而不是AVL树呢 - 2

    HashMap中为什么引入红黑树，而不是AVL树呢1.概述开始学习这个知识点之前我们需要知道，在JDK1.8以及之前，针对HashMap有什么不同。JDK1.7的时候，HashMap的底层实现是数组+链表JDK1.8的时候，HashMap的底层实现是数组+链表+红黑树我们要思考一个问题，为什么要从链表转为红黑树呢。首先先让我们了解下链表有什么不好？？？2.链表上述的截图其实就是链表的结构，我们来看下链表的增删改查的时间复杂度增：因为链表不是线性结构，所以每次添加的时候，只需要移动一个节点，所以可以理解为复杂度是N(1)删：算法时间复杂度跟增保持一致查：既然是非线性结构，所以查询某一个节点的时候

  7. ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2

    我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

  8. ruby - 如何使用 Nokogiri 解析纯 HTML 表格？ - 2

    我想用Nokogiri解析HTML页面。页面的一部分有一个表，它没有使用任何特定的ID。是否可以提取如下内容:Today,3,455,34Today,1,1300,3664Today,10,100000,3444,Yesterday,3454,5656,3Yesterday,3545,1000,10Yesterday,3411,36223,15来自这个HTML:TodayYesterdayQntySizeLengthLengthSizeQnty345534345456563113003664354510001010100000344434113622315

  9. ruby-on-rails - 连接字符串时如何在 <%=%> block 内输出 html_safe？ - 2

    考虑一下:现在这些情况:#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2我需要用其他字符串输出URL。我如何保证＆符号不会被转义？由于我无法控制的原因，我无法发送&。求助!把我的头发拉到这里:\编辑:为了澄清，我实际上有一个像这样的数组:@images=[{:id=>"fooid",:url=>"http://

  10. ruby-on-rails - 只有当不是 nil 时才执行映射？ - 2

    如果names为nil，则以下中断。我怎样才能让这个map只有在它不是nil时才执行？self.topics=names.split(",").mapdo|n|Topic.where(name:n.strip).first_or_create!end 最佳答案 其他几个选项:选项1(在其上执行map时检查split的结果):names_list=names.try(:split,",")self.topics=names_list.mapdo|n|Topic.where(name:n.strip).first_or_create!e

随机推荐