1

我一直在尝试找出各种方法来管理我的 CSS 文件，这些文件随着时间的推移变得越来越大。这有几个原因：使用响应式设计创建网站、需要额外样式的插件或仅针对单个元素的页面特定样式。

我已经在使用一些技术，例如：

  • 创建目录
  • 将代码分成命名的部分（在目录中引用）
  • 命名间距元素（.home-gallery,.home-gallery-image等.home-gallery-link）

然而仍然存在如何为每个元素设置属性的问题。

将所有内容放在一行中会显着降低可读性。另一方面，将每个属性放在一行中会使我的滚动条坐在淋浴下哭泣。

我目前正在尝试一些不同的形式，这就是我想出的：

  • 根据属性类型对属性进行排序和组织
  • 使用制表/间距创建一种表格外观（左侧的标题：元素；右侧的内容：属性）

在一个示例中，它如下所示：

#content-wrapper {
                    position: relative; top: 0; left: 0;
                    width: 100%; height: 200px;
                    color: #333; background: #fff;
                 }

现在在我看来，就像必须无休止地滚动/搜索一段代码和降低可读性之间的唯一妥协。

所以我的问题是：你使用了哪些 CSS 编写技术来实现良好的可读性和进一步的开发？

4

2 回答 2

1

下面的示例：

/* indented multi-selectors */
  #content-wrapper
, #content-wrapper > something else {
      /* alphabetic listing of properties, organizing attributes in blocks */

      background-color:    #fff;
      border-left-width:   2px;  /* column layout with blockwise different positioning */

      /* separation of blocks */
      color:    #333;
      height:   200px;
      left:     0;
      position: relative;
      top:      0;
      width:    100%;
  }

可能比单个属性的格式化和组织更重要的是基于共谋类和适当文档的干净结构，尤其是规则的排序（它肯定已经在我的项目中。通常相反......;-)。

恕我直言，一个不错的折叠编辑器足以减轻频繁滚动的需要。当然还有大屏幕。

于 2013-08-29T18:00:25.337 回答
1

1)我按照 HTML 中元素的顺序定义样式，例如：html{ } head{ } body{ } 同样按顺序。所以在滚动时很容易为我找到一个元素。

2)如果包含媒体查询，则按屏幕宽度顺序编写样式。从较高的屏幕宽度到较低的屏幕宽度。这有助于我轻松找到为媒体元素编写的样式。我也遵循第一点。

3)格式样式。这几乎就像你做的那样。

4)保存文件。

于 2013-08-29T18:01:00.247 回答