10 CSS Coding Tips Every Designer and Developer Should Know
Ever wondered how a website which is written in simple HTML script, looks so organized, structured and charismatic on your web browser’s display? The answer is because it has CSS code as its backbone. CSS or Cascading Style Sheet is a style sheet language used to define the display and the overall outlook of a document that has been written in any of the markup languages, which is usually HTML or XHTML. CSS has been a relatively newer addition to the web designing tools and techniques bracket and it has eased off the stress lines from the forehead of web designers by making their task easier and more efficient.
However; given its strong influence, CSS sometimes intimidates web designers to perform actions that ultimately affect the display of the website in an adverse manner. To make sure that you use CSS in its right and authentic manner, it is important to know about the details and features of this style sheet language.
Skip straight to Stone River eLearning to learn CSS online or learn CSS and HTML5 online.
Below are some tips that will help you in improving how you use CSS on your website.
1. Keep it Real
This is one challenge that many CSS designers face while working on the language. With the all the features and various changes it can make to the webpage, developers often get carried away by the powers of CSS and start doing things that they should probably avoid. The main purpose of CSS is to make your webpage look organized and well planned, therefore; having different font sizes and over-the–top colours on the webpage only makes it look amateur and unattractive. The idea is to keep it as simple and real as possible.
2. Make it Organized
Use a coherent structure to style you webpage instead of simply dropping ids’ and classes without any structure. Declare the most generic and big items fist followed by the next one in the list and finally the small classes and ids. Remember; the more organized your style sheet looks, the better results it will give on the webpage.
3. Say Yes to hyphens, and No to underscores
Some browsers do not support the use of hyphens in WebPages and then despite doing everything right, the designer has to start the debugging process for an error that does not really exist. Therefore, to avoid such a scenario, it is always better to create a habit of using hyphens instead of underscore in your style sheet.
Eg:
Good Choice:
#col-apha
Bad Choice:
#col_alpha
4. Show your work, reveal yourself
Do not shy away from letting others know who made the style sheet by mentioning your name, the date and the contact information on the style sheet. A lot of people misjudge it as boasting about one’s skills, however; it is more like giving your final touch to the style sheet that you created. Just like painters sign off their paintings, web designers must do it too. This practice is particularly useful when designing templates or when the website designing is distributed among different people. Make sure you give these details in inside the comment section of the style sheet.
Eg:
/*
Hugh Jackman
Copyright 2014
Written for: www.xmenwolverine.com
*/
h2 {
font-size:18px;
border:1px solid blue;
color:#000;
background-color:#FFF;
}
5. Swatch Colors
This is one tip that I feel is extremely useful for updating, editing of style sheet. Again, it is also of great utility if you are working on templates or working on a project that is distributed among different individuals. Swatch colors is nothing but mentioning the name of the colour along with their respective color codes at the start of the style sheet to make it easier for others to understand and it also give a nice and good impression about your work. It goes without saying that this content must also be included inside the comment section.
Eg:
/*
FFF - White
000 – Black
*/
h2 {
font-size:18px;
border:1px solid blue;
color:#000;
background-color:#FFF;
}
6. Naming Convention
This is one tip that keeps popping up in every single article about the correct way of working on any programming language, regardless of the programming language you are working on, and still people tend to forget or neglect it. Having a proper naming convention is extremely important in CSS as the door for future edits and updating is always wide open. Having irrelevant or contradicting names to the elements on your style sheet will only create troubles for you in the future. Therefore, name elements on the basis of what they are and not they do and make it a habit to maintain a convention throughout the style sheet.
7. The smaller, the better, but you can make your choice
Now this is something that a few of you might find a little surprising and confusing, but the fact is, having all the CSS declarations about a particular ids’ and classes, in the same line is actually a better practice than having it distributed over multiple lines. Newbies’ prefer having the declaration in multiple line as they feel that it gives the style sheet more clarity and makes it easier to understand, however; as you grow older in the world of CSS, you will realize that scanning through a style sheet is much easier when the declarations of a particular ids’ and classes, are in the same line. Having said that, I have realized that different people have different opinions to this tip as some like it together and others prefer it distributed, therefore; I will advice you to make your own choice according to the need and the number of declarations for the ids’ and classes.
Eg:
Good Practice:
h2 {
font-size:18px;
border:1px solid blue;
color:#000;
background-color:#FFF;
}
Better Practice:
{font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}
I know what you are thinking, “How is it better? The first one looks clearer to me.” Well, give yourself some time with CSS and you will understand why the one that ‘looks’ clearer is not always the better option.
8. Shorthand is the way forward
Most of us have the knowledge of using shorthand but we prefer not taking the option because we feel that it over-complicates things. Well, keeping the style sheet smaller is very important these days and every step that can be done to achieve it must be taken with open arms. In fact, short hand is not that complicated once you get the feel of it and understand it to the core. It is actually a lot easier and efficient way of declaring on the style sheet.
Eg:
Without Shorthand:
margin-top:1em; margin-right:0; margin-bottom:2em; margin-left:0.5em;
With Shorthand:
margin:1em 0 2em 0.5em;
9. Avoid Reusing
If more than one ids’ in your style sheet uses the same declarations and styling operations, it is always a good choice to merge them, provided they fall under the same category or class. It not only saves space and makes the style sheet shorter, but it also makes it more organised. Confused? The Example below will help you understand it better.
Bad Choice:
h1 {
font-size:18px;
border:1px solid blue;
color:#000;
background-color:#FFF;
}
h2 {
font-size:18px;
border:1px solid blue;
color:#000;
background-color:#FFF;
}
Good Choice:
h1, h2 {
font-size:18px;
border:1px solid blue;
color:#000;
background-color:#FFF;
}
10. Write for Gecko, tweak for Webkit if required
The problem of inadequate browser support and outdated version of web browsers is a pertaining issue and the best way to deal with it, is by being prepared. It is always a good choice to formulate your style sheet for Gecko browsers (Firefox, Netscape) first and then make the changes in Webkit (Safari, Chrome) or Internet Explorer, if required. Usually, a code that works fine in Gecko; does the same in Webkit browsers as well, therefore; it is better to take the safer route in this case.
Thanks for reading and don’t forget to visit Stone River eLearning to pick your perfect CSS elearning course today.