From old feedback: CSS shorthands | Cwicly
Is there any chance, the CSS output will be improved in the future?
I just put together one button. On the left is how Cwicly handles it, on the right is how you write it yourself.
Remember, it’s a button and the hover styles didn’t even got applied. I guess nobody would complain if there is an output of border: 5px 5px 5px 5px, if it’s technically not possible to achieve that only the actual needed values will appear.
From my point of view, this will lead rapidly into a CSS file size, which one can’t justify in some cases. I think Cwicly comes with the approach to make things different, just more efficient. This is one thing we should see here sometime in the future.
Attached images
1 Like
I would prefer if we avoided using shorthand for declaring properties, as this can inadvertently override styles applied elsewhere if we don’t re-apply them in their respective fields. When shorthand are used, this means that empty field values are set to initial, overriding any other previous declared CSS.
In the example in the photo, let’s say I have a transition-duration, and a transition-timing-fuction set globally on my normalizer for consistency across the site. If I then create a transition for a specific property on a specific block (let’s say I want to transition the opacity) and leave these two fields empty, Cwicly will generate a shorthand transition: opacity; property with these two values missing. The browser will the render this as transition: opacity initial initial initial initial, which from the user agent means 0 for the duration, and ease for the timing function, whicn in turn would override my previously defined properties.
