CSS practice my best (Yoda level)
Coding evolves every single day. I found its harder to keep in trend with coding than follow up to the fashion world. Well, to begin with, I love simple and timeless fashion. The look that never grow old even after a decade.
Ok, back to coding. So here are my kickass CSS practices.
1. Coder = artist
Yep. Read the above sub title again.
Every single time I code, I feel like Leonardo da Vinci, minus the hat and beards. Readability is my highest priority when coding. Not just write some code, dust your hand and walk away. I will make it so nice to read (for programmer) that they will fall in love with my code, even though they are there to copy paste my awesome codes.
2. Code for others
If you are solo programmer, fine. You can skip this section.
But coding in a community requires you to think that, the next person to modify your code knows where you hide the codes. Not just some rojak coding (rojak is a type of mixed dessert in Malaysia). Do others a favor. Will you still remember where you hide your codes after 5 years? How quick can you find it?
3. Alphabetical order
This is much debatable. Some experts prefer to sort by classification. My stand point is, we all know how to sort alphabetically. Everyone know color comes after border. It’s requires zero learning.
background: #fff;
border: 1px solid #eee;
color: #333;
height: 100px;
margin: 0 auto;
width: 100px;
4. Name your id/class like Apple
Who the hell would think of a color as “space gray”? Ok, don’t name your class as space gray. I’m just giving example. I will send you outer space with the back of my palm.
Name your class for what’s inside. If the content is an introduction, name it that way. If you can give the name shorter, like intro short for introduction, better. Keep it simple. Avoid guessing as much as possible.
Underscore or hyphen?
I will prefer underscore because of one reason, I can double click it to select the whole name connected by underscore. This isn’t significant improvement but if you repeat editing this action a lot, you will hear someone whisper “I told you so”.
Update 3 Jun 2014: Matt Cutts from Google has a solid reason why they recommend underscore more than hyphen. For the sake of page ranking, I’ll kill smaug.
5. Top-down structure with commenting and generous spacing
Put your header css above footer, or article h2 above article p. Comment properly too and indentation is up to you. I don’t prefer to use indentation because editing online doesn’t have indentation. After all this, Yoda optimise his CSS always.
/*************
*** header ***
**************/
header {
background: #000;
}
/*************
** article ***
**************/
article {
background: #222;
}
/*************
*** footer ***
**************/
footer {
background: #000;
}
Some people just want to watch the world burn by giving inconsistent spacing and indentation in CSS. Double spacing or no spacing annoy the hell out of me. Extra spacing here and there tells me that you had a horrible diarrhea that morning.
6. Power ranger chaining
Just like designing for user experience, the efficiency of amount of clicks reflect to user closer to their desire content and user satisfaction. The same for writing CSS, the shorter your chaining, the easier to maintain and more usable, hence more happy coders. Keep it under 5 chain. #about .power-ranger .red rather than article#about .testimonial .span-4-1 p.power-ranger span .red.
Take advantage of CSS specificity. Check out specificity wars. This will improve your chaining.
Bonus: Remember to have fun
Years ago, while solely working on a mini project, I had a crazy artist feeling and decided to write the CSS to portrait a battlefield camp. The picture above is the idea for the story before I start coding.
Check out the full CSS if you must.
I had a fun time for that project even though is a small, simple, rushing and solo project.
Posted on 19 September 2013
Cover image credit: http://starwarsquotes.tumblr.com/post/968682404/luke-skywalker-i-cant-its-too-big-yoda
