RSS

Tag Archives: css

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.
 
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: , ,

MVC Bundle Not Working with Release Configuration (Debug is False)

I encountered problem with Scripts and Styles bundle when deploying ASP.Net MVC 4 application to Windows Azure. The site loaded without CSS and JavaScript and developer tools show bunch of URL bundles returning 404 errors.

Solution was to add the following code to web.config

<system.webServer>
  <modules runAllManagedModulesForAllRequests="true">
    <remove name="BundleModule" />
    <add name="BundleModule" type="System.Web.Optimization.BundleModule" />
  </modules>
</system.webServer>

When deploying with Release configuration manager, <compilation> debug is set to false and MVC minify all CSS and JavaScript files.

If run with debug="true" output is the following HTML.

<link href="/Content/themes/base/jquery.ui.core.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.resizable.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.selectable.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.accordion.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.autocomplete.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.button.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.dialog.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.slider.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.tabs.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.datepicker.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.progressbar.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.theme.css" rel="stylesheet"/>

But if run with debug="false", output is the following instead:

<link href="/Content/themes/base/css?v=LJDigUf9DCM1N7CIVASNPsU78xE9F_Int_B2M79n8CI1" rel="stylesheet"/>
 
4 Comments

Posted by on February 8, 2013 in General

 

Tags: , , , ,

CSS Language: SASS vs {LESS} vs xCSS

 

My take is {LESS}. That’s the short answer.

Kind of longer (and boring) answer:

There is only slight difference between the two. The biggest challenge is syntax learning curve, everything else (IDE plugins, features, requirements, etc) is much or less the same.

One consideration is how heavy will we (or the consultants) use the framework? When used heavily, syntax and language can be complicated and hairy, hard to understand. New comers will have significant learning curve. However, either way with SASS or LESS, we will have the learning curve.

I want to say we should go with framework that we most comfortable to develop with. At the end of the day, we use this framework to deliver product, so the more we comfortable with the framework, the more we can beautify the site and deliver product. This also true for consultants we hire to do the UX piece. But, consultants leave us with their code which bring us to maintainability subject. And the question for that is: which one we are more comfortable to maintain?

But what makes me really pick LESS is not because I am more comfortable with them. Instead, it’s more because of the community support (and usage for that matter) for this particular framework. SASS used to have more active development but lately LESS has taken the spot despite being newer that SASS. Community’s acceptance and implementation of LESS is also increasing rapidly as shown in StackOverflow.com’s tags counts and BuiltWith usage statistic. Not only this means LESS is gaining momentum, but also support level that we can expect outside of official documentation.

Comparison

 

Sass

{less}

X-CSS

Age Oldest (v 3.2.5 as of this writing) Newer (v 1.3.3 as of this writing) Newest (v 1.0.1 as of this writing)
Active Development Open Issue 5/16/12: 84

Open Issue 1/12/13: 83

Pending pull request 5/16/12: 3

Pending pull request 1/12/13: 7

Commits count 5/16/12: 35

Commits count 1/12/13: 14

Open Issue 5/16/12: 392

Open Issue 1/12/13: 112

Pending pull request 5/16/12: 86

Pending pull request 1/12/13: 10

Commits count 5/16/12: 11

Commits count 1/12/13: 84

N/A
Requirements Ruby

Each rule in one line (SASS syntax)

Proper indentation (SASS syntax)

Compiler

Compiler PHP-enabled server
Documentation Online – Excellent

SO: 1431 tags

Online – Good

SO: 1260 tags

Online – Good

SO: 0 tag

Key Features Inheritance

Nested rules

Variables

Mixins (set of styles in a variable)

Function and operation

File ‘includes’

Inheritance

Nested selectors

Variables

Mixins

Math operations

File ‘includes’

Namespace

Interpolation (string & selector)

Scope

Inheritance

Nested selectors

Variables

Math operations

File ‘includes’

Language Type Compile Compile

Run-time compile (with JavaScript)

Run-time compile
Pro Support 2 syntax (SCSS – CSS-like syntax and SASS – Ruby-powered) Syntax matches CSS convention

Usage is common

 
Cons SASS syntax is learning curve (contrast to CSS convention)   Tedious and quirky setup

Variables definitions decrease readability

       

Some sources and links

Comprehensive comparison: http://css-tricks.com/sass-vs-less/
BuiltWith {less} Counts: http://trends.builtwith.com/websitelist/LESS
BuiltWith {less} Trends: http://trends.builtwith.com/javascript/LESS

 
Leave a comment

Posted by on January 30, 2013 in General

 

Tags:

My First Hand on Kickstrap and Less

Kickstrap is cool and all, make your life easy when it comes to installing app, theme and ui widget. It allows you to drop in a folder (depend on its purpose, it contains CSS file, JavaScript file, and a Kickstrap configuration file) to add an app / theme / bootstrap UI to your site. All you need to do to activate this app / theme / bootstrap UI is edit the Kicktrap setting file and it will show up in your site. No more need to add each app / theme / bootstrap UI ‘s CSS and JavaScript files to your HTML markup.

One downside of using Kickstrap is it’s using .less extension. LESS is a new way to write CSS, introducing variables, operations, and functions. Think about programming language to generate CSS. LESS is compiled to .css in browser using {less} JavaScript. You can also compile .less file to CSS using third party app like LESS.app (Mac OS) and WinLess (Windows).

Although .less is promising, the application and usage in developer community is still yet to be proven. I myself encounters problems with .less file extension when trying to run Kickstrap. Firstly, you can’t run your HTML file, that contains link to LESS, locally anymore. This is because, to compile LESS to CSS, a browser will need LESS JavaScript (LESS.js) and LESS JavaScript will not run locally. In another words, you have to set up a web server (IIS, Apache, etc) to see how your HTML page looks like.

“That’s ok.”, I convince myself. “I will set up my IIS to host my HTML file that contains link to LESS”. Well, after setting up the a web server (IIS in my case), the default site’s settings are not set to take LESS file extension. To do this, I have to add new MIME type to my site. See this post on how to solve this problem.

The same thing happens to .KS file, a configuration file for each app / theme / bootstrap UI in Kickstrap. I had to set my site’s MIME type to take .KS as well.

I mentioned before that you can compile LESS to CSS with third party tools. The idea is to develop CSS in LESS-way, easier and faster, then compile it to CSS to be included in HTML file. Some developers choose to include LESS file the HTML files instead and have LESS JavaScript to compile it on the browser, but this adds another point of failure, in addition to page load time. The decision is yours to make. Although you can compile LESS to CSS, you can’t do this with Kickstrap’s LESS files. Kickstrap is depended upon LESS file, mainly to set its root directory and apps to run (see this Kickstrap Setting link).

Kickstrap is still in beta version (as of this writing) but it’s already look very nice and bright. Whether to use this in your production environment is another question.

 
4 Comments

Posted by on October 8, 2012 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: