10 Top Notch CSS Principles of the Experts

Majority of the designs on the web now are powered by the CSS. These Cascade Style Sheets seem very simple therefore it is often ignored. Designers need to understand that CSS can be an extremely powerful language if used properly.

Due to it’s simplicity it is believed that anyone can just code templates in CSS, but there is a reason why the experts and gurus are still at the top. That is because they follow the top notch CSS principles. I will share some of the tricks that I have learned after talking to multiple designers over the course of my career.

1. Use CSS Shorthand System

This seem like a very simple trick but like I said it is the simple tricks that makes you a pro. Beginners / Newbies often ignore this feature. It takes a while to get used to of it, but once you do you save yourself a lot of time, and you are making your CSS File smaller. To give you an example of a CSS shorthand system would be:

Lets say you have a div class that you are setting padding to. Instead of saying padding-right: 0.5em; padding-left: 1em and so on you can just use padding: 0 0.5em 0 1em; It goes like padding: top right bottom left;

Same goes for the margin. Another example would be setting borders – border-width:1px; border-style:solid; border-color:#000; You can simply say border: 1px solid #000;

This type of techniques will help speed up the process and it is one of the principle code that is followed among the top notch designers. [Source]

2. Essence of Class Names

Appropriate Class names define an expert designer. You might think it is useless and a waste of time. But by naming your classes efficiently, you are comforming to the standard, and you are increasing your reputation in the community. How so? Well when you design a website, that client might not always stick with you. They might branch out, or get their own design department. Now if you have a well guided CSS class names, they would get respect for you. Forget the respect, it just makes it easier for others to understand your CSS.

Lets say you name a class .rssbox or you can say .sidebarbox well there could be multiple elements in the sidebar, so you don’t know which one it is. Naming it .rssbox is probably the way to go. It might take the extra 2 seconds, but putting thoughts into class names is worth it.

3. Center your Layouts with CSS

Centered layouts are the future of the web because it allows designers to be more creative and it just looks better on the screen. Alot of sites use tables to center and use divs the rest of the site. The fact is that most people don’t know how to center the layouts using css.

It is very simple actually. Lets say you are calling your class .main-container{margin: 0 auto; width: 950px; text-align: left;} whereas your body css would look like body{text-align: center;}

This should get the job done just fine. This method helps your website looks organized and neat.

4. Using the Correct Doctype

DOCTYPE is a key solution to alot of CSS Problems. This is a crucial part of design which gets overlooked very often. Using an incomplete or outdated DOCTYPE or no DOCTYPE at all throws the same browsers into Crazy mode, where it assumes you’ve written old-fashioned, invalid markup and code.

So Basically I am saying that if your site is not looking like how it should in all browsers than this could be one of the problems that you need to check.

5. Use Notes within Your Codes

It really helps when a CSS file is well guided. You need to divide the css files into sections. For example header section, content section, sidebar section, and footer section. Obviously a complete site is more complex and may have more sections. But this is what you should do. This way you know exactly where to look for when you encounter an error, or when you want to change something. Well how do you make these notes in your css file?

You add /* Notes */ in your css file. I learnt this technique during the latter part of my career. That is why now I try to add as much notes in the css file to help. Specially if I am designing a free theme.

6. Keep Your CSS File Small

You need to keep your CSS file small because it helps the load time of the site. How can you do that. Remove unnecessary characters, and spaces from your CSS File. Embracing Short Hands as mentioned above will do this for you. Another technique alot of CSS Experts suggest is that you keep your codes in one line.

For example if you have

body{
background: #fff;
color: #333;
font-size: 9pt;
margin: 0;
padding: 0;
}

You should instead use

body{background: #fff; color: #333; font-size: 9pt; margin: 0; padding: 0;}

Because this cut the space down. I personally don’t do it that way because for me it is more organized the other way, but I have seen this done alot. You can take your pick.

7. Don’t Force the Codes

CSS is a simple language, but when you force the codes, it ends up breaking your website. What do I mean by forcing the codes? Well forcing a code is when you set width and margins at the same time. Have you ever opened a website and saw the sidebar scrolled all the way down to the footer below the content. That is just one of the common problems forcing codes can do.

A good advice to take would be if you set a width, then don’t set margin or padding. And if you are setting a margin or padding, then don’t set a width.

Using a box style template system can cause alot of problems if you use percents in your design structure. Note if you are using a box style system without percentages then you can force codes.

8. Use px instead of pt or em for fonts

Are you designing a website for the web. I hope you are. Well than you should be using px for your font sizes. I mean you can use pt system as well, but you might end up getting different results in the browser. If you are thinking about users printing your site than stick with pt but if you want the accuracy go with px.

I personally use pt for balkhis because alot of my users print the articles to read. Just remember that at the end day it is your own choice because I can’t enforce anything on you.

Great Article on CSS Font Size Selection

9. Avoid Hacks

It is becoming more and more acceptable to use hacks in the CSS community, but experts still preach that you should avoid using those. I would be another one to tell you that you should not use CSS Hacks. Reason is simple. You are avoiding simple problems and looking for more complicated ones. While you may think that one or two hacks every now and then won’t hurt anyone, getting into the mindset of “hacking through” any problems you encounter can have a negative impact on your overall design mentality.

Always Validate

I give this advice to not only designers but programmers also. If you are spending time to code a website than might as well validate it with W3C Validator. Validating your code allows you to clean up any problems and ensure that it’s going to work well for all of your visitors.

Now often designers do this job and programmers leave it out. Specially you will have alot of plugins that are not css valid. You might fix them once, and if the update comes out, there you go more work. That is why Balkhis is not CSS valid right now.

Well anyways these are the 10 top notch CSS Principles that I have learned from the experts and my own experience. Feel free to put your own down in the comment box. If you like this post then all Social Media love is appreciated.