RSS

Tag Archives: html

More Comprehensive Naming Convention

Indentation

Indentation

Indentation must be used if the line is associated with the previous line. When indentation is needed, use conventional indentation (one “Tab”).

Example 1:

<div id="content">
    <table>
        <tr>
            <td class="control_title">
            </td>
        </tr>
    </table>
</div>

Example 2:

public string indentation
{
    get
    {
        return _indentation;
    }
    set
    {
        _indentation = value;
    }
}

Wrapping Lines

Avoid lines longer than 120 characters. When an expression will not fit on a single line, break it with conventional indentation in new line.

Example:

string _xmlData = "<?xml version=\"1.0\"?>" + "\r\n" +
    "<!DOCTYPE ddtp=\"http://dtd.wctp.org/wctp-dtd-v1r1.dtd\">" + "\r\n" +
    "<wctp-Operation wctpVersion=\"wctp-dtd-v1r1\">" + "\r\n" +
    "<wctp-SubmitRequest>" + "\r\n" +
    "<wctp-SubmitHeader submitTimestamp=\"" + _timestamp + "\">" + "\r\n" +
    "<wctp-Originator senderID=\"application@chron.com\"/>" + "\r\n" +
    "<wctp-MessageControl messageID=\"001\"/>" + "\r\n" +
    "<wctp-Recipient recipientID=\"" + recipient + "@arch.com\"/>" + "\r\n";

 

Naming Convention (Server Code)

Identifier Naming Convention

Identifier Case Examples Rules
Comment Clear, short and descriptive.
Class PascalCase Person
BankVault
ImageSprite
Acronyms of 3 or more letters should use pascal case instead of all caps.
Avoid abbreviations (unless it is widely used, like URL, HTML).
Keep names simple and descriptive.
No underscores.
Nouns.
Method(Private) PascalCase with “_” prefix _UpdateScore(…)
_UpdateUrl(…)
_UpdateID(…)
Acronyms of 3 or more letters should use pascal case instead of all caps.
Avoid abbreviations (unless it is widely used, like URL, HTML).
No underscores.
Verbs.
Method(Public) PascalCase UpdateScore(…)
UpdateUrl(…)
UpdateID(…)
Acronyms of 3 or more letters should use pascal case instead of all caps.
Avoid abbreviations (unless it is widely used, like URL, HTML).
No underscores.
Verbs.
Method for Ajax (Private and public) PascalCase following text “Ajax” SavePeopleAjax
GetPropertyAjax
_DeleteGroupAjax
Method for ajax is a method that only called with ajax.
For private, prefix with “_”.
Common Method (Private and public) PascalCase following text “Common” GetStateCommon
_GetAnswerCommon
_SaveStateCommon
Common method is a method that could be use in different controllers/pages.
For private, prefix with “_”.
Namespace PascalCase Chronicle.IT.BasicFunctions
Chronicle.IT.Ftp
Chronicle.IT.Xml
Acronyms of 3 or more letters should use pascal case instead of all caps.
Avoid abbreviations (unless it is widely used, like URL, HTML).
No underscores.
Use $lt;company_name$gt; as root.
Interface PascalCase with “I” prefix IDisposable
IWidgetXml
IUserID
Acronyms of 3 or more letters should use pascal case instead of all caps.
Avoid abbreviations (unless it is widely used, like URL, HTML).
No underscores.
Parameter camelCase recordID
personName
previousUrl
Acronyms of 3 or more letters should use pascal case instead of all caps.
Avoid abbreviations (unless it is widely used, like URL, HTML).
No underscores.
Optional object type can be added. See “Object Type Naming Convention” section.
Property / Variable (Private) camelCase with “_” prefix _backColor
_internalXml
_userID
Acronyms of 3 or more letters should use pascal case instead of all caps.
Avoid abbreviations (unless it is widely used, like URL, HTML).
No underscores (except the prefix).
Optional object type can be added. See “Object Type Naming Convention” section.
Property / Variable (Public) PascalCase BackColor
InternalXml
UserID
Acronyms of 3 or more letters should use pascal case instead of all caps.
Avoid abbreviations (unless it is widely used, like URL, HTML).
No underscores.
Optional object type can be added. See “Object Type Naming Convention” section.

Object Type Naming Convention

Additional object’s type can be added to precede some identifiers in order to distinguish the object type. If the object’s type is added, abbreviate the object type according to the following rules:

Object Type Abbreviated Object Type Examples
Array arr _arrBackColors
_arrInternalXml
arrUserID
String str _strBackColor
_strInternalXml
strUserID

 

Naming Convention (Client Code)

CSS & HTML

Identifier Case Examples Rules
Class dash-separated sort-column
portlet-header
portlet-content
Acronyms of 3 or more letters should use pascal case instead of all caps.
Avoid abbreviations (unless it is widely used, like URL, HTML).
Keep names simple and descriptive.
No underscores.
Nouns.
All lowercase.
HTML Element camelCase ddlPropertyType
txtName
Start with 3 letters of specified element.
HTML Element (For) PascalCase Group
Property
People.FirstName
For is html element generated by mvc html helper that bound to the specific property.

JavaScript

Identifier Case Examples Rules
Comment Clear, short and descriptive.
Parameter camelCase dashboardResult
peopleResult
currentUrl
Acronyms of 3 or more letters should use pascal case instead of all caps.
Avoid abbreviations (unless it is widely used, like URL, HTML).
No underscores.
Optional object type can be added. See “Object Type Naming Convention” section.
Nouns.
Property / Variable (Private) camelCase with “_” prefix _savePreference
_currentUrl
_parent
Acronyms of 3 or more letters should use pascal case instead of all caps.
Avoid abbreviations (unless it is widely used, like URL, HTML).
No underscores (except the prefix).
Optional object type can be added. See “Object Type Naming Convention” section.
Nouns.
Property / Variable (Public) PascalCase SavePreference
CurrentUrl
Parent
Acronyms of 3 or more letters should use pascal case instead of all caps.
Avoid abbreviations (unless it is widely used, like URL, HTML).
No underscores (except the prefix).
Optional object type can be added. See “Object Type Naming Convention” section.
Nouns.

Json

Identifier Case Examples Rules
Name PascalCase Person
Status
Parent
Children
Acronyms of 3 or more letters should use pascal case instead of all caps.
Avoid abbreviations (unless it is widely used, like URL, HTML).
Keep names simple and descriptive.
No underscores.
Nouns.
Avoid using two words or more.
Advertisements
 
Leave a comment

Posted by on October 9, 2014 in General

 

Tags: , , , ,

Naming Convention Sample

Following is a sample of naming convention sample for HTML and CSS. Although this can be used for HTML and CSS, it’s best optimized for ASP.Net MVC project.

CSS Rules

  • All custom CSS rules go into <Project>\Content\<filename>.css
  • To avoid conflict, target by Class name is preferable than ID.
  • Don’t-fix-what’s-working philosophy: don’t style unless it’s necessary which means no gold-plating.

 

CSS Class Name

  • Application hierarchy structure should follow ASP.NET MVC namespace.
  • Class name is lower case dash-separated for each word.
  • Class name should be hierarchical according to application structure. This means when we look at the class name, we immediately know at what level the rule is applied to.
    • If the class targets a specific element in a View, class name should follow this convention:
      .stack247-<area>-<controller>-<view>-<description>

      • For example: .stack247-agent-prospect-details-input-box, .stack247-agent-prospect-details-hide-text
    • If the class targets elements in a Controller, class name should follow this convention:
      .stack247-<area>-<controller>-<description>

      • For example: .stack247-agent-prospect-input-box, .stack247-agent-prospect-hide-text
    • If the class targets application-wide View, class name should follow this convention:
      .stack247-<view>-<description>

      • For example: .stack247-details-input-box, .stack247-details-hide-text
    • If the class targets application-wide Controller, class name should follow this convention:
      .stack247-<controller>-<description>

      • For example: .stack247-prospect-input-box, .stack247-prospect-hide-text
    • If the class targets application-wide element, class name should follow this convention:
      .stack247-<description>

      • For example: .stack247-input-box, .stack247-hide-text
    • <description> can be the target element or a purpose but it should be very short.
  • When overriding framework CSS rules (jQuery Mobile, Kendo UI, etc), the specificity must be hierarchical according to application structure.
    • When overriding, the more specific, the better. More about CSS Specificity: http://css-tricks.com/specifics-on-css-specificity/
    • If the overriding rule targets a specific element in a View, specify class to only that element in the View:
      • For example: .stack247-agent-prospect-details .k-grid-header
    • If the overriding rule targets elements in a Controller, specify class to only elements in the Controller:
      • For example: .stack247-agent-prospect .k-grid-header
    • If the overriding rule targets elements in an Area, specify class to only elements in the Controller:
      • For example: .stack247-agent .k-grid-header
    • If the overriding rule targets application-wide element, specify class to those elements:
      • For example: .k-grid-header
  • Use your best judgment: if the CSS rule is re-usable across a View / Controller / Area or if it’s re-usable across the application, use class name and specificity that apply to targeted section.

 

HTML ID

Since CSS styles sometime target a specific HTML element by its ID, the following naming conventions apply to naming the HTML element ID.

  • HTML ID should be lower case of 3 letters (or less) of the element type + camelCase short description
    • For example: #divDashboardResult
  • The following are element type and its abbreviation:
    Element Abbreviation
    <div> div
    <input type=”textbox” /> txt
    <input type=”checkbox” /> cb
    <input type=”radio” /> rb
    <input type=”button” /> btn
    <span> spn
    <ul> ul
    <li> li
    <a> a
    <form> frm
    <table> tbl
    <thead> thd
    <tbody> tbd
    <th> th
    <td> td
    <tr> tr
 
Leave a comment

Posted by on August 4, 2014 in General

 

Tags: , ,

DocType / Document Type Declaration (DTD)

Strict

Contains all HTML elements and attributes. No deprecated tags are supported. Framesets are not allowed. Code must be written correctly. If XHTML, the markup must also be written as well-formed XML.

Traditional

Contains all HTML elements and attributes. Deprecated tags are allowed. Framesets are not allowed. If XHTML, the markup must also be written as well-formed XML.

Frameset

Contains all HTML elements and attributes. Deprecated tags are allowed. Framesets are allowed. If XHTML, the markup must also be written as well-formed XML.

List of DocType declarations.

Story of DocType.

 
Leave a comment

Posted by on May 1, 2012 in General

 

Tags: ,

Default Button x Default Focus x ASP.Net Button

To set a default button in your form:

<form id="form1" runat="server" method="post" defaultbutton="btnSave">

To set a default focus in your form:

<form id="form1" runat="server" method="post" defaultbutton="btnSave" defaultfocus="txtFullname">

Keep in mind:

  1. By default, UseSubmitBehavior property in a ASP.Net button is true, this button will be the default button in the form.
  2. UseSubmitBehavior cause a postback when clicked. Be aware of this when using Javascript to submit the form.
  3. When 2 ASP.Net buttons with UseSubmitBehavior set to true, the first button will be the default button.
  4. When ASP.Net button is a default button in the form, it will automatically focus on that button.
  5. To avoid submit behavior of a button, set UseSubmitBehavior to false.
  6. This will also set the focus off from default button.
  7. To set default focus to nowhere, use defaultfocus="#" in the <form>.
 
Leave a comment

Posted by on July 27, 2011 in General

 

Tags: ,

Placeholder Input Field for Non-HTML5 (with jQuery)

Hagenburger has a very nice fix, with jQuery, for placeholder input that will work for all other non-html5-supported browser. You know, the placeholder text is the input field that has text like “Search…” but will will be gone when the input field is on focus.

The fix actually utilize the placeholder attribute of input tag, so after implementing Hagenburger‘s jQuery, the placeholder text will work in pretty much all browsers, old and new.

HTML5 Input Placeholder Fix With jQuery

 
Leave a comment

Posted by on July 23, 2011 in General

 

Tags: , ,

Background Gets Cut Off – Set CSS Element to 100%

When setting background container’s (<div>) height to 100% in CSS, what I see is this:

The background doesn’t fill up to the whole screen although I have set my background div container to 100%. The page looks ok when the window is smaller:

In order to solve this problem, I will have to set the parent’s container to 100% and the background container to min-height instead of height. In my case, my background container (<div>) is under <body>. So, here my css:

body
{
    height: 100%;
}
#background
{
    min-height: 100%;
}
 
Leave a comment

Posted by on July 23, 2011 in General

 

Tags: ,

Fixed Background Image with CSS

CSS has attribute to set your background image fixed, meaning the background will be still, not moving even you scroll up and down.

body
{
    background: url("../images/BackgroundPattern.jpg");
    background-attachment: fixed;
}

By setting the background attachment to fixed, your background will be static and only your content will be moving when the page is scrolled.

 
Leave a comment

Posted by on July 21, 2011 in General

 

Tags: ,

 
%d bloggers like this: