CSS Standards: Shortcut values for properties

[nicetransition]

"Avoid named shortcuts." is not the best example... that is a more of a recommendation than a standards for values... that's cool to leave in there if it's title is something like "Avoid Shortcut Values for Properties"

But explicit values for properties can lead to issues if it's poorly maintained and not using OOCSS

"Avoid named shortcuts" should use property values like: background:

[LukeAskew]

Can you explain the concern with OOCSS?

I included this standard since explicit values require less calculation (more performant) and are more predictable.

[LukeAskew]

@kevinmack18 Last call...

[nicetransition]

/* bad */ 
.my-font {
  font-weight: bold;
}

/* good */ 
.my-font {
  font-weight: 700;
}

This can create problems when using custom web fonts, for non-standard web fonts support for weight depends on embedded font-type.

For example: Custom-Font-100 and Custom-Font-300 where Custom-Font-100 is my regular and Custom-Font-300 is my bold. I would do something like this:

body {
    font-weight: 100;
}

h1, h2, h3, h4, h5, h6, b, strong, [style*="bold"] {
    font-weight: 300;
}

My point is font-weight is a complex one and makes me think we should include something similar to the above for custom web fonts and create a Custom Fonts section

Also better name for "Avoid named shortcut" would be "Avoid Shortcut Values for Properties"

But a better section would be "Use Shortcut Keys with Caution":

// really bad
%background-setup {
    background: no-repeat center top;
}
.foo1 {
    @extend %background-setup;
    background: url(/assets/images/image-1.png) no-repeat center top;
}
.foo2 {
    @extend %background-setup;
    background: url(/assets/images/image-2.png) no-repeat center top;
}

// bad
%background-setup {
    background: no-repeat center top;
}
.foo1 {
    @extend %background-setup;
    background-image: url(/assets/images/image-1.png);
}
.foo2 {
    @extend %background-setup;
    background-image: url(/assets/images/image-2.png);
}

// good
%background-setup {
    background-repeat: no-repeat;
    background-position: center top;
}
.foo1 {
    @extend %background-setup;
    background-image: url(/assets/images/image-1.png);
}
.foo2 {
    @extend %background-setup;
    background-image: url(/assets/images/image-2.png);
}

[nicetransition]

I'm really opposing Avoid named shortcuts section. Is there a good reason for this that I am unaware of?

[LukeAskew]

• It is not explicit.
• It is not performant.
• Disallowing shortcuts (and providing guidelines for value types) provides consistency.

[nicetransition]

I agree, I'm just saying that the title for this section is wrong and the examples I provided align better. So this should be 2 sections (in my opinion)

[LukeAskew]

I think you're confusing "named shortcuts" with "shorthand".