Guide: CSS Shorthand vs Longhand: Comparison
Shorthand and made by hand – one is concise and the other precise. One arose from the desire for brevity, while the other stands steadfast to maintain clarity. Either way, they have their goals, pros and cons, so to speak. This post will shed some light on both CSS shorthand and longhand notations while concluding which one is best used for which situation
What is shorthand ownership?
Shorthand property is a property that takes the values for other sets of CSS properties. For example, we can assign a value for border-width, border-style and border-color with only the border property. Actually, border: 1px solid blue; is the same as: border-width: 1px; border-style: solid; border-color: blue; See Preethi’s Pen zGNKex (@rpsthecoder) on CodePen. With this we do not have to specify the individual property values separately (which is superfluous, time and space consuming). It also resets the omitted properties in the declaration, something you can take advantage of. As mentioned before we write a series of other property values in shorthand, the order does not matter if all property values are in shorthand are of a different kind as in borderFor properties with similar types of values like margin, order mattersWhen in doubt, remember clockwise! Now what if we miss a few properties in the declaration? In the example above, let’s say we ignored the border style. border: 1px blue; See the Pen OVWRdv from Preethi (@rpsthecoder) on CodePen. We won’t be able to see the borders again, not because the shorthand property didn’t work, but because the border style we left out was not given the default value. This is how that shorthand trait was rendered. border: 1px no blue; Now let’s drop the 1px for border-width and keep the other two: border: solid blue; See Preethi’s Pen YXNGBV (@rpsthecoder) on CodePen. We can see the borders, only with a thicker width and that’s because the border-width property has the default value of medium. border: medium solid blue; This concludes for us that when a property value is omitted in an abbreviated statement, that property gets its default value (even if it needs to overwrite a previous value assigned for it). If there is border width: 1px; for an element somewhere before the border: solid blue; for the same, the border width will be medium (the default), not 1px. Another thing worth noting is that we cannot use values such as inherit, initial or switched off, which are available for all CSS properties, in abbreviated format. When we use that, the browser cannot know exactly which property that value should represent in the shorthand – the entire declaration is deleted There is one CSS shorthand property that can do that set the value for all CSS propertiesInherit, initial, and unset CSS-wide values apply to all properties and therefore are the only values accepted by the all property. div {all: initial} This will cause the div to discard ANY CSS property values it had and reset the default value in each one. Let’s not misuse all property. The need for this can only arise in very rare circumstances, when we cannot touch previous CSS code of an element to which we want to apply this property. Note: CSS property color has a hexadecimal value in shorthand if the two digits of the hexadecimal value are the same in each color channel. For example background: # 445599; is the same as wallpaper: # 459;.
What is real estate by hand?
The individual properties that can be included in a shorthand trait are called longhand traits. Examples are; background image, margin links, animation duration, etc. While shorthand alternatives are useful, they have a drawback. Remember in the beginning we saw how shorthand overrides all omitted properties with their defaults? This can be a problem if the reset is not desired. Take the font shorthand property, for example. Let’s use it in the h4 element (which has a default browser style font: bold) font: 20px “courier new”; In the shorthand above, there is no value for the font-weight property, so font-weight: bold is overridden by the default font-weight: normal, causing the h4 element to lose its bold style, which may not have been intended. See Preethi’s Pen BNpLvx (@rpsthecoder) on CodePen. So for the above example, the two simple properties, font-size and font-family, are perfect. Also use a shorthand for assigning only one or two property values is not very usefulWhy give the browser extra work to interpret every property (including the omitted ones) in the shorthand, if only one is needed to work? Production aside, some developers (especially beginners) may find using long hand notation a lot easier to work with during the development phase than better readability and clarity
Conclusion
Nowadays, with the possibility of fast coding (using tools like Emmet) and minification, high reliability on shorthand is not necessary, but at the same time it makes a lot of sense to margin: 0; typing. The context in which we prefer our CSS formats will vary and all we have to do is figure out which notation works best for us and when.
CSS Shorthand vs Longhand: Comparison: benefits
Faq
Final note
I hope you like the guide CSS Shorthand vs Longhand: Comparison. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends. For our visitors: If you have any queries regards the CSS Shorthand vs Longhand: Comparison, then please ask us through the comment section below or directly contact us. Education: This guide or tutorial is just for educational purposes. Misinformation: If you want to correct any misinformation about the guide “CSS Shorthand vs Longhand: Comparison”, then kindly contact us. Want to add an alternate method: If anyone wants to add more methods to the guide CSS Shorthand vs Longhand: Comparison, then kindly contact us. Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off). Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.
