Shorthand: Writing multiple properties in one line with the same value

[amir2mi]

Though CSS is cascading, properties come after each other and it is the most common expected situation:

Original:

.box {
     width : 50px ;
     height : 50px ;
     padding : 50px ;
     margin : 50px ;
}

But what could happen if it was possible to make it more simple like this:

Shorthand:

.box {
     `width height padding margin` : 50px ;
}

That idea can change and make things simpler and the result will be smaller file size and more readability for CSS codes, Im curious if it will be possible natively without any preprocessor?

[Loirooriol]

Consider using variables:

.box {
    --value:50px;
     width : var(--value) ;
     height : var(--value) ;
     padding : var(--value) ;
     margin : var(--value) ;
}

The file doesn't become smaller, but it becomes clear that you are deliberately setting the properties to the same value, and then if you want to change it into e.g. 60px, you only have to update one place.

[amir2mi]

Consider using variables.

Also with variables, I should still repeat var(--value) for another 3 times.

The file doesn't become smaller.

It does. For the first example, I saved 27 characters. Now imagine the impact on the whole project.

[Loirooriol]

I mean the file doesn't become smaller when using variables (unless the values are very long). Anyways, if you worry about big files because they take more time to download, consider using compression like gzip in the HTTP. That should have a much bigger impact than your proposal, since I don't think it happens much frequently that you want to assign the same value to several properties.

[Crissov]

There’s #820 which would get you this:

.box {
     size: 50px;
     padding: 50px;
     margin: 50px;
}

It’s rare that padding and margin or the dimensions have the same value, so there is absolutely no need or value in making it any shorter to write than this.

[amir2mi]

@Crissov size is a great property I will be the first person who uses it!
I just wrote an example to express the idea, use cases will be various.

.box {
     display: flex;
     size: 50px;
     `justify-content align-items text-align` :  center;
     `overflow visibility` :  hidden;
     `border-radius padding` :  5px;
}

[amir2mi]

I was thinking about it afresh, It might not worth wasting time on this kind of feature.
I take back my thoughts about readability I would say `justify-content align-items text-align` : center; just ruins the readability, but it can play a big role in CSS minifying tools and the result will be effective.