面向对象的 CSS:这重要吗? [关闭]

2024-04-10

我刚刚发现这个有趣的演示 http://www.slideshare.net/stubbornella/object-oriented-css?type=presentation关于“面向对象CSS”的概念。这似乎是一个好主意,但演示文稿相当简短,并且没有给出很多示例。

我的问题:

  • 这个概念相关吗?
  • OOCSS 有什么好处?
  • 你能给我提供“面向对象CSS”的复杂例子吗?

也许,你认为这个概念并不重要

  • why?
  • 您使用什么样的工作流程(和规则)?

相关吗?

我认为是的,它基本上是为 CSS 作者使用的方法命名,与创建样式指南非常相似。有用吗?是的。继承别人的 OOCSS 工作容易吗?可能不会。

OOCSS 有什么好处?

抽象某个组件的样式属性始终有利于整个站点的样式一致性。假设您想要更改组件的边框样式以获得全新的外观:您通常会更改有关边框样式主样式的几行。

一个例子

我创建了一个关于我们网络应用程序中所有“小部件”的 UI 开发人员样式指南(或样式词汇)。每个小部件将根据其预期内容进行分类。每个小部件可以有任意数量的预定义框样式、背景样式。每个小部件还可以根据其所在的父元素来布置不同的内容。

这相当于代码:<div class="free bg_neutral form_search">用于每个包装器/容器,每个类分别是:“盒子样式、背景样式、内容”。 然后,处理 HTML/视图的开发人员可以轻松切换任何预定义样式并用更合适的样式替换它们。例如替换bg_neutral with bg_gradient_fff_eee改为渐变背景。

我认为我们节省了无数行 CSS 代码,因为我们可以在几个核心“小部件”上使用可互换的属性,而不是定义每个“小部件”的每个独特的化身。它还使跨浏览器修复变得更加容易,因为您可以独立处理“小部件”样式。 (大多数浏览器错误与框尺寸和位置/布局有关)

在我看来,更多的 UI 人员在设计和实现网站前端时需要进行 StyleGuide / Style Vocab 练习。创建网站上使用的视觉元素的一致性。一致的视觉效果通常会产生一致且高效的 CSS!

希望有帮助, ND

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

面向对象的 CSS:这重要吗? [关闭] 的相关文章

  • 如何更改 .NET MAUI Blazor 项目中的默认字体?

    我有一个用于 NET MAUI Blazor 应用程序的默认 Visual Studio 项目 针对 Windows x64 构建 我尝试了两种不同的更改字体的方法 在MauiProgram cs中有一个字体的配置ConfigureFont
  • 对对象数组进行排序

    我在使用 PHP 手册中的示例时遇到了问题 所以我想在这里问这个 我有一个对象数组 有没有办法根据对象的内容对其进行排序 例如我的数组是 Array 0 gt stdClass Object id gt 123 alias gt mike
  • 项目之间的点线

    我正在建立一个餐厅网站和菜单 我需要在菜单项和价格之间画一条 点线 我需要得到它 而不需要手动一一写点 此功能应该自动工作 是否可以使用 span 或 div 等背景来创建它 我拥有的 我想要的是 我想你正在寻找这样的东西 html div
  • CSS:如何在“div”内垂直对齐“标签”和“输入”?

    考虑以下代码 http jsfiddle net s2qBw 3 HTML div div
  • 何时使用
    换行符 vs CSS 定位?

    我经常想知道如何正确使用 br 越线 似乎它们经常被错误地用于定位或清除应该使用 CSS 的内容 W3schoools org 说使用 br 适用于空白行 但不适用于创造或分离 http www w3schools com tags tag
  • primefaces 元素无法加载我的 css 文件的 url

    当我将样式 css 放在同一个 xhtml 页面中时 它可以与我的页面一起使用 例如
  • 允许指针(单击)事件穿过元素,同时保持滚动功能

    我的目标是拥有一个允许 下面要点击 交互的元素 滚动 众所周知 1 的解是pointer events none 这正如中所描述的单击 DIV 到底层元素 https stackoverflow com questions 3680429
  • 如何在 flutter/dart 中使用设定大小的自定义字体?

    我正在尝试使用color fontWeight and fontFamily with style style copyWith 我尝试使用的自定义字体是Vonique 我已经将它像这样导入到pubspec yaml fonts famil
  • Django 1.6 的静态文件

    我花了一整天但没有任何作用 我在这里看到了至少 20 篇关于同一主题的帖子 它们各不相同 有不同的建议 但没有一个对我有用 使用 Python 2 7 运行 Django 1 6 我正在尝试从 django 教程加载民意调查应用程序的 cs
  • 值类型如何实现引用类型

    我遇到了一个值类型正在实现 ref 的场景 类型 只是想知道这怎么可能 幕后发生了什么 结构体是值类型 接口是引用 类型但结构可以实现接口而不会出现任何错误 有什么想法吗 提前致谢 实际上 它同时以两种不同的方式进行 首先 任何值类型都可以
  • CSS:在 hsla 中使用 hsl 变量?

    假设我有一个 CSS 变量hsl定义如下 white 1 hsl 0deg 0 100 现在 我想使用相同的白色 但不透明度为 50 所以 像这样 white 2 hsla 0deg 0 100 50 有没有办法使用第一个变量 white
  • 在CSS中,有什么比使其成为块元素更好的强制元素换行的方法呢?

    我有一个 H3 标题 我想将其样式设置为具有特定的背景颜色 但不让元素的背景占据父元素的整个宽度 鉴于 H3 默认情况下是块元素 我的样式需要将该元素更改为内联块元素 或者只是内联内联元素 如下所示 h3 background color
  • Sass 负变量值?

    我有几个 scss 选择器 其中我使用相同数量的正数和负数 如下所示 padding 0 15px 15px margin 0 15px 20px 15px 我更喜欢对所有 15px 量使用一个变量 但这不起作用 pad 15px padd
  • 无法在scrollView中滚动

    我有一个屏幕 我可以在输入字段中输入内容并获得相应的搜索结果 该列表在 ScrollView 中呈现 但当键盘打开时 在 Android 中 它仍然不允许我滚动 我怎样才能解决这个问题 return lt gt addressesFound
  • 如何在 jQuery 中使用 CSS“background-image”属性添加的图像上绑定单击事件

    这是我的小提琴link http jsbin com otisur 1 edit 我想我的问题通过标题本身就很清楚了 尽管如此 我正在寻找一种绑定的方法click使用 css 添加的图像上的事件background image财产 我知道
  • 动态检测屏幕高度和屏幕宽度,以精简图像的高度和宽度

    我以前可以display a div标签仅在portrait使用下面提到的代码corrl https stackoverflow com users 15388872 corrl in this https stackoverflow co
  • css:将div制作成圆角并在其3/4处添加边框

    我有这样的代码 div class circle div and css circle border left 1px solid red border bottom 1px solid red border radius 200px wi
  • 如何使用javascript隐藏div

    我想使用 Javascript 隐藏一个 div 下面是我的div div class ui dialog titlebar ui widget header ui corner all ui helper clearfix span cl
  • 更改文本框中一个字符的颜色 HTML/CSS [重复]

    这个问题在这里已经有答案了 我正在设计一个网站 我想问一下大家 如何通过CSS改变HTML文本框中字符串中的一个字符的颜色 示例 STACK OVER FLOW 只是 A 字母是红色的 你不能用常规方法做到这一点
  • 如何反转媒体查询中元素的顺序?

    我有两个 div 左和右 但是当屏幕小于 500px 时 左 div 成为底部 div 右 div 成为顶部 div DOM 中的第一个 div 应该显示为第二个 第二个 div 为第一个 I use display flex 然后 div

随机推荐

  • cURL 中的“c”代表什么?

    我知道 cURL 是一个命令行实用程序 可让您发送 HTTP 请求 但 c 代表什么 从他们的网站 cURL 是项目的名称 这个名字是 Client for URLs 最初 URL 拼写为大写 以使其显而易见 处理 URL 事实上它也可以发
  • 更高级别的 Python GUI 工具包,例如为 TreeView/Grid 传递字典

    使用 PyGTK 启动了我的第一个 Python pet 项目 虽然它是一个非常强大的 GUI 工具包并且看起来很棒 但我还是有一些烦恼 所以我考虑转向其他东西 因为它还不太广泛 环顾四周SO https stackoverflow com
  • 使用 openat 重新打开目录

    看起来 可以使用openat to re打开一个已经打开的目录 例如 在我的 Linux 系统上我可以执行以下操作 define GNU SOURCE include
  • 服务器和本地之间的 Mercurial?

    我正在进行一个门户开发工作 我有时会遇到一些麻烦 例如丢失 覆盖错误的文件等 所以我决定使用 Mercurial 来进行此开发 我第一次使用源代码管理的经历 我在这个项目的服务器 bluehost 上工作 有什么办法可以在本地保存更新备份吗
  • 跨线程Winforms控件编辑[重复]

    这个问题在这里已经有答案了 如果编辑文本的代码 属于 与包含 Windows 窗体的线程不同的线程 如何编辑 Windows 窗体元素中的文本 我得到了例外 跨线程操作无效 控制 textBox1 是从创建它的线程以外的线程访问的 谢谢 您
  • Python 求和 excel 文件

    我有一个包含 3 列的 Excel 文件 请举例如下 Name Produce Number Adam oranges 6 bob Apples 5 Adam Apples 4 steve Peppers 7 bob Peppers 16
  • 读取 ELF 部分的内容(以编程方式)

    我正在尝试检索 ELF 二进制文件中附加部分的内容 此时 我使用以下代码来检索每个部分的名称 include
  • jQuery 验证 - 隐藏错误消息

    我正在使用 jQuery 验证插件 并希望禁用它创建的或元素 容器来显示错误 消息 基本上 我希望带有错误的输入元素具有错误类 但不创建包含错误消息的附加元素 这可能吗 我刚刚想到了 CSS 解决方法 但它并没有真正解决元素仍在创建的事实
  • Spring Cloud Sleuth-获取当前的traceId?

    我正在使用 Sleuth 我想知道是否可以获取当前的 TraceId 我不需要添加任何回复或任何内容 我只想要在某些情况下向开发团队发出警报的电子邮件的traceId Ex import brave Span import brave Tr
  • 如何在 gitlab CI 中检测编译器警告

    在我们的 gitlab 服务器上设置 CI 构建的步骤中 我似乎找不到有关如何设置编译器警告检测的信息 构建输出示例 100 Building CXX object somefile cpp o home gitlab runner bui
  • 将数据从 Dynamodb 发送到 Amazon Elasticsearch 的最佳方式

    我想知道将数据从 dynamoDB 发送到 elasticsearch 的最佳方式是什么 AWS SDK js https github com Stockflare lambda dynamo to elasticsearch blob
  • Android:从另一个活动返回时避免调用 onCreate()

    假设我的应用程序包含两个活动 A 和 B 两者在 AndroidManifest 中都仅限于纵向 活动 A 启动活动 B 在Activity B中 有一个按钮 它调用finish 当点击时 问题是 当我垂直握住设备 纵向 并单击按钮时 调用
  • DT Shiny 中单列的渲染下拉列表

    我不精通 Javascript 并且想复制下拉菜单中提供的功能兰森塔布尔 https jrowen github io rhandsontable dropdown autocomplete包但对于DT https rstudio gith
  • 将 IEnumerable 对象序列化为字符串数组的扩展方法?

    我的最后一个问题是关于将对象的字符串表示形式序列化为 XML https stackoverflow com questions 1138414 can i serialize xml straight to a string instea
  • 为什么我的 dockerfile 不复制目录

    在我的 dockerfile 中我有这两行 ADD ansible inventory etc ansible hosts ADD ansible ansiblerepo 第一行有效 因为我可以运行容器并看到我的主机文件已填充了清单文件中的
  • 使用 getElementsByName() 设置选项值

    拥有这个字段集 fieldset legend death legend fieldset
  • 如何从 javascript 中的 API 调用返回值到 React 组件

    我似乎无法将 javascript 中此 API 调用的值返回到我的 React 组件 我有一个调用 API 的 java 脚本文件 在js文件中 返回结果 但是当我在react组件中调用useEffect中的js函数时 它返回未定义 ex
  • ctags 多行 C 函数原型

    ctags 有没有办法处理 C 中的多行函数原型 我四处寻找 fields S应该做多行原型 但我无法让它工作 ctags x c kinds pf fields S file file int foo int x int y ctags
  • django QueryDict 仅返回列表的最后一个值

    使用 django 1 8 我观察到一些奇怪的事情 这是我的 JavaScript function form submit var form form1 id request post this attr action form seri
  • 面向对象的 CSS:这重要吗? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我刚刚发现这个有趣的演示 http www slideshare net stubbornella object oriented css ty