保定公司网站开发：可伸缩CSS中大小的命名约定

2019.06.03 保定公司网站开发

在本文中，保定公司网站开发将探讨如何使用命名约定来表示可伸缩CSS中的大小。

我这么说是什么意思？可伸缩CSS的一个方面通常涉及创建跨代码库可重用的模式、组件和实用程序。下面是一个非常简单的对象模式，它将内容分隔开，类似于岛对象，详见哈里·罗伯茨.

.o-box {
    display:block;}.o-box--spacing-small {
    padding:10px;}.o-box--spacing-medium {
    padding:20px;}.o-box--spacing-large {
    padding:30px;}

使此模式特别可重用的是修饰符(边界元)，提供了一系列可供选择的间距选项。

这些修饰符使用一个命名约定，表示从小到大的明显增量。这意味着，读取HTML的开发人员会注意到这些类，因此，一个框实现的间距比另一个更大，而不必返回样式表。

.o-box--spacing-small.o-box--spacing-medium.o-box--spacing-large

这个小->中->大模式是CSS中命名约定的一个非常基本的例子。它可以在整个场景中重复到类似的效果。

什么是完美的命名约定？

理想情况下，大小的完美命名约定应该：

要具有语义，因为它使用的名称表示从小到大的明显增量-否则，不需要检查样式表，就不可能确定哪个类代表什么。
记住要容易-否则，我需要返回样式表。
规模-这是一个重要的，因为它需要能够适应变化，因为我的样式表越来越大。

下面是一个具有三个修饰符的媒体对象，它使用与以前相同的简单命名约定-小、中和大。我将应用这三个原则，看看会发生什么。

.o-media {
    box-sizing:border-box;}.o-media__image {
    float:left;}.o-media__body {
    float:left;}.o-media--spacing-small > .o-media__image {
    margin-right:5px;}.o-media--spacing-medium > .o-media__image {
    margin-right:15px;}.o-media--spacing-large > .o-media__image {
    margin-right:30px;}

它绝对是语义的，因为它意味着增量。如果我看到.o-media--spacing-large附着在一个元素上，然后我看到.o-media--spacing-small依附于另一个，我可以肯定地知道前者会比后者有更多的间距。这个命名约定也很简单，可以记住，而不必返回样式表。到目前一切尚好。

如上所述，可伸缩性是命名约定需要的最重要的方面之一。

假设在初始构建完成一年后，我正在进行修改，我需要另一个间距修饰符margin-right: 50px;..我决定把这叫做.o-media--spacing-extra-large因为它已经大于我最大的修饰符，所以应该在它的名称中反映这一点。这种情况再重复几次，因为我需要越来越大的抽象，突然间我有了这样的想法：

.o-media--spacing-small > .o-media__image {
    margin-right:5px;}.o-media--spacing-medium > .o-media__image {
    margin-right:15px;}.o-media--spacing-large > .o-media__image {
    margin-right:30px;}.o-media--spacing-extra-large > .o-media__image {
    margin-right:50px;}.o-media--spacing-extra-extra-large > .o-media__image {
    margin-right:100px;}.o-media--spacing-extra-extra-extra-large > .o-media__image {
    margin-right:150px;}

这里的问题是中产阶层.o-media--spacing-medium现在不再是技术上的媒介，因为突然间，大多数改性剂都比它大。它仍然可以工作，但在我看来，有点凌乱。

另一个问题是，如果设计中的某些内容发生了更改，这意味着，例如，25px现在需要修饰符。为了保持修饰符的结构，这需要介于两者之间。.o-media--spacing-medium和.o-media--spacing-large..以前，新的修饰符是使用“额外”前缀添加的，但是在本例中，“附加媒体”一点意义都没有：

.o-media--spacing-medium > .o-media__image {
    margin-right:15px;}.o-media--spacing-extra-medium > .o-media__image {
    margin-right:25px;}.o-media--spacing-large > .o-media__image {
    margin-right:30px;}

我可以代替.o-media--spacing-large与25px, .o-media--spacing-extra-large与.o-media--spacing-large等等直到一切恢复一致。但是，我将不得不遍历HTML中每个类的所有实例，并在每次添加另一个修饰符时进行相应的更新，随着项目的增长，这个修饰符将变得越来越耗时。

因此，当项目开始时，似乎是一个合理的命名系统，随着事情的变化，突然开始紧张起来。

使大小的名称与CSS一样可伸缩

回到构成完美命名约定的最初列表，是否有可能有一个语义、易于记忆和可伸缩的命名约定？

保定公司网站开发还没有找到一个完美的解决方案！但是，我发现并经常使用以下三种方法，这些方法可能对您有用，这取决于具体情况：

1)牺牲语义实现纯粹的可伸缩性

在一个项目中，我正在构建一个基于PSD设计的网站，并且使用增量命名约定来声明类型修饰符。c-type--small, c-type--medium等等)随着我得到越来越多的设计，新的类型尺寸被以惊人的速度引入，这意味着我经常花相当多的时间来重命名CSS中的所有修饰符，然后在HTML中重新命名它们的引用。

最后，我决定为这个解决方案提供足够的语义和牺牲的语义，这个解决方案基于语音字母表:

.c-type--alpha {
    font-size:1.5rem;}.c-type--bravo {
    font-size:0.5rem;}.c-type--charlie {
    font-size:3.5rem;}.c-type--delta {
    font-size:6rem;}@media only screen and (min-width: 768px) {
    .c-type--charlie {
        font-size:5rem;
    }}

从根本上说，这不是一个完美的解决方案，因为不需要返回样式表，就不清楚哪个类表示哪个字体大小。但作为回报，我得到的回报是对可伸缩性的极大提升，因为我不再需要花费时间强制执行以前约定的增量性质。如果我需要另一个课程，我只需选择下一个可用的字母，我就在我的路上！

当您有许多共享命名约定的类实例时，我认为可伸缩性应该优先于语义。这是因为开发人员在每次添加新类时引用样式表获取更多信息的工作要比重新构造整个类集所花费的精力要少。

2)用数字作为后缀而不是“额外”前缀

下面是一个非常类似于本文开头演示的模式的命名约定。这里的不同之处在于，与命名第二个大小为“超大”的实例不同的是，我增加了一些后缀，因此以“Large-2”结尾。

$breakpoints: (
    "small": 370px,
    "medium": 768px,
    "medium-2": 840px,
    "large": 1024px,
    "large-2": 1280px)

这有什么用？好吧，它消除了膨胀的名字的问题，如“超大”，也适用于“媒体”时，以前，“额外媒体”没有任何意义。

这种小、中、大名称之间的兼容性还意味着，当规模扩大时，它的性能会更好一些：

$breakpoints: (
    "small": 370px,
    "small-2": 425px,
    "small-3": 500px,
    "medium": 768px,
    "medium-2": 840px,
    "medium-3": 925px,
    "large": 1024px,
    "large-2": 1280px,
    "large-3": 1440px)

不过，还是不完美。例如，如果我需要添加一个medium-4的第一个实例可能会发生冲突。large因为像素值的变化很窄。然后我得各自移动large举个例子为我的新价值让路。所以，同样的老问题，也就是必须重组事物的问题。

3)在项目开始时宣布投机规模

最后，我所能做的实际上是预先声明这么多的大小，很有可能我已经涵盖了所有潜在的可能性。我把这叫做核选择！

$spacing: (
    "small": 5px,
    "small-2": 10px,
    "small-3": 15px,
    "small-4": 20px,
    "small-5": 25px,
    "medium": 30px,
    "medium-2": 35px,
    "medium-3": 40px,
    "medium-4": 45px,
    "medium-5": 50px,
    "large": 55px,
    "large-2": 60px,
    "large-3" 65px,
    "large-4": 70px,
    "large-5": 75px,
    "huge": 80px,
    "huge-2": 85px,
    "huge-3": 90px,
    "huge-4": 95px,
    "huge-5": 100px);@each $name, $value in $spacing {
    .c-mycomponent--spacing-#{$name} {
        padding:$value;
    }}

如果后来引入了新的价值，这可能会避开必须重组的问题，因为我可能已经将其包括在内了。

当然，这是有点麻烦，因为它会产生大量的CSS，可能永远不会被使用。虽然如果使用诸如Gulp、Grunt或PostCSS之类的工具，但是通过运行所有的工具都可以解决这个问题航天中心-从样式表中删除未使用的CSS。

命名约定词汇

保定公司网站开发在可伸缩的CSS中，有很多不同的方法来处理大小的命名约定。最后，我收集了一堆(诚然，由于讨论的原因，有些比其他的更好)，供您在自己的项目中使用。好好享受吧！

大小

$myVar: (
    "atomic": 10px,
    "micro": 20px,
    "tiny": 30px,
    "small": 40px,
    "reduced": 50px,
    "regular": 60px,
    "increased": 70px,
    "large": 80px,
    "huge": 90px,
    "giant": 100px)

大小+数字

$myVar: (
    "tiny": 10px,
    "tiny-2": 20px,
    "tiny-3": 30px,
    "small": 40px,
    "small-2": 50px,
    "small-3": 60px,
    "medium": 70px,
    "medium-2": 80px,
    "medium-3": 90px,
    "large": 100px,
    "large-2": 110px,
    "large-3": 120px)

位置

$myVar: (
    "room": 10px,
    "house": 20px,
    "street": 30px,
    "town": 40px,
    "city": 50px,
    "state": 60px,
    "country": 70px,
    "continent": 80px,
    "planet": 90px,
    "system": 100px,
    "cluster": 110px,
    "galaxy": 120px)

语音字母表(非增量)

你有26个变体可供选择。在此之后，您可以将变体组合成新的变体。(例如Alpha-Bravo)

$myVar: (
    "alpha": 10px,
    "bravo": 20px,
    "charlie": 30px,
    "delta": 40px,
    "echo": 50px,
    "foxtrot": 60px,
    "golf": 70px,
    "hotel": 80px,
    "india": 90px,
    "juliett": 100px,
    "kilo": 110px,
    "lima": 120px
    /* and so on up to 26... */)

军衔

$myVar: (
    "recruit": 10px,
    "private": 20px,
    "corporal": 30px,
    "sergeant": 40px,
    "captain": 50px,
    "major": 60px,
    "lieutenant": 70px,
    "continent": 80px,
    "colonel": 90px,
    "general": 100px)

行星

$myVar: (
    "mercury": 10px,
    "venus": 20px,
    "earth": 30px,
    "mars": 40px,
    "jupitor": 50px,
    "saturn": 60px,
    "uranus": 70px,
    "neptune": 80px,
    "pluto": 90px)

尺寸缩写

$myVar: (
    "xxs": 10px,
    "xs": 20px,
    "s": 30px,
    "m": 40px,
    "l": 50px,
    "xl": 60px,
    "xxl": 70px)