Explain which div you’re closing
Most of the time when I’m viewing a website source, я вижу, в самом низу страницы, почти бесконечный список закрытия</ДИВ> теги. по факту, многие новички думают, что они просто должны использовать дивы вместо таблицы для создания качественного кода. Divs уборщики, чем столы, but without proper code organization, it can be as (or even sometimes more) messy as table based code.
Using indentation is a good start. But a tip that can definitely make you save lot of time is to comment every div tag you’re closing, as shown in the example below:
<div id="заголовок"> <div id="sub"> ... </ДИВ><!-- #sub.first.left --> </ДИВ><!-- #header -->
Use a CSS reset
Unless you’re a beginner or if you were on vacation on a desert island for the last 6 лет, you might already know how useful a CSS reset it. Because by default, browsers don’t apply the same default styling to HTML elements, a CSS reset will ensure that all element have no particular style so you can define your own without the risk of many cross-browser rendering issues.
HTML, тело, ДИВ, span, applet, объект, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, до, a, abbr, acronym, address, big, цитировать, код, del, д.ф.н., в, шрифт, img, ins, KBD, Q, s, маисовая крупа, маленький, strike, strong, sub, sup, tt, var, б, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, этикетка, легенда, table, caption, tbody, tfoot, thead, tr, го, td { поле: 0; набивка: 0; граница: 0; контур: 0; font-size: 100%; vertical-align: baseline; фон: прозрачный; } тело { line-height: 1; } ol, ul { list-style: никто; } blockquote, Q { цитаты: никто; } blockquote:до, blockquote:после, Q:до, Q:после { содержание: ''; содержание: никто; } /* remember to define focus styles! */ :фокус { контур: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: никто; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; }
Источник:http://meyerweb.com/eric/tools/css/reset/index.html
Don’t use @import
CSS files can be included using the @import directive. This can be useful when, например, you want to include a stylesheet into another. Another common practice is to include CSS file in html documents using the following:
<style type="text/css> @import url('a.css'); @import url('b.css'); </style>
While it works, the@import directive is much slower than the other way to include stylesheets into a html document:
<link rel='stylesheet' type='text/css' href='a.css'> <link rel='stylesheet' type='text/css' href='proxy.css'>
It will not make a difference on low traffic websites, but if you have the chance to own a popular website, don’t waste your visitor’s time using@import.
Источник:http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
“Smush” your images
Being a developer, I always found that optimizing my images for the web wasn’t easy. I tried the good old “Save for web” Photoshop command, but most of the time, I ended up with images that were either too big or without a sufficient quality.
В следствии, I had the bad habit of using unoptimized images on my websites. This isn’t a problem when you don’t have to care about your site’s bandwidth, but after my recent switch on myvps.net virtual private server, I had to be careful with image sizes.
At this time, I found a very cool tool namedSmush Это: You enter your unoptimized image url, and Smush It will create a perfectly optimized image for you. You can save up to 70% of the file size, while keeping the original quality. As an example, all the images from mylist of online code editors have been “smushed”.
Don’t mix CSS with HTML
As a markup language, the right use of HTML is to organize documents by defining a header, a footer, lists, blockquotes, так далее. Some time ago, front-end web developers often used now deprecated HTML attributes to style a particular element.
Настоящее время, thestyle attribute allows developers to insert CSS directly into a html document. This is very useful for testing or when you’re in a hurry. But thestyle attribute is bad practice, that goes completely against the CSS philosophy.
The following example illustrates how dirty and hard to read a simple line of code can become, сstyle attribute:
<a href="HTTP://www.catswhocode.com" стиль ="фон:#069;набивка:3ПВ;font-weight:смелый;цвет:#fff;">Cats Who Code</a>
Don’t mix Javascript with HTML
Just like mixing your html code with css is bad practice, you shouldn’t use any Javascript in your html documents. The following bad practice illustrates anonclick событие:
<a id="cwc" href="HTTP://www.catswhocode.com" onclick="бдительный('I love this site!');">Cats Who Code</a>
The same result can be achieved using unobstructed Javascript. В этом примере, I’m using the popular jQuery framework:
$(document).готовы(функция() { $('#cwc').щелчок(функция() { бдительный('I love this website'); }); });
This may seems a bit harder at first, especially for beginners; but it is definitely not, and it will keep your html document clean.
Use conditional comments
You know it, IE sucks, and some clients suck even more by requiring you to create webpages which are compatible with this obsolete browser. To target specific versions of IE, you can use the well known IE hacks, как показано ниже:
рост: 200ПВ; /* normal browsers */ _height: 300ПВ; /* IE6 */ .рост: 250ПВ; /* IE7 */ *рост: 350ПВ; /* All IEs */
Those hacks are extremely useful sometimes, but they are not the best way to target a specific version of IE, and it will cause your CSS validation to fail.
Вместо, you should use the conditional comment shown below to target IE6.
<link href="style.css" rel="stylesheet" тип ="text/css" /> <!--[if lte IE 6]> <link href="ie.css" rel="stylesheet" тип ="text/css" /> <![endif]-->
Place Javascript file at the bottom
A popular practice of the late 90′s/early 2000′s was to place Javascript files within the<голова> а также</голова> теги. The problem is that your javascript files will be loaded first, and consequently your content will be loaded after.
By placing Javascript files at the bottom of your documents, you’ll ensure that JS files will be loaded only when the content has been properly displayed.
...
<script type='text/javascript' src='jquery.js?ver=1.3.2'></скрипт>
</тело>
</HTML>
Use HTML semantically
HTML is not a programming language. It is a markup language, used to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, и больше.
If you started to create websites in the good old 90′s or in the beginning of the century, you know how dirty the markup was at the time. But happilly, it has evolved.
Among other things, it is important to use html element semantically. As an example, a navigation menu should always be an unordered list:
<ul> <li><a href="#">Главная</a></li> <li><a href="#">Около</a></li> <li><a href="#">контакт</a></li> <li><a href="#">Блог</a></li> </ul>
Test WHILE you build to avoid cross-browser issues
One of the biggest mistake I ever made when developing html, CSS, and javascript, was not to test my pages on multiple browser while I was writing them. Вместо, I used to write all my code and just view in Firefox to see how it was rendered.
