CSS was started in 1997 to help website developers create and design their own attractive web pages. Cascading Style Sheets (CSS) are a type of language used to change the format and look of documents written. There are different types of CSS, but it is widely used and supported on all browsers.
When it comes to using CSS, it can be really easy to get yourself into a big mess. Whether it be from all the small changes here and there, or from a messy job to begin with, it can be a struggle to clean it up. To keep the code clean and easy to manage, there are ways to improve the CSS process from start to finish.
3 Basic Types of CSS Stylesheets
Inline – Inline style sheets have code that is written into the tag of the document. They only have an effect to the tag in which they are applied to.
<a href="#" style="text-decoration: none;">
Embedded – Embedded style sheets have code that comes ’embedded’ into the head of the document. These styles only have an effect on the page in which they are embedded into.
<style type="text/css"> p { color: #00f; } </style>
External – These types of style sheets are created in a separate document. They are then attached to other varieties of web documents. These external style sheets have an effect on any document in which they are attached.
<link rel="stylesheet" type="text/css" href="styles.css" />
Here are 15 best CSS practices
1. Keep Things Organized
When it comes to anything in life, it pays to stay organized. Being organized can make anything less stressful and easier to deal with. This can prove to be especially important when dealing with CSS. Instead of writing code in the order of when it pops into your mind, it is best to keep the code in an organized layout.
Start with the most generic and least important items first and then move on to the more important items farther down. This creates a logical structure that makes editing the CSS much easier in the future. Using a simple layout and structure is not only great for future edits, but for future developers as well.
1. Generic Items (body, a, p, h1, etc.) 2. #header 3. #nav-menu 4. #main-content /****** main content *********/ styles goes here... /****** footer *********/ styles go here...
2. Avoid Inline CSS
Even though inline CSS has its purposes, it should be avoided for some specific reasons. One of the main reasons is that inline styles to not separate the content from the design. This can prove to make development and designing difficult. Another reason to avoid inline CSS is because it is much harder to maintain.
If editing needs to be done on the inline CSS code, once it is gotten rid of, every element on each page that it had been placed will have to be gotten rid of as well. Lastly, inline styles of CSS are not as easily accessible and they make the pages bigger.
3. Separate The Content From The Design
One of the most important reasons for using CSS is for keeping the design code from the HTML and keeping them in another location to make it easier for the designer to locate and maintain. This also proves to be a good idea because the designer of the website doesn’t necessarily have to be the content developer as well.
4. Date, Title and Sign
When others need to ask questions about the CSS, having the contact information located at the top of the code can be really useful. This can be even more useful when designing things such as themes and templates for others. Also, it is a good practice to add the HTML code for the swatch colors at the top of the code as well. This can save the person doing editing and changes a lot of time because they will not have to figure out the colors’ code. All they will need to do is scroll up to the top and copy it.
/*====== Onextrapixel Team Copyright 2011 OXP Written for - www.onextrapixel.com swatch colors ------------- 13437a - dark blue 1d74be - mid blue e1e1e1 - light gray a3a4a4 - mid gray 8a8a8a - gray ======== */
5. Save A Template Library
If the same structure is getting used often in the CSS template, why not keep a copy of it? It would be unnecessary to completely start from scratch every time. To save time, take out all the code that isn’t generic and then save the file as a CSS template for later use.
6. Use Short Hand CSS
To make the style sheet load faster and save time, always code CSS using short hand. This will keep the style sheet nice and neat and is a good CSS coding practice.
Instead of this:
#crayon { margin-left: 5px; margin-right: 7px; margin-top: 8px; }
You should do this:
#crayon { margin: 8px 7px 0px 5px; // top, right, bottom and left values respectively. }
7. Use Useful Naming Practices
Like stated before, one of the best reasons for using CSS is the advantage of being able to separate styles from the content. CSS makes it really simple to redesign a site without having to touch any HTML. If the column ID
are names that would be hard to change in the future, this can be really limiting and add a lot of time. Use names that can be versatile. Don’t name a column col-left
or something like that because in the future it won’t leave much room for moving things around.
8. Use Hyphens In Place Of Underscores
When it comes to older versions of browsers, CSS can become glitchy or not work at all if underscores are used. Using hyphens instead can lead to better backwards compatibility and less glitches.
9. Don’t Be Repetitive
One of the best CSS practices to make your life easier is to use shortcuts when possible. Always be looking for ways to group similar items that might use the same font size, margins, and colors. Keep in mind the way CSS will interpret the those shortcuts. The order is top, right, bottom, and then left. Think of a clockwise motion starting at 12.
h1, h2 { margin: 1em 0 2em 0; font-size: 1em; color: #222; }
Much more efficient than this:
h1 { margin: 1em 0 2em 0; font-size: 1em; color: #222; } h2 { margin: 1em 0 2em 0; font-size: 1em; color: #222; }
10. Avoid Using Really Large Images
Using large images in the background of the web page will increase the page load time. It is a good practice to use smaller images if possible and apply repeat CSS properties where needed.
body { background:url(bg.jpg) repeat-x; }
11. Optimize For Smaller Style Sheets
By using some of the tips from above, it can really help cut down on the size of the style sheet. By having a smaller style sheet, the amount of time it takes for the page to load will be much faster. Also, by having a smaller style sheet, it will be much easier to maintain and update when needed. Always cut out unnecessary code and consolidate whenever possible.
Be careful when using CSS frameworks. These can add a lot of unnecessary bulk that is not needed and will not be used. Another quick tip to keep your style sheet smaller is to not specify zero as a unit of measurement. If the margin is going to be set at 0
, it is not necessary to call it 0px
or 0em
. CSS will understand that zero is zero no matter the unit of measure.
12. Validate The CSS
If things are not coming out as planned with the code, it can be frustrating and time consuming trying to figure out where the errors are. To save some time, use W3C’s CSS validator to help find some common errors in the CSS. It is a free tool to use and really comes in handy.
13. Use Reset CSS
By using CSS reset, browser inconsistencies will be avoided. In practice, it is important to use for removing margins that are inconsistent as well as line-heights, padding, and other attributes that are inconsistent which make the web pages look different among various browsers. Using CSS reset will keep your pages uniform amongst different browsers.
CSS Reset:
html,body,iv,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup, tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; } :focus { outline:0; } body { line-height:1; color:#000; background:#fff; } ol,ul { list-style:none; } table { border-collapse:separate; border-spacing:0; } caption,th,td { text-align:left; font-weight:normal; }
14. Write The Base For Gecko And Then Tweak For IE and Webkit
Usually, if CSS works properly for Gecko browsers (Netscape, Firefox, Mozilla, Camino, Flock), it is much more probable that it will work well in other browsers such as IE and Webkit (Sarari, Chrome). To save time and hassle trying to figure out code errors, it is best to write CSS for Gecko browsers first.
15. Keep Things Tidy
As a habit, it is best to keep browser specific style sheets separate from each other and include JavaScript, conditional comments, and server-side code as needed with it. This method is great for avoiding CSS hacks into the main CSS style sheets. This is imperative for maintaining clean and manageable CSS.
Conclusion
When it comes to using CSS, there are many benefits. Not only does it make pages load faster, but if the 15 best CSS practices to make your life easier from above are used, it can make designing and editing themes and templates much easier. Using CSS style sheets also come with Google benefits. Google likes to give more weight to the content that is closer to the top of the HTML document. When the search engine spiders crawl the HTML of the website, they crawl the content that comes first. By using CSS, one can easily create a layout where the content will appear first, and then the rest of the pages source code will follow.
Using CSS creates more flexibility in designs, templates, and themes. It also provides better accessibility which is the way of the future in web design. Accessibility means that more people will ultimately be able to view the websites without any trouble caused by outdated ways of building websites such as by using tables. Using CSS not only makes life easier now, but will also help in the future.