HTML and CSS Coding Standards

1 Markup and CSS Code Standardization.| Prepared by: Saajan Maharjan,
designersaajan@gmail.com, Kathmandu ,Nepal.
Coding Standards
1.Comments on Code
Commented on Markup

Text information is separated from the tag by a “space ”. No additional symbols are
required.
This form is incorrect:


You should comment:
1. main markup blocks (header, footer etc.)
2. main semantic blocks and elements (logo, navigation, breadcrumbs, article
etc.}
3. main functional blocks and elements (sub-navigation, popup, search contact
form etc.}
If it is impossible to find a semantic title, you can use a block heading or class as a title:

or

An example of the correct HTML comment:




Commented on CSS
/* article */

Text information is separated by a "space". No other additional symbols are required.
There is no need in closing comments. Just mark the beginning of the block styles.
The following form is incorrect:
/* ##### article ##### */
/* --== article ==-- */
Initial reset of elements (even if it is very small) should be commented as /* General
reset */.
Comments in CSS must correspond the comments in HTML.
If after "General reset" there follows the declaration of all main blocks, it is mentioned as
/* General settings */:
/* General settings */
#header{...}
#content{...}
#sidebar{...}
#footer{...}
An example of the correct CSS comment:
/* main */
/* header */
/* navigation */
/* content */
File Naming and Organization
The following example file structure should be used for static resources (framework-
specific conventions take precedence):
/css
/reset.css
/main.css
/ie.css
/images
/btn-submit.png
/btn-submit-SOURCE.psd
/js

Best Practices
 Use a global reset. A global reset helps create more consistent presentation
across browsers.
 Use sprites for all rollover/active states. CSS sprites prevent unwanted image
flicker on rollover. CSS sprites also reduce the total number of HTTP requests.
 Use as few browser-specific styles as possible. If needed, browser-specific
stylesheets or page classes (http://paulirish.com/2008/conditional-stylesheets-vs-
css-hacks-answer-neither/) should be used instead of putting CSS hacks in the
main stylesheet.
 Validate CSS.
Optimization Code and file
1. Use shorthand
If you’re not already writing in shorthand, you’re late to the party. But fortunately, this
party never ends. Using shorthand properties is the single easiest practice you can do to
cut down your code (and coding time). There’s no better time than the present to start
this efficient coding practice, or to review it.
Margin, border, padding, background, font, list-style, and even outline are all properties
that allow shorthand (and that’s not even an extensive list!).
CSS Shorthand means that instead of using different declarations for related
properties…
p { margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px; }
… you may use shorthand properties to combine those values like so:
p { margin: 10px 20px 30px 40px; }
2. Axe the Hacks
we know that using conditional comments to serve hacks correctional declarations for IE6 and
IE7 is an accepted practice, even recommended by the Microsoft IE development team. Using
conditional comments to serve IE-specific CSS rules has the added benefit of serving a cleaner,
and therefore smaller, default CSS file to more standards-compliant browsers, while only those
browsers that need the hackery daiquri (i.e. IE) will download the additional page weight.

Here’s how to use conditional comments to serve styles only to Internet Explorer 6:

3.Optimize the file
Optimize the jpg and png
PNG is useful because it's the only widely supported format that can store partially
transparent images. The format uses compression, but the files can still be large. Use
PNGauntlet and to optimize the jpeg file use the jpegmini tools to shrink images for your
apps and sites. It will use less bandwidth and load faster.
PNG optimize tool
4.Optimize the js code and css code
Use the single file for the js and css file as follows the all.css for all the css code and
jquery.js for all the customize jquery code.

5. Use whitespace wisely
Whitespace, including spaces, tabs, and extra line breaks, is important for readability for
CSS code. However, whitespace does add, however miniscule it may be, to page
weight. Every space, line-break, and tab you can eliminate is like having one less
character. Always favor for single line formatting option without tabs. Eg. As follows
Multi-line formatting, double-spaced, indented code
Example
.code-standard{
background:transparent;
width:205px;
border:none;
overflow:hidden;
cursor:pointer;
}
Single-line formatting, single-spaced, no indentation
Example
.code-
standard{background:transparent;width:205px;border:none;overflow:hidden;cursor:poi
nter;}
6.Tidying up your HTML tags with indentation
You may already be finding that it is a bit hard to look at the HTML in your editor and to
understand it. Part of this will be the layout (part will be that HTML is confusing for a
while).
To help you to see the structure of a Web page's HTML it is best to indent the code. This
means putting tabs into your HTML. Remember that these tabs will not be shown on the

Web page (extra spaces and tabs are ignored by browsers the same way as line
breaks).
The idea is to put a tab before each line of code which is inside another tag. This makes
more sense if you see it. This is what you have in your file so far but properly indented:
Example
Wrong and untidy markup indention

Clean markup with Proper indention.
What Beautiful HTML Code Looks Like
http://css-tricks.com/examples/CleanCode/Beautiful-HTML.png
6.Use HTML and CSS Validator
Why Code validation for?
 Validation as a debugging tool
 Validation as a future-proof quality check
 Validation eases maintenance
 Validation helps teach good practices
 Validation is a sign of professionalism
For Markup validation use
http://validator.w3.org/

For CSS validation use
http://jigsaw.w3.org/css-validator/
Use the same class for all the markup and css
standard
Class names
 .panel, .bar (block with navigation and additional elements)
 .navbar (block with navigation. There can be additional elements)
 .navigation (block / list for navigation only)
 .main-nav (.main-navigation - main navigation)
 .add-nav (.add-navigation – additional navigation)
 .breadcrumbs (block / list with breadcrumbs)
 .tags (used for tags / tag list displaying)
 .topiclist (list of topics)
 .item-list (.product-list, .article-list, .recent-articles) – list of items (products), list of
articles (sections), list of the most frequent articles (sections)
 .paging ( block / list with pagination)
 .news (.news-list) – a list of news
 .tools (a list with icons (home, contact, sitemap, print, etc.))
 classes for the items of such list are:
.home, .contact, .sitemap, .print, etc.
Forms
 .login (.login-form)
 .search (.search-form)
 .subscribe (news subscription etc.)
 .newsletter (newsletters subscription)
 .details (a form with contact details)
 .profile (profile)
 .account (account (register entry))
 .information (a additional information form)
 .feedback (feedback communication)
 .poll, survey (poll)
 .vote (voting)
 .some-form (chose an appropriate word instead of “some”)
Step-by-step actions (used for forms, shopping forms etc)
 .steps (steps)

 .step - (step)
Blog
 .post – single post
 .entry-title – post title
 .entry-content - content of the post
 .meta - meta information about the post
 .updated - an update time
 .published - the time of publication
 .date (just em tag) - the date of publication
 .timestamp – label or tag of the post
 .discussion – comments block
 .comments - comments
 .list-comments - list of comments
 .add-comments – add a comment
RSS-icons
 .feed
 .rss
Active states
 .active
 .selected
Other units
 .box (block with borders)
 .block (can be borderless)
 .container (can be borderless)
 .section (for additional section)
 .item (to format a block with additional content, or any singular item, object
etc).
 .products (block with list of products)
 .items (block with a list of any additional elements)
 .article (block for an article or for the item / product description)
 .books (books, book description)
 .calendar (calendar)
 .visual ( block for images (for example: images attache to the article, post))
 .promobox (block for advertisements only)
 .photo (for photos)
 .featured-item (featured items)
 .alignleft, .alignright, .aligncenter (to align an image in the content part)

Header
 .logo
 .slogan
Footer
 .copyright
 .by
 .nav - if the list duplicates navigation links
 .listing (list) – for lists (do not use the class for the list if it is not necessary)
 .doc - if these are links to documentation («privacy», etc.)
Testimonials:
 .testimonials
More
 .all, .more ( link to display all content)
 .another (another)
 .details (link to additional information page)
General page layout
1. main block of the page - #wrapper.
2. main navigation of the page - #nav.
3. ID to be used for the following elements:
o #header (“billhead” of the document);
also possible:
o #main (page content );
o #twocolumns ( column: # content + sidebar);
o #content (content of the column);
o #sidebar (a unique column to the left or the right of the # content);
o #footer (foot of the page);
o elements for JavaScript;
o form elements that are associated with the corresponding label in
for / id.
Examples of marking for pages.

To mark up a unique side column use #sidebar.
To mark up an additional side column use .aside (. aside1,. aside2 if there are
two of them).
 Page with the main column and unique sidebar: ::
Doubleclick to copy
<div id="wrapper">
<div id="header"></div>
<div id="main">
<div id="content"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</div>
 Page with the main column, unique sidebar and one additional column: ::
Doubleclick to copy
<div id="wrapper">
<div id="main">
<div id="twocolumns">
<div class="aside"></div>
</div>
<div id="sidebar"></div>
</div>
</div>
 The page with the main column and two additional columns: ::
Doubleclick to copy
<div id="wrapper">
<div id="main">
<div id="twocolumns">
<div class="aside1"></div>
</div>
<div class="aside2"></div>
</div>

</div>
Naming and accessibility
 logo.gif – main logo of the page
 logo.gif...logo10.gif – logos list
The logo image can be named after the owner's company
Examples: puma.gif, adidas.gif, microsoft.gif, contex.gif, durex.gif
 sponsor-logo1.gif (partner-logo1.gif – depending on the logo list title) – sponsors'
logos can also be named based on the companies' names: adidas.gif,
w3ukraine.gif etc, but please follow a certain logical order f.ex. there must be no
adidas.gif and logo10.gif in one list.
 btn-go.gif, btn-submit.gif, btn-name.gif – for form elements or for big block links.
 text-sometext.gif – for text replacement (titles).
 bg-body.gif, bg-footer.gif – for background images.
 img1.gif, img2.gif, item1.gif, item2.gif – for product lists, or non-systematized
images.
 ico-email.gif, ico-star.gif, flag-ua.gif, flag-uk.gif – for icons.
 separator.gif, divider.gif – if the image is being used as a separator
 bullet.gif(bullet-green.gif, bullet1.gif, bullet5.gif, bullet-small.gif, bullet-medium.gif)
– if the image is being used for list styling.
Variants of naming: arrow, arrow-red, arrow-small, arrow-left etc.
Image title must always be meaningful.
Do not write anything into “alt” attribute to preserve images accessibility.
We only write data into “alt” attribute when there is a demand of Web Accessibility,
SEO or Section508. “Alt” attribute content has to reflect the content or meaning of the
image. If it is impossible/difficult to write the content correctly, then put «image
description» in the “alt”
If Web Accessibility, SEO or Section508 are NOT required then you can set 'image
description' for all images.
If the image is meaningless (simply for design purposes) you don't need to set “alt”
attribute.

HTML and CSS Coding Standards

Recommended

More Related Content

What's hot (20)

Similar to HTML and CSS Coding Standards (20)

Recently uploaded (20)

HTML and CSS Coding Standards