RSS

Naming Convention Sample

04 Aug

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
Advertisements
 
Leave a comment

Posted by on August 4, 2014 in General

 

Tags: , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

 
%d bloggers like this: