css - sibling - selector中文




如何更快地插入/编辑/分组css规则? (6)

我发现在写css的时候我很多时间都是为了找到放置新规则的地方而浪费掉的。 例如,如果我有这个样式表:

.a, .b, #c {
  display:inline-block;
}

.d {
  color: #fff;
}

我想添加.d {display:inline-block;) ,我会经常考虑一下是否应该将它添加到第1或第2部分。 含义:

.a, .b, #c, .d {
  display:inline-block;
}

VS

.d {
  color: #fff;
  display:inline-block;
}

很显然,随着CSS变得越来越复杂,浪费的时间也越来越多。 另一个消费者是定位现有规则以编辑它们的过程,当选择器在样式表中出现几次时。

是否有一个特定的工作流程/工具,可以使CSS写入过程更快,更高效?

请注意:

  1. 一个类似的问题已经存在,但是两年前已经回答了,所以需要一个最新的答案

  2. 作为一个相对较新的SO用户,我不确定这是属于这里还是程序员。 如果这是脱离主题,我会很乐意移植它。


你应该根据他们的目的和逻辑来分组样式,而不是通过共同的样式属性。 如果.a.b没有任何共同之处,可以将display: inline-block; 在他们每个人。

专注于可维护的代码而不是超高效的CSS文件(有缩小和压缩库可以为你做)。


你的问题似乎是设计师的“普遍”混乱。 最好的设计一个CSS的方法是,你应该清楚哪些类将应用于什么? 如果你想对不同的元素应用不同的属性(比如你想为div设置width = 40px,为span设置50px),那么你应该创建新的css类,但是如果你有所有的属性,只要继续现有的!

最好的方法来添加宝[roperty的是,如果你必须添加新的属性单个元素,使用内联的CSS。 保持样式表的格式对你是有帮助的。 例:

<div class="divcss" style="height:35px">

几年前,我遇到了这个问题,就像你一样,我注意到,每当我使用大型的CSS文件(比如说...... 1000多行)时,大部分时间都花费在查找特定的选择器上,而不是编辑或者编写特定的规则。

正因为如此,我遵循几个约定,可能使我更容易使用CSS文件10倍。 关键是要意识到工作流程中的瓶颈正在查找选择器 ,所以关键是要使这个过程更容易。

  1. 按照HTML标记中显示的顺序编写CSS选择器。 通常情况下,我们通过首先查看标记(通过检查元素等)开始编写样式,所以当您按照标记的顺序编写选择器时,您可以粗略地了解在哪里查找规则你的CSS文件。

    因此,对于您的示例代码,答案取决于是否牺牲组织的代码重用。 当然,如果你把东西放在同一个选择器中(例如.a, .b, .c, .d ),你可能可以重用代码,但是当你重新访问你的CSS 6个月后来? 使用你的判断。

  2. 在一行上写样式。 除非有一些很好的理由,否则你不能这样写(比如你使用一个CSS预处理器,你必须嵌套你的规则,你可以使用由其他10个开发者维护的现有代码库)线可以帮助您更快地找到样式。 例如,写如:

    selector { property1: value, property2: value; property3: value; }
    selector2 { property1: value, property2: value; property3: value; }
    selector3 { property1: value, property2: value; property3: value; }

    代替:

    selector { 
      property1: value, 
      property2: value; 
      property3: value; 
    }
    
    selector2 { 
      property1: value,
      property2: value;
      property3: value;
    }
    
    selector3 { 
      property1: value,
      property2: value;
      property3: value;
    }

    在单行上书写规则可以让您扫描选择器。 另外,您可以轻松地将一个具有1000多行的CSS文件减少到少10倍,这使得它更易于管理。 再一次记住,我们工作流程中的瓶颈是查找选择器。 因此,在编写“传统”方式时,阅读属性变得更加简单,实际上减慢了查找选择器的过程。 更重要的是,如果你在一行中编写选择器,你可以使用这样的缩进:

    header { property1: value, property2: value; property3: value; }
      header h1 { property1: value, property2: value; property3: value; }
      header h3 { property1: value, property2: value; property3: value; }
      header h3 span { property1: value, property2: value; property3: value; }
    body { property1: value, property2: value; property3: value; }
  3. 查找和替换是你的面包和黄油 。 如果使用上述两个建议来组织选择器,通常为主要部分找到选择器可以使您足够接近以找到所需的特定规则。 例如,如果您正在尝试寻找像#someDiv header ui li a:hover这样的超级特定内容,并且只需要搜索#someDiv ,那么就会导致您找到其余的内容。

希望帮助:)


如果你优化你的CSS文件,你可以这样写:

.dis-inblck{display:inline-block;}
.color-w{color:#fff;}

您可以使用特定类名作为默认或常用样式来设置规则,以便您可以定位特定的ID,类或标记。

.pos-inline{
  display:inline-block;
}
.col-white {
  color: #fff;
}

只需添加以逗号分隔的类或div(.a,.b,#c),无论您想要应用哪个属性。


首先,不要在你的CSS中考虑太多的优化。 有其他人的评论中提到的工具。

您必须设计您的元素而不是“元素样式”。 这个奇怪的句子意味着CSS不应该被定义为:

.class1, .class2, .class.., classn {
  display:inline-block;
}

.class1, .class2, .class3{
  backgroundColor: #333
}

.class1, .class.., classn {
  opacity: 0.1
}
...

因为你会疯狂地看着适用于你现在正在设计的特定元素的所有规则。 善待你的头脑:)

此外,我认为现在通常的做法是直接在浏览器中使用铬检查器和类似的工具进行样式设计。 你会看到更多的规则,其中有很多内部定义的属性,20个适用于你的元素的规则和很多其他元素与你正在设计的元素无关。

如果你确实想要更快的编码css,就像其他人所说的那样,你应该使用一个css预处理器:更少或者sass。 虽然sass是明显的赢家,但我习惯了,因为我学到了用较少建立的twitter bootstrap。 没关系,开始使用css预处理器的改进比在less或sass之间选择要好得多。





css-selectors