The problem with shorthands in CSS

Shorthands in CSS can serve a purpose, but it's important to know the potential issues that can arise when we use them!

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:36 - The background property causing trouble
01:20 - Why it's a problem
02:10 - Fixing it with the longhand
02:28 - Margin shorthand causing problems
04:36 - Fixing the margin issue
06:34 - The inset shorthand for positioning
07:45 - When it's alright to use shorthands

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[tadochov]

I love the way you advised we use "background-color" instead of just "background", and then set "background: lime" like 10 seconds later :D

[markreyes]

Shorthands can be annoying when styling responsive designs also. Thanks for the video!

[michaeloosthuizen]

The real problem with shorthands and syntastic sugar is that they increase the cognitive overhead required to read it. Even though explicit code takes a little longer to write it is far quicker to read, especially when you are collaborating with other. Excplicit code is also easier to maintain and modify. If time is a big issue then also consider that the more explicitly the code is written the closer it get to being self documenting. Spend more time writing easy to read code and less time writing documentation explaining your code.

[erumabo]

I use shorthands when I do need those default values, when it's a "general class" that will be overwritten with a more specific selectors, or when I'm setting all the shorthand properties and I want to save some lines (this case is the most frequent), otherwise I just set the individual props one by one.

[callmejobson]

What I got from this video is dont use short hand if you can avoid it! I can't wait for beyond CSS I going through your course on CSS over on Scrimba! Great video!

[Coolhwhipmike]

Thanks for another great video. I'm in the beginning of learning HTML and CSS and this answered questions that I didn't know I had. Margins and padding sometimes get annoying and I'm betting the shorthand is the reason why.

[maasnicolas]

I've been telling this to a lot of people and they didn't really believe me. Really cool to see someone with a lot of influence saying the same thing 😅. Great video!

[adeisaac]

Ooh Kevin, you know we love the intro, so you slow down 😁😁 just awesome. Feels good to lazy with shorthand, sometimes. Thanks for the video.

[JamesWelbes]

You really enunciated "front end" nice work 😁

[TravisHi_YT]

Great video, very important to understand the perks and pitfalls of shorthand declarations. For some reason I always thought that the full declaration would override the shorthand if the specificity is equal.

[TayambaMwanza]

I'm so glad you're going into more nitty gritty css lately. Subscribed!

If you had to re-invent css how would you change it?

[azsamsiizbrah]

Great video with some crucial points. I had noticed it but only for the background shorthand and I never use it if I don't need to. Now I will be more conservative about the others as well.

[DN]

Amen. Usability isn't just for end-users but also for developers coming in after you.

[dweblinveltz]

As a dev, I was skeptical, but you earned my follow.

[davidmaxwaterman]

I was surprised you mentioned 'margin: 0 auto;' as a surprise since you explicitly say '0'...it literally does not mean 'don't do anything on the block axis'.
It's just a shame that some things, like flexbox, don't have the shorthands so that a whole set of flexbox properties can be set in one line.

[TheCocoaDaddy]

Brilliant as always! Thanks for posting this informative video!!!!

[Baedda]

Saying this for years! Everyone is only hyped for short hands. But the longhand is most of the time the better choice 👌

[Matt]

I only just realized that your introduction is "Hello my front-end friends...". I've been hearing "Hello my friend and friends..." this whole time.

[NNNedlog]

Hello sir, your codepen t-shirt is awesome

[zemonte]

I Will not Stop using shorthand, just love it soo much.