问题标签 [itcss]

我正在创建一个受 ITCSS、BEM 和 OOCSS 启发的样式表，但不确定如何将结构属性与化妆品属性分开。

我理解 ITCSS 和 OOCSS 的一个例子：

我看到的问题与 ITCSS 更相关。同一个元素有两个不同的前缀（两个类别），当我可以为同一个元素使用相同的前缀时，可能更容易理解。

这种方法正确吗？

我的 main.scss 中有这个结构：

在我的 index.html 中，我包含 main.css 并通过 bower 或 npm 包含其他外部库，例如 normalize、bootstrap-grid 或 animate.css。导入其他库的正确方法是什么？在 main.scss 之前、之后还是内部？我有这个疑问，因为在前 2 层中不要输出任何 CSS 很重要。此外，这些文件通常是纯 css，我不能在我的 *.scss 中 @import 。

谢谢

我有一个大型项目，通过 ITCSS 构建其 CSS 架构。总而言之，我喜欢它。但是，我在设置表单样式时遇到了一个问题。

我在元素层中设置了不同的表单元素：

在forms.scss中：

但是，如果我有一个需要不同样式的组件：

在foo_component.scss中：

由于 forms.scss 中输入类型的选择性，我的组件样式foo_component.scss不会覆盖 .scss 中的元素样式forms.scss。

我正在考虑的当前重构正在更改forms.scss为一个对象：

form_object.scss重构：

我想知道这是否是一个适当的约定，还是有更好的解决方案？

我有一个正在增长的中型网络项目。这是我的 ITCSS 架构的样子：

1. 设置......全局变量，配置开关，品牌颜色。
2. 工具…………默认的 mixins 和函数，第 3 方工具。
3. 通用 .... 零基础样式（标准化、重置、框大小）。
4. 元素......未分类的 HTML 元素（类型选择器）。
5. 对象.......无装饰的设计模式，不可知的命名（包装器，布局，媒体）。
6. 组件 .... 设计的组件、UI 块、对象组。
7. 主题............主题风格，如季节性或管理部分。
8. 强制............覆盖，助手，！重要样式。

您将在哪里创建与布局相关的文件？

• 对象/o-3-column-layout.scss
• 组件/c-3-column-layout.scss

我想要一个干净的 HTML，只有组件内容而不是容器，因为我想使用ITCSS和RSCSS方法。

所以，认为我有 2 个组件：app-simple-card和app-superior-header；我想要以下结构。

简单的card.component.scss

优越的header.component.scss

问题

Angular 为组件内容呈现一个“容器”，迫使我使用组件名称作为选择器的一部分。这违反了 RSCSS 方法，所以我不想那样做，而且在另一个项目中重用这些样式会很糟糕。

现在，scss 文件看起来像这样：

我也不想将组件用作属性，因为它不能解决我的问题，也不是一个好习惯。我需要完全删除/替换仅显示其内容的组件“容器”。

有什么理由为什么在css naming convention，有些人object最好以前缀开头o-并component以开头c-？

我知道o-will stand forobject和c-stand for component，但我们为什么不忽略这些规则呢？例如c-btn，为什么我们使用c-，我认为它太冗长了。代替使用某些前缀，我们可以使用btn, 简单干净，直截了当。

请各位大侠赐教。:)

我在一个项目中使用BEMIT (BEM + ITCSS) 方法。BEMIT 允许您使用帮助程序（“实用程序”），例如.u-hidden隐藏元素。

我有一个系统，其中任何数值（font-size、margin、padding等）只能是基本单位的倍数。我创建了一个 mixin，它基于该基本单位（ , 等）自动生成边距和填充助手，.u-margin-top-8这样.u-margin-top-16我可以轻松地分隔元素，而无需为此创建特定规则。

然而，当我创建一个组件（以ITCSS方式）并且我需要一个始终拥有的特定元素时，比如说 a margin-leftof 16px（这与我的助手的规则相同.u-margin-left-16），我想知道最好的做法是什么：

1) 在 HTML 中使用 helper 类

• 优点：无需编写额外的 CSS
• 缺点：每次都必须在 HTML 中重复

2) 扩展组件代码中的辅助类（使用@extend）

• 优点：组件可以开箱即用，重用现有规则
• 缺点：生成的 CSS 可能会导致规则顺序问题

3）无论现有类如何重复代码

• 优点：组件可以开箱即用
• 缺点：重复的代码

我知道使用助手可以被认为是一个冲突的概念，使用组件（BEM 的块）作为一个有利于组合，另一个有利于继承，但 BEMIT 听起来是一个不错的中间立场。然而，关于它的文章从未涵盖这一特定方面，我想知道遇到同样问题的其他人是怎么想的。

我正在使用 ITCSS 来构建我的样式。现在我有一个带有图像的页面，我需要它的最大高度为 512px。此属性特定于该页面中的图像，因此使用 ITCSS 我应该将这个属性放在哪里？该图像具有 Bootstrap 的 img-fluid 类。另一个问题是，使用 ITCSS 可以为特定页面创建样式，还是应该使用 ITCSS “强加”的结构来组织我的样式？

我对我的 CSS 项目结构有点迷茫。

我的项目很大，所以在研究之后，我决定使用ITCSS Structure，这一切都很好，直到我到达 ,,Components Layer''

我做了什么：我也将组件文件夹分解为子文件夹。

例如：我的 html 页面有一个模板，在模板中我有页眉、内容、页脚，它们有通用的 CSS 代码（默认状态）。我有一个布局相同但带有额外 CSS 的侧边栏。

这是一张类似我的树的照片

在组件文件夹中，您可以单独查看每个组件的 CSS，在部分文件夹中，您可以查看组件父元素的 CSS 和组件之间的公共 CSS。

我不知道构建它的最佳想法是什么，或者这对于大型项目是否足够好，或者它是否会减慢速度，或者或或。

请给我你的想法和帮助。

谢谢你。

我正在为我的最新项目使用 ITCSS。

三角形的层次如下：

• 设置——与预处理器一起使用，包含字体、颜色定义等。在这一层中，常见的是定义可以自定义模板的变量。
• 工具——全局使用的 mixin 和函数。该层仅在我们使用预处理器作为 SASS 时使用。
• Generic - 重置和/或规范化样式、框大小定义等。重要的是要注意这是生成 CSS 的三角形的第一层。
• Elements — 为纯 HTML 元素（如 H1、A、页眉、页脚等）设置样式。这些带有浏览器的默认样式，因此我们必须在这里重新定义它们。
• 对象——基于类的选择器，定义了未修饰的设计模式，例如从 OOCSS 已知的媒体对象，如列表、单选按钮。
• 组件——特定的 UI 组件。我们页面的组件，例如按钮、卡片、具体列表等。
• 实用程序 - 实用程序和帮助类能够覆盖三角形中之前的任何内容。

取自https://dev.to/carlillo/understanding-itcss-real-case-using-itcss-in-a-ghostcms-blog-1p9b

但是我应该把我的css动画放在哪里？

1 和 2 不能生成 CSS，因此我希望数字 3（通用）是正确的部分？

任何人都可以确认吗？