ITCSS中的全局范围元素

时间:2018-07-28 11:03:49

标签: css itcss

我从事前端开发已有15年了。我可能会陷入困境,但是在我的前端领域,架构和范围元素的开发顺序很简单-保留模式库和更好的模块化细节。

  1. 开发Header / Main / Footer-首先完成此步骤,确保它跨浏览器高效,并且在移动设备上运行出色。
  2. 开发主要标签内的所有内容-模块化组件。

我正在完善一个新的样板,并且可以找到最适合我的想法的模型-SMACSS,OOCSS和ITCSS的混搭。但是,为了使我的项目对其他开发人员友好,我选择了ITCSS作为核心框架体系结构,其他任何东西都将逐步变成OOCSS。很好

我很难确定的一部分是如何/在哪里将元素的局部放置在全局范围内,即页眉,主要页脚。

许多开发人员更喜欢在整个标记中只使用一次,因为这样可以使代码更清洁, 更易于维护的前端管理方式。那么关于ITCSS框架,可以包括在哪一层?

在我看来,它们可以分布在多个层次,例如在“对象”中指定标题UI行为,但是如果仅使用标题一次,则将其放置在“元素”中是有意义的-但是在哪里添加更多装饰样式?组件?我想在主标签范围内为元素保留“组件”层。

因此,我们的标头分布在3个不同的层中-令人困惑/烦人。 ITCSS是前进的方向吗?

1 个答案:

答案 0 :(得分:-2)

我正在回答自己的问题,因为我认为世界需要听到这一点。我可能对所有事情都不正确。现在还很早,但是这只野兽需要飞。

在确定在ITCSS体系结构中放置全局范围内元素的位置时,我遇到了问题(在逻辑上和道德上)。我不喜欢将页眉,主目录,页脚等以及更多的模块化组件混合在一起的想法,这对我来说没有任何意义,我甚至更不喜欢将这些元素分为不同的层的想法。

所以,我想出了...

FakeCSS-SMACSS / ITCSS / OOCSS的混搭

这是什么,为什么我要这么做

下面我们有一个层顺序。这采用了ITCSS和SMACSS的原则, 通过这种方式,我们将样式分成相关的堆栈,并按特定的顺序放置。

太棒了,谢谢哈里,这就是我们大多数人想要的答案。但是,我决定放弃OOCSS的概念,这在ITCSS中很常见,因为我认为太多的分离会破坏一些核心原则。例如,标头元素。如果您打算在标记中仅使用一次(就像我们许多人一样),那么最好将该元素整齐地放置在CSS体系结构中的某个位置。

不要将标头当作元素,对象和组件(以三种不同方式将结构与皮肤分离),而是将其放在单个“布局”层中,以免因浪费时间而使周围的地方变得沮丧年龄盯着错误的文件。这并不是说OOCSS已被完全抛弃,只是它一旦出现就自然地出现。

为什么要使用它

很简单,可以正常工作。它可能不适合极端主义者,但对于中小型项目,它会做得很好,而且对于那些关心的人来说,它组织得足够。

让生活变得轻松,使用FakeCSS。

  1. 配置-颜色,间距,断点,设置
  2. 工具-混合,功能,家族
  3. 基本-重置,字体,正文
  4. 实用程序-图标,动画,助手
  5. 供应商-flexslider,slickslider,datepicker
  6. 对象-部分,网格,侧边栏,图形,视频,叠加层
  7. 模式-标题,列表,链接,按钮,表单,段落
  8. 布局-页眉,主要,导航,页脚
  9. 模块-面包屑,制表符,手风琴,分页,英雄,轮播,饼干,
  10. 页面-主页,联系人,搜索,404