5 Important CSS Tips

Đã đăng vào - Cập Nhật Lần Cuối vào

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. 

Đăng Ký Nhận Cập Nhật Hàng Tuần Ngay

Hãy luôn cập nhật các bài viết tốt nhất trên Cộng Đồng Freelancer. Hãy đăng ký ngay để nhận được các nội dung tốt nhất về Thiết Kế, Phát Triển và việc Freelance hàng tuần.

Đã đăng 19 tháng 12, 2014

Happymarli

PRO. Proofreader, Editor, Writer and App Developer

Do you need a professional editor and writer to proofread your technical document, thesis, novel, statement of purpose, personal statement, resume, cover letter, manuscript, essay, short story, textbook content, article, and marketing material ensuring their content is flawless and appealing to readers? Why Hire Me? 1) I have a 5 star average rating for 2634+ projects completed on freelancer....

Bài Viết Tiếp Theo

Converting a Code Sample from Java7 to Java8