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