coding standard of Suite Commerce

HTML coding standards in SCA  

Use Lowercase Element Names   

  1. HTML allows mixing uppercase and lowercase letters in element names. 
  2. However, recommend using lowercase element names. 

Good

<body> 
<p>This is a paragraph</p> 
</body>

Bad

<BODY> 
<P>This is a paragraph</P> 
</BODY>

Close All HTML Elements   

  1. In HTML, you do not have to close all elements (for example the <p> element). 
  2. However, it is strongly recommend closing all HTML elements, like this: 

Good

<body> 
<div><p>This is a paragraph</p></div> 
</body>

Bad

<body> 
<div><p>This is a paragraph</div> 
</body>

Use Lowercase Attribute Names    

  1. HTML allows mixing uppercase and lowercase letters in attribute names. 
  2. However, it is recommended using lowercase attribute names. 

Good

<a href="https://www.google.com"></a>

Bad

<a HREF="https://www.google.com"></a>

Always Quote Attribute Values 

  1. It is recommended quoting attribute values. 
  2. Quoted values are easier to read 
  3. You MUST use quotes if the value contains spaces 

Good

<table class="striped">

Bad

<table class=striped> 
<table class=test striped>

Always Specify alt for the images 

Always specify the alt attribute for images. This attribute is important if the image for some reason cannot be displayed. 

Good

<img src="html5.gif" alt="img not available”>

Bad

<img src="html5.gif">

Spaces and Equal Signs 

HTML allows spaces around equal signs. But space-less is easier to read and groups entities better together. 

Good

<link rel="stylesheet" href="styles.css">

Bad

<link rel = "stylesheet" href = "styles.css">

Avoid Long Code Lines 

  1. When using an HTML editor, it is NOT convenient to scroll right and left to read the HTML code. 
  2. Try to avoid too long code lines. 

Blank Lines and Indentation 

  1. Do not add blank lines, spaces, or indentations without a reason. 
  2. For readability, add blank lines to separate large or logical code blocks. 

Good

<table> 
  <tr> 
    <th>Name</th> 
    <th>Description</th> 
  </tr> 
  <tr> 
    <td>A</td> 
    <td>Description of A</td> 
  </tr> 
  <tr> 
    <td>B</td> 
    <td>Description of B</td> 
  </tr> 
</table>

Bad

<table> 
  <tr> 
    <th>Name</th<th>Description</th> 
  </tr> 
  <tr><td>A</td><td>Description of A</td></tr> 
  <tr><td>B</td><td>Description of B</td></tr> 
</table>

HTML Comments 

  1. Short comments should be written on one line, like this:
    <!– This is a comment –> 
  2. Comments that span more than one line, should be written like this:
     <!–  
    This is a long comment example. This is a long comment example. 
    This is a long comment example. This is a long comment example. 
    –> 

Consistent Naming Conventions: 

HTML elements should be named using consistent and descriptive names that reflect their purpose and content. The class names, ids should be proper. Don’t use naming such as abc, test etc.. 

Use of Camel case in classes and Ids 

  1. If we need a class name for adding delivery location.
  2. For <input> tags, add type and always provide proper name.  
  3. If needs placeholder, use placeholder property.   

Good
deliveryLocation

Bad
DeliveryLocation

Example:

<input type="text" id="lname" name="lname"> 
<input type="tel" id="phone" name="phone" placeholder="123-45-678">

Theme 

Images 

When to use <img /> When to use CSS background-image 
When Your Image needs to be indexed by search engine Images Purely Used to Design.  
If it has relation to content, including cards (click areas), but not related to design. No Relation with Content. 
List item Small Images which we can play with CSS3. 
If your image is not too small (not iconic images). Repeating Images (In blog author icon, date icon will be repeated for each article etc.,). 
Images where you can add alt and title attribute.  
Images from a webpage which you want to print using print media css  
  1. Use CSS background images if the image is not part of the content. 
  2. Use CSS background images when doing image-replacement of text eg. Paragraphs/headers. 
  3. Use background-image with background-size:cover in order to stretch a background image to fill its entire window. 

Do not use account specific/static urls in theme.  

Good

<img src="SSP%20Applications/Bastion%20Pacific%20SCA/Development/img/pop-up-close-btn.png" />

Bad

<img src="https://www.formsscasb.tk/SSP%20Applications/Bastion%20Pacific%20SCA/Development/img/pop-up-close-btn.png" />

Use getExtensionAssetsPath  and getThemeAssetsPath for adding images. 

<img src="{{ getThemeAssetsPath 'img/logo.png' }}" >  
<img src="{{ getExtensionAssetsPath 'img/logo.png' }}">

Don’t give static width and height to images. 

Good

img{ height:auto; width:100%; }

Bad

img{ height:200px width:300px }

To arrange different sections in a row, use bootstrap properties such as col-sm, col-xs etc. 

Example: 

<div class="Info "> 
<div class="col-sm-12">
 <div class="accordion"> section1 </div>
 </div> 
</div>

 
There should be proper Closing and opening for conditions 

#if condition and #if-else condition 

Good

1. {{#if logged}} 
<p>show this</p> 
{{/#if} 
 
2. {{#if logged}} 
<p>show this</p> 
{{#else}}<p>hide this</p> {{/#if}}

Bad

  {{#if logged}} 
<p>show this</p>

Don’t use inline styles in the SCA template. 

Good

<div class=”homeContent”> 
Content1</div> <Style> .homeContent{ color:#fff; }

Bad

<div class=”homeContent” style=”color:#fff”> 
Content1 </div>
  1. Add variables inside the {{ }} in sca template files. 
  2. Add variables inside the {{{ }}} , if it needs to be displayed as html content from NetSuite. 

SASS CODING STANDARDS

  1. Two (2) spaces indents, no tabs; 
  2. Meaningful use of whitespace. 

Good

.foo { 
  display: block; 
  overflow: hidden; 
  padding: 0 1em; 
}

Bad

.foo { 
    display: block; overflow: hidden; 
 
    padding: 0 1em; 
}

Sass uses the $ symbol to make something a variable 

Example: 

$font-stack: Helvetica, sans-serif; 
$primary-color: #333; 
body { 
  font: 100% $font-stack; 
  color: $primary-color; 
}

Strings as CSS Values 

Specific CSS values (identifiers) such as initial or sans-serif require not to be quoted. 

Good

$font-type: sans-serif;

Bad

$font-type: 'sans-serif';

URLs should be quoted 

Good

.foo { 
  background-image: url('/images/kittens.jpg'); 
}

Bad

.foo { 
  background-image: url(/images/kittens.jpg); 
}

Use RGBA rather than alpha hex codes 

Good

background: rgba(0, 255, 0, 0.5);

Bad

background: #00ff0080;
  1. Instead of using same colors, font-family, font-size etc multiple times, use variables to declare it in  _variables.scss ,_typography.scss and _colors.scss and use the variables. 
  2. If you are defining a variable that controls multiple properties in different modules (such as a new theme color $sc-color-theme-250), define that variable within the BaseSassStyles module. 
$main-theme-color:#404040; 
.info{ 
Color: $ main-theme-color; 
}
  1.  Better practise to use comments while doing change : //header update 
  2.  Reduce use of !important while styling. Use hierarchy or parent class. 

Example: 

<div class=”main”> 
<div class=”sub”> 
Example 
</div> 
</div>

Note: Some unavoidable conditions, !important can be used. 

Good

.main{ 
.sub { color:#ffffff; 
} 
}

bad

.sub{ color: #ffffff !important; }

Do not use account specific/static urls 
 

Good

.foo { 
  background-image: url(' SSP%20Applications/Bastion%20Pacific%20SCA/Development/img/pop-up-close-btn.png '); 
}

Bad

.foo { 
  background-image: url(' https://www.formsscasb.tk/SSP%20Applications/Bastion%20Pacific%20SCA/Development/img/pop-up-close-btn.png '); 
}

Don’t use –ve margins or padding. 
 

Good

margin: 20px; 
padding: 20px;

Bad

margin:-20px; 
padding:-20px;

Don’t give styles to elements such as div, img, row, col, p,li, ul etc. 

Example:  

<div class=”mainHeading”> 
<p class=”para”>test</p> 
</div>

Good

.mainHeading{ 
p{ 
font-size:12px; 
} 
} 
.para{ 
font-size:12px; 
}

Bad

p{ font-size:12px; }

Media Queries in SCA 

Don’t use 480px, 767px, 768px,992px, 991px,1200px,1199px directly in the code. Instead use variables. 

Extra small screen / phone 

$screen-xs: 480px !default; $screen-xs-min: $screen-xs !default; $screen-phone: $screen-xs-min !default;

Small screen / tablet

$screen-sm: 768px !default; $screen-sm-min: $screen-sm !default; $screen-tablet: $screen-sm-min !default;

Medium screen / desktop  

$screen-md: 992px !default; $screen-md-min: $screen-md !default; $screen-desktop: $screen-md-min !default;

Large screen / wide desktop 

$screen-lg: 1200px !default; $screen-lg-min: $screen-lg !default; $screen-lg-desktop: $screen-lg-min !default;

Media queries don’t overlap when required, provide a maximum 

$screen-xs-max: ($screen-sm-min - 1) !default; //767px 
$screen-sm-max: ($screen-md-min - 1) !default;//991px

Avoid if constructions using exposed Sass variables. For example: 

@if $sc-color-secondary == $12345 { background-color: $sc-color-primary;} 
@else { background-color: $56789;}

Avoid user-defined function calls 

Example

$sc-color-secondary: myfunc($sc-primary-color) /*editable(…)

Extension 

The extension should have a proper name. 

For example-

“name”: “MyCoolExtension”,

“fantasyName”: “My Cool Extension”,

“vendor”: “JJ”,

There must be a proper description for the extension. A small description regarding what customization/functionality we are implementing. 

For example- This extension is used to show badge on PDP page. 

  1. The vendor’s name should be “JJ” if it’s a direct customer. If 3rd party customer, don’t use JJ. 
  2. Assign correct version for extension we are giving version as 1.0.0. 

    For extension we are giving the version starting from 1.0.0 then we can upgrade this version.
    For example, 1.0.2,1.0.3, etc 
    Skip unwanted files/folders. 

    In SCA we have the given folder options 

    JavaScript 
  3.  SuiteScript 
  4. Templates 
  5. Sass 

    If we are not using a configuration file, there is no need to add this folder and so on. 

Code 

  1. Add meaningful and understandable variables name. 
  2. Add meaningful and understandable variables name.

    Example:
var categoryFacetModel = new CategoryCustomisationModel();
  1. The names of the function should be written in camel case starting with small letters. 
  2. The name of the function must describe the reason of using the function clearly and briefly. 

    Example:
var resolveFacetValue = function resolveFacetValue(facetValue) { 
}

Comments 

Write a comment describing the code function at various points in the code. 2 methods for adding comments in code.  

Method 1 // This is a comment 
Method 2 /* This is a long comment example. This is a long comment example. 
  This is a long comment example. This is a long comment example. 
*/ 

Functions 

  1. If-else condition – Use “If-else” if you want to provide two distinct code paths based on a condition. If there is no alternative code path to be reviewed, then the “else” condition can be excluded. 
  2. Keep the code in a try-catch block. 
  3. There error should be properly handled in the catch section. 
  4. Try to add try add try catch for every section. (Avoid common try catch for the full code)  
try { 
  //  Block of code to try 
} 
catch(Exception e) { 
// Block of code to handle errors 
}

Remove unwanted console from the code.  

For example 

console.log("inside getCategoryTree ", micrositeId) 
nlapiLogExecution('debug', 'emailsender achu', senderEmailToUse);

SCA version Before SCA 2018.1 

  1. Do not extend (extend()) a core module to add or overwrite a method or property. 
  2. Do not wrap (_.wrap()) a core module’s method to change its output. 
  3. Do not modify a core module or object’s prototype. For example, you should: 
  4. Use addChildView() to add a child view rather than SomeView.prototype.childViews.MyChildView. 
  5. Do not extend (extend()) a core module to add or overwrite a method or property. 
  6. Do not wrap (_.wrap()) a core module’s method to change its output. 
  7. Do not modify a core module or object’s prototype. For example, you should: 
  8. Use addChildView() to add a child view rather than SomeView.prototype.childViews.MyChildView. 
  9. Do not extend (extend()) a core module to add or overwrite a method or property. 
  10. Do not wrap (_.wrap()) a core module’s method to change its output. 
  11. Do not modify a core module or object’s prototype. For example, you should: 
  12. Use addChildView() to add a child view rather than SomeView.prototype.childViews.MyChildView. 

For example 

Here N&P is the custom module. 

Backbone 

  1. Views may point to one and only one Model .
  2. Objects may not be stored in Model attributes .
  3. Models may point to other models .
  4. Classes often start in uppercase letters, while instances start with lowercase letters. 
  5. For names with multiple words, JavaScript often calls for CamelCase.  
  6. No “var that = this;” usage. 
  7. be descriptive if assigning this to a variable 
  8. try not to pass “this” as context as much as possible.
  9. Use the CollectionView for managing the relationship between a Collection and the View that relates to those models.
  10. Use small views and templates .Create local references to array methods we’ll want to use later. 
  11. Comments should use “//” syntax  

Naming Convention 

  1. While creating a theme or extension we need to follow some naming format. 
  2. Name can be alphanumeric characters without spaces.  
  3. Add meaningful and understandable name. 

Creating a new theme –  

Name- This cannot contain special characters and spaces. 
Example: newScaTheme 
 
Fantasy Name- provide a name for the theme which can contain special characters and spaces. 
Example: new_sca_theme, sca_theme 

  1. Creating new extension – (check the below screenshot) 
  2. Creating new template – (check the below screenshot) 
  3. Creating new sass file – (check the below screenshot) 
  4. Creating new JS, model, service controller, entry point, view file, etc in backend .

    I. Name can be alphanumeric characters without spaces. 
    II. Add meaningful and understandable name. 

Attached a sample screenshots 

Creating new folder in older version. 

When we create a new module in older version give a meaningful and understandable name. When giving name at the end of ‘@1.0.0’  .

For example- JJ.StripeRegister@1.0.0  

Leave a comment

Your email address will not be published. Required fields are marked *