5 Important CSS Tips

Posted on - Last Modified on

At some point, every programmer will use CSS. While it is often taken for granted, it is still powerful and has a number of nuances that may help, or even hurt, your designs. The top five CSS practices that will help you avoid rather costly mistakes and ensure you write solid CSS are found here.

Make Sure It’s Readable

This is a crucial aspect of CSS, even though many people overlook the reason why it is so important. When you achieve greater readability with your CSS, it will make it easier to maintain in the future, because you will be able to find elements much faster. Additionally, you never know who may have to work with the code at a later date.

There are two basic types of CSS developers:

·         Group 1: The code is included in one, single line.

·         Group 2: Each style is put on a separate line.

You can simply choose the options that looks best to you.

Keep Things Consistent

In addition to keeping it readable, you also need to ensure that the CSS is consistent. In fact, you should begin to develop your own type of ‘sub-language’ relative to CSS that will let you quickly attribute names to certain things. An example of this would always using ‘caption right’ to float images that contain a caption on the right side.

Also, consider if you will use dashes or underscores in your IDs and class names, as well as the situations where they are going to be used. When you begin to create your own CSS standards, you will get more proficient.

Begin with a Framework

There are a number of designers that would never use CSS framework with every single design, but in most cases they will be useful. The key is to be consistent with each project, which will help you achieve stronger results. There are some programmers who have created their own, custom framework over time, which is also a good idea. These actions will help maintain consistency within your projects.

Use a Reset

In most cases, CSS frameworks will have a built-in reset; however, if you are not going to use this, then you should, at the very least, consider using the reset. The reset is essentially what will eliminate any inconsistencies in different browsers, such as headings, margins, font sizes, heights, etc. Adding a reset will ensure that the layout appears the same in all the different browsers.

An example of a simple reset style sheet in public domain is given below:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Source: http://meyerweb.com/eric/tools/css/reset/index.html

Combine the Different Elements

There are some elements in your stylesheet that will share properties. Rather than re-writing the prior code, simply combine them. An example of this would be with your h1, h2, and h3 elements that share all the same color and font. This can written as: h1, h2, h3 {font-family: Calibri, color: #343}.

Using the best practices and tips for CSS will not only ensure your design looks better, but also that you will be able to change it down the road if you desire. 

Posted 19 December, 2014

Happymarli

Proofreader, Editor, Writer and App Developer

Do you need a professional editor and writer to proofread your technical documents, thesis, novel, statement of purpose, personal statement, resume, cover letter, manuscript, essay, short story, textbook content, or articles? Do you want to make sure that your marketing material content is flawless and appealing to readers? I can do any of that! I am a professional editor (academic, copy, line/su...

Next Article

Converting a Code Sample from Java7 to Java8