HOME | DD
Celvas β CSS: Thoughts on Shorthand
Published: 2013-11-13 11:34:15 +0000 UTC; Views: 3008; Favourites: 13; Downloads: 0
Redirect to original
Description
/* ---- Goners / Importants ---- */ body div#devskin10621483 .gr { padding:0!important; } body div#devskin10621483 .gr-top img, body div#devskin10621483 .gr1, body div#devskin10621483 .gr2, body div#devskin10621483 .gr3, body div#devskin10621483 .tri, body div#devskin10621483 .prevlink, body div#devskin10621483 .lit img, body div#devskin10621483 .external:after, body div#devskin10621483 .user-symbol, body div#devskin10621483 .list img, body div#devskin10621483 .commentslink, body div#devskin10621483 .gr-top span { display:none; } /* ---- Universal Selector ---- */ body div#devskin10621483 * { background:transparent; border:none; margin:0; padding:0; } /* ---- user symbols ---- */ body div#devskin10621483 .banned.username:before { content:'!' !important; } body div#devskin10621483 .group.username:before { content:'#' !important; } body div#devskin10621483 .regular.username:before { content:'~' !important; } body div#devskin10621483 .hell.username:before { content:'*' !important; } body div#devskin10621483 .hell-beta.username:before { content:'=' !important; } body div#devskin10621483 .premium.username:before { content:'*' !important; } body div#devskin10621483 .beta.username:before { content:'=' !important; } body div#devskin10621483 .senior.username:before { content:'`' !important; } body div#devskin10621483 .volunteer.username:before { content:'^' !important; } body div#devskin10621483 .admin.username:before { content:'$' !important; } /* ----- List tweaking ----- */ body div#devskin10621483 ul, body div#devskin10621483 ol, body div#devskin10621483 ul ul, body div#devskin10621483 ol ol, body div#devskin10621483 ul ul ul, body div#devskin10621483 ol ol ol { margin-left:30px; } /* ---- gr-box ---- */ body div#devskin10621483 .gr-box { background:url('https://fc06.deviantart.net/fs71/f/2013/315/e/e/journalskinbase_by_celvas-d6tvzn7.jpg') repeat; width:400px; border:1px solid #808080; border-bottom:none; border-bottom-right-radius:4px; -moz-border-bottom-right-radius:4px; -webkit-border-bottom-right-radius:4px; border-bottom-left-radius:4px; -moz-border-bottom-left-radius:4px; -webkit-border-bottom-left-radius:4px; margin:auto; margin-bottom:15px; } /* ---- gr-top ---- */ body div#devskin10621483 .gr-top { background:url('https://fc06.deviantart.net/fs71/f/2013/319/7/a/infofiximage_by_celvas-d6udxpe.png') no-repeat center top; width:400px; height:92px; } /* ---- gr-top h2 ---- */ body div#devskin10621483 .gr-top h2 { padding-top:40px; color:#e9e9e9; font-family:'Verdana', sans-serif; font-size:12pt; font-weight:600; text-align:center; } body div#devskin10621483 .gr-top h2, body div#devskin10621483 .gr-top h2 a, body div#devskin10621483 .gr-top h2 a:hover { color:#e9e9e9; } /* ---- content div ---- */ body div#devskin10621483 .content { margin-bottom:-30px; padding:15px 20px; color:#333; text-align:justify; } /* ---- blockquote ---- */ body div#devskin10621483 blockquote { border:1px solid #333; width:80%; margin:auto; padding:10px; } /* ---- black bg span ---- */ body div#devskin10621483 span.blackbg { background:#a11300; padding:0 1px; color:rgb(255, 255, 255); color:rgba(255, 255, 255, 0.0); } /* ---- footer ---- */ body div#devskin10621483 .stfooter { background:url('https://fc06.deviantart.net/fs71/f/2013/319/7/a/infofiximage_by_celvas-d6udxpe.png') no-repeat 0 -262px; width:400px; height:11px; }
Using a shorthand property is a lot like spring-cleaning: you want to decide what you keep and what you throw out, and just like spring-cleaning things can get confusing when you put it all in one bag.
This shorthand
border: 1px solid #000;
could very well be:
border-weight: 1px;
border-style: solid;
border-color: #000;
So, shorthand is cool, right? Gives the impression of being less code, you have everything in one line, and dang, does it make you look like you know sh**.
Yarp and narp. While I do use shorthand like I didn't know that three values in one property can actually mean that each value has its own property (remember the part about more than one value associated with a property equals the possibility of using shorthand and thinking it's the only way), I find it important to tell you that there are upsides to not using a shorthand despite its availability.
One, obviously, is to prevent confusion. When you're proficient in working with CSS, cool, but when you're not, you'll want to code in a way that makes it easy on you to learn. It doesn't help you to have to troubleshoot shorthands because you don't understand them, or rather: don't remember what's what. Don't think this could possibly happen? Well...
font: 300 italic small-caps 1em/1.5em 'Trebuchet MS', sans-serif;
That's a font shorthand variant. One additional thing to keep in mind with this one: font shorthand only works when font-family (Trebuchet MS), and font-size (1em) are both specified. Stuff like that can be one mother to maintain. In order to overwrite one value inside the shorthand, you'll have to use the whole shorthand all over, just with the one value changed, which impairs the flexibility of your code.
By all means, use shorthand. It's there to be used. Just be clear about instances where you'd rather avoid it and use each property plus value for itself.
Clarity. Maintainabilty. Explicitness.
Related content
Comments: 18
It doesΒ make me look like I know sh**
I usually use shorthand for padding/margins and borders. I didn't even know you could use shorthand for fonts. O.o Looks way more painful than the regular lengthy code.
π: 0 β©: 1
Oh yeah, you can. And while padding/margin/border/border-radius shorthands do make you look like you know sh**, using the font shorthand, in my opinion, just makes you a giant you-know-what in the face of someone trying to work with your code. It's that fat spider landing on your nose when you least expect it. The mosquito whirring around your head in the night that you can't get rid of. It's just kind of convoluted. I am wondering who, in fact, needs it - "needs it" in a sense that breaking it up is not the better way. I suppose you've read the quote in my deviantID widget. Totally applies.
π: 0 β©: 1
Oh yeah, reading someone else's code is often difficult just because it's not what you're used to. Adding some crazy shorthand would make the other coder want to strangle you.
Lol, yes. I love the quote. 
I really need to update all of them, but I've continued to put it off for months now. 
π: 0 β©: 1
Reading my code must be a breeze. 
I feel the same! I still get the odd comment on my first journal skin, and it's never, "Hey, you know your code is crap, right?" It's always, "Oh, wow, thak you for this skin, exactly what I was looking for!" And I just want to take that thing and code it all over, and I would, if I weren't so lazy.
π: 0 β©: 0
I usually use it, but I never use it for font. Don't know why. Just never have 
π: 0 β©: 2
I swear all the deviations and journals I checked out today had all been commented on by you. Β
Just thought I'd stalk this comment as well since I've stalked a lot of your other ones today.
π: 0 β©: 1
Have I been commenting more today? 
π: 0 β©: 1
I have no idea. I think we just both watch the same people and look at the same things.
π: 0 β©: 0
Haha, yeah. Don't know why, either. It totally lends itself for easy appliance.
It's like taking a word and saying it all over again; say it often enough and it won't make sense anymore. That's font shorthand.
π: 0 β©: 0
I love shorthand, and use it in a lot of my codes (for example in padding/margin, border, etc.) but I do still like to break some bits apart because (font is one of them), like you said, it helps with troubleshooting. Also, in regards to padding, if I'm only manipulating one or two values, I tend to use the longhand rather than the shorthand alternative.Β
It's important to remember how they're broken down though, since if you go into Email design, you can't use shorthand, everything has to be defined explicitly.
π: 0 β©: 1
Think Framework CSS. In my humble opinion, the shorthand should not be the first thing you learn about a string of properties. You already called out the reason, Cat: you never know when you'll need to go explicit all over implicit. I did say that I use shorthand, too, and with deviantART journal skins many downs of it don't apply, but all in all: you CAN use shorthand, but you don't have to.
Aaaand thank you for your comment, Angel-Shake.
π: 0 β©: 1
Must confess, when I started building HTML Emails, I had to Google the explicit border styles XD I knew what to look for, but didn't know exactly what the correct code was
π: 0 β©: 1
No shame there. When I go for the font short from scratch, I've got to look it up time and again. Which is why I usually break it up. Works and gives me no headaches to speak of.
π: 0 β©: 1
Font is always the one I break up XD always.
π: 0 β©: 1
It just ... doesn't seem worth it, does it.
π: 0 β©: 1
Haha no, it surely does not XD
π: 0 β©: 0