This article was first published on my personal website: cherryblog.site/.

A good programmer must be able to write maintainable code, not one-off code. How can the rest of the team understand your code even when you look at it for a while? This requires specification of your code. I’m a bit of an ocD person and last week we gave me a CanUsename interface on the back end (the purpose of this interface is to determine if the input destination is a level 4 destination) and I really crashed. I just feel that the name is not semantic enough, but let me think of a name I can not come out, so I was thinking, if there is a set of naming norms, then the name will not worry about, directly in accordance with the norms to good ~ so Dragon Boat Festival at home on Baidu about ~

named

Introduction to hump nomenclature

  • Pascal Case Large camel Case nomenclature: capitalize the first letter. Eg: StudentInfo, UserInfo, ProductInfo
  • 3. Nomenclature: The first letter is lowercase. Eg: studentInfo, userInfo, productInfo

    File Resource naming

  • The file name must not contain Spaces
  • You are advised to use only lowercase letters in the file name. (To stand out, use uppercase letters to describe file names, such as README and LICENSE.)
  • If a file name contains multiple words, separate them by hyphens (-).
  • Import resources using relative paths without specifying specific protocols for resources (http:.https:), unless both protocols are unavailable.

Is not recommended:

<script src="http://cdn.com/foundation.min.js"></script>Copy the code

recommended

<script src="//cdn.com/foundation.min.js"></script>Copy the code

Variable naming

Naming conventions: The way a type + object is described. If there is no explicit type, the prefix can be a noun

type Lowercase letters
array a
boolean b
function fn
int i
object o
regular r
string s

recommended

var tableTitle = "LoginTable"Copy the code

Is not recommended

var getTitle = "LoginTable"Copy the code

function

Naming: small hump (constructors use big hump nomenclature) Naming rules: Prefix verbs

The verb meaning The return value
can Determine whether an action can be performed (permissions) The function returns a Boolean value. True: executable. False: Cannot be executed
has Determines whether a value is present The function returns a Boolean value. True: contains this value. False: does not contain this value
is Determines whether it is a value The function returns a Boolean value. True: indicates a value; False: not a certain value
get Get a value The function returns a non-boolean value
set Set a value Returns no value, whether the setting was successful, or the chained object

Recommendation:

// Whether it can be readfunction canRead() {return true; } // Get the namefunction getName{
    return this.name
}Copy the code

constant

Naming method: All uppercase naming conventions: Use uppercase letters and underscores to separate words. Recommendation:

 var MAX_COUNT = 10;
 var URL = 'http://www.baidu.com';Copy the code

The members of the class

  • Common properties and methods: same variable naming
  • Private properties and methods: prefix with underscore (_) followed by the same naming as public properties and methods

Recommendation (change name to this)

functionStudent(name) { var _name = name; // Private member // public method this.getName =function () {
        return_name; } // Public this.setName =function (value) {
        _name = value;
    }
}
var st = new Student('tom');
st.setName('jerry'); console.log(st.getName()); // => jerry: print the value of the _name private variableCopy the code

Annotation specifications

Single-line comment (//)

  • A single line: //(double slash) leave a space between the comment text
  • Add comments after the code: //(double slash) leave a space between the code, and //(double slash) leave a space between the comment text.
  • Comment code: //(double slash) leave a space between the code.

Recommendation:

// call a function; 1) In a single linesetTitle(); var maxCount = 10; // Set the maximum number; 2) Comment after the code //setName(); // 3) Comment the codeCopy the code

Multi-line comments (/annotated/)

  • If start (/*And end (*/) all on one line. Single-line comments are recommended
  • If at least three lines are commented, the first behavior is /*, the final behavior*/, other lines*Start, and comment the text with*Leave a space.

    Recommendation: 
    /* * is called when the code executes hereset* the Title () functionsetTitle() : Sets the Title value */setTitle();Copy the code

Function (method) comments

Function (method) comments are also a type of multi-line comment, but contain special comment requirements, as shown in Javadoc syntax:

/** * function description * @ Keyword */Copy the code

Common comment keywords

The annotation of grammar meaning The sample
@param @param Parameter name {Parameter Type} Description information Description Parameter information @param name {String} The incoming name
@return @return {Return type} Indicates the description Information describing the return value @return {Boolean} true: executable; False: Cannot be executed
@author @author Author information [Affiliated information: email address, date] Describes information about the author of this function @ the author zhang SAN 2015/07/21
@version @version XX.XX.XX Describes the version number of this function @ version 1.0.3
@example @example Example code @example setTitle(‘ test ‘) The following

Recommendation:

/** - merge Grid rows - @param Grid {ext.grid. Panel} merge Grid rows - @param cols {Array} merge column Index Array; Counting starts at 0, and serial numbers are included. - @param isAllSome {Boolean} : Whether 2 TR cols must be identical before merging.trueBe as good as;false(Default) : Not exactly the same - @returnVoid - @ author polk6 2015/07/21 - @ example - I am grateful to _____________ - | | | name age | | | name - age -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- mergeCells (grid, [0]) -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - | | | zhang SAN 18 = > | | zhang SAN | -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 18 -- -- -- -- -- -- -- -- -- -- | | 18 fifty and | | | fifty | -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * /function mergeCells(grid, cols, isAllSome) {
    // Do Something
}Copy the code

HTML specification

Document specification

Document declaration type using HTML5:

  • The DOCTYPE tag is a standard Generic Markup language document type declaration. Its purpose is to tell the standard Generic Markup language parser what document type definition (DTD) it should use to parse documents.
  • The purpose of using a document declaration type is to prevent the browser from opening in weird mode.
  • No DOCTYPE declaration will turn on the browser’s weird mode, where the browser will render the page in its own parsed way, with different styles under different browsers.
  • If you add
    then, then equivalent to turning on standard mode. The browser parses the rendered page according to W3C standards.

The script to load

In terms of where JS and CSS are, you probably know that JS is on the bottom and CSS is on the top. However, if your project only needs to be ie10+ compatible or only accessible on mobile, then you can use HTML5’s new async property to place the script file in compatible with older browsers (IE9-) : the script reference is written before the body closing tag, with the Async property attached. This does not load scripts asynchronously in older browsers, but it only blocks DOM parsing before the body tag ends, which greatly reduces its blocking impact. In modern browsers, the script is loaded only when the DOM parser finds the script tag at the end of the body, and the load is asynchronous and does not block CSSOM (but execution still happens after CSSOM). To sum up, it is recommended for all browsers:

<html>
  <head>
    <link rel="stylesheet" href="main.css"> </head> <body> <! -- body goes here --> <script src="main.js" async></script>
  </body>
</html>Copy the code

Compatible with modern browsers only

<html>
  <head>
    <link rel="stylesheet" href="main.css">
    <script src="main.js"async></script> </head> <body> <! -- body goes here --> </body> </html>Copy the code

semantic

We talk about semantic programming all the time, semantic programming, but very few people use exactly the right elements in their code. There are also reasons to use semantic tags for SEO.

Semantically means using an element according to its original meaning when it was created. It means doing the right thing with the right tags, not just div and SPAN.

Is not recommended:

<b>My page title</b>
<div class="top-navigation">
  <div class="nav-item"><a href="#home">Home</a></div>
  <div class="nav-item"><a href="#news">News</a></div>
  <div class="nav-item"><a href="#about">About</a></div>
</div>

<div class="news-page">
  <div class="page-section news">
    <div class="title">All news articles</div>
    <div class="news-article">
      <h2>Bad article</h2>
      <div class="intro">Introduction sub-title</div>
      <div class="content">This is a very bad example for HTML semantics</div>
      <div class="article-side-notes">I think I'm more on the side and should not receive the main credits 
      

        This article was created by David 
       

        2014-01-01 00:00
       
 
      
  
      

        Related sections: Events, Public holidays 
      
   
      

        Copyright 2014 
      
Copy the code

recommended

HTML code: <! -- The page header should go into a header element --> <header> <! -- As this title belongs to the page structure it's a heading and h1 should be used --> <h1>My page title</h1> </header> <! -- All navigation should go into a nav element --> <nav class="top-navigation"> <! -- A listing of elements should always go to UL (OL for ordered listings) --> <ul> <li class="nav-item"><a href="#home">Home</a></li> <li class="nav-item"><a href="#news">News</a></li> <li class="nav-item"><a href="#about">About</a></li> </ul> </nav> <! -- The main part of the page should go into a main element (also use role="main" for accessibility) --> <main class="news-page" role="main"> <! -- A section of a page should go into a section element. Divide a page into sections with semantic elements. --> <section class="page-section news"> <! -- A section header should go into a section element --> <header> <! -- As a page section belongs to the page structure heading elements should be used (in this case h2) --> <h2 class="title">All news articles</h2> </header> <! -- If a section / module can be seen as an article (news article, blog entry, products teaser, any other re-usable module / section that can occur multiple times on a page) a article element should be used --> <article class="news-article"> <! -- An article can contain a header that contains the summary / introduction information of the article --> <header> <! -- As a article title does not belong to the overall page structure there should not be any heading tag! --> <div class="article-title">Good article</div> <! -- Small can optionally be used to reduce importance --> <small class="intro">Introduction sub-title</small> </header> <! -- For the main content in a section or article there is no semantic element --> <div class="content"> <p>This is a good  example for HTML semantics</p> </div> <! -- For content that is represented as side note or less important information in a given context use aside --> <aside class="article-side-notes"> <p>I think I'm more on the side and should not receive the main credits</p> </aside> <! -- Articles can also contain footers. If you have footnotesfor an article place them into a footer element -->
      <footer class="article-foot-notes"> <! -- The time element can be used to annotate a timestamp. Use the datetime attribute to specify ISO timewhile the actual text in the time element can also be more human readable / relative -->
        <p>This article was created by David <time datetime="The 2014-01-01 00:00" class="time">1 month ago</time></p> </footer> </article> <! -- In a section, footnotes or similar information can also go into a footer element --> <footer class="section-footer"> <p>Related sections: Events, Public holidays</p> </footer> </section> </main> <! -- Your page footer should go into a global footer element --> <footer class="page-footer">
  Copyright 2014
</footer>Copy the code

The Alt label is not empty

The Alt attribute of the tag specifies alternative text to replace what the image displays in the browser if the image cannot be displayed or if the user disables it. The Alt attribute can provide alternative information for the image, assuming that the user cannot view the image for one of the following reasons:

  • Speed is too slow
  • Error in SRC attribute
  • Disable images in browser
  • The user uses a screen reader

From an SEO perspective, the browser crawler can’t crawl the content of the image, so we need text to tell the crawler what the content of the image is

Separation of structure, performance and behavior

Try to include only structured HTML in your documents and templates; And move all of the presentation code into the style sheet; Move all the actions into the script. In addition, to keep the connection between them as small as possible, style and script files are also introduced as little as possible in the documents and templates. Advice:

  • Don’t use more than one or two stylesheets
  • Don’t use more than one or two scripts (learn to merge scripts)
  • Do not use inline styles (<style>.no-good {}</style>)
  • Do not use the style attribute on elements (<hr style="border-top: 5px solid black">)
  • Do not use inline scripts (<script>alert('no good')</script>)
  • Do not use representation elements (i.e. <b>, <u>, <center>, <font>, <b>)
  • Do not use the representation class name (i.e. red, left, center)

HTML is all about content

  • HTML only displays display content information
  • Don’t introduce specific HTML structures to solve visual design problems
  • Don’t putimgElements should be considered as elements for visual design
  • Styling problems should be solved using CSS

Is not recommended:

<! -- We should not introduce an additional element just to solve a design problem --> <span class="text-box">
  <span class="square"></span>
  See the square next to me?
</span>
css 代码:
.text-box > .square {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: red;
}Copy the code

recommended

HTML code: <! -- That's clean markup! -->  See the square next to me?  CSS code: /* We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content */ .text-box:before { content: ""; display: inline-block; width: 1rem; height: 1rem; background-color: red; }Copy the code

The only reason images and SVG graphics can be introduced into HTML is because they present some information about the content.

Is not recommended

HTML code: <! -- Content images should never be usedfor design elements!  -->
<span class="text-box">
  <img src="square.svg" alt="Square" />
  See the square next to me?
</span>Copy the code

recommended

HTML code: <! -- That's clean markup! -->  See the square next to me?  CSS code: /* We use a :before pseudo element with a background image to solve the problem */ .text-box:before { content: ""; display: inline-block; width: 1rem; height: 1rem; background: url(square.svg) no-repeat; background-size: 100%; }Copy the code

Js specification

Avoid global namespace contamination

To avoid contaminating the global namespace, the usual approach is to wrap the code as an IIFE(immediate-Invoked Function Expression), creating an isolated domain. Also allows memory to be released immediately after execution.

IIFE also ensures that your code can’t be easily modified by code in other global namespaces (i.e Third party libraries, Window references, overridden undefined keywords, etc.). Is not recommended:

var x = 10,
    y = 100;

// Declaring variables in the global scope is resulting in global scope pollution. All variables declared like this
// will be stored in the window object. This is very unclean and needs to be avoided.
console.log(window.x + ' ' + window.y);Copy the code

recommended

// We declare a IIFE and pass parameters into the function that we will use from the global space
(function(log, w, undefined){
  'use strict';

  var x = 10,
      y = 100;

  // Will output 'true true'
  log((w.x === undefined) + ' ' + (w.y === undefined));

}(window.console.log, window));Copy the code

Recommended writing of IIFE:

(function() {'use strict';

  // Code goes here

}());Copy the code

If you want to reference a global variable or an outer IIFE variable, you can pass the parameter in the following way:

(function($, w, d){
  'use strict';

  $(function() {
    w.alert(d.querySelectorAll('div').length);
  });
}(jQuery, window, document));Copy the code

Strict mode

ECMAScript 5 strict mode can be activated throughout the script or within a single method. It does more rigorous error checking for different javascript contexts. Strict mode also ensures that javascript code is more robust and runs faster.

Strict mode prevents the use of reserved keywords that are likely to be introduced in the future.

You should enable strict mode in your scripts, preferably in a separate IIFE. Avoid using it on the first line of your script and causing all of your scripts to start in strict mode, which can cause problems with third-party libraries.

Variable declarations

Always use var to declare variables. If var is not specified, the variable is implicitly declared as a global variable, for example

var a = b = 0; //b is implicitly created as a global variableCopy the code

Therefore, always declare variables using var and use single-var mode (use only one var definition at the beginning of a function for all variables). Such as:

(function() {'use strict'var a = 0, b = 0, c = 0, i, j, myObject(); } ())Copy the code

The advantage of strict mode is that when you manually enter the wrong variable name, it can help you locate the error by sending an error message.

Js statement ahead of time

Javascript automatically defines variables and methods in function scope in advance (just declare them early, and assign them in place). For example:

(function(log) {'use strict';

  var a = 10;

  for(var i = 0; i < a; i++) {
    var b = i * i;
    log(b);
  }

  if(a === 10) {
    var f = function() {
      log(a);
    };
    f();
  }

  function x() {
    log('Mr. X! ');
  }
  x();

}(window.console.log));Copy the code

Promoted JS

(function(log) {'use strict';
  // All variables used in the closure will be hoisted to the top of the function
  var a,
      i,
      b,
      f;
  // All functions in the closure will be hoisted to the top
  function x() {
    log('Mr. X! ');
  }

  a = 10;

  for(i = 0; i < a; i++) {
    b = i * i;
    log(b);
  }

  if(a === 10) {
    // Function assignments will only result in hoisted variables but the function body will not be hoisted
    // Only by using a real function declaration the whole function will be hoisted with its body
    f = function() {
      log(a);
    };
    f();
  }

  x();

}(window.console.log));Copy the code

Use strictly, etc

Always use the === exact comparison operator to avoid the hassle of JavaScript casts in the judgment process. Such as:

(function(log) {'use strict';

  log('0'= = 0); //true
  log(' '= =false); // true
  log('1'= =true); // true
  log(null == undefined); // true

  var x = {
    valueOf: function() {
      return 'X'; }};log(x == 'X');

}(window.console.log));Copy the code

The difference between == and strict ===

  • ==, if the two values have different types, type conversion should be performed before comparison.
  • ===, do not do type conversion, different types must vary.

== equivalent operator

  • If two values are of the same type, a === comparison is performed, and the comparison value of === is returned
  • It is also possible to return true if two values do not have the same type
  • Returns true if one value is null and the other is undefined
  • If one value is string and the other is number, the string is converted to number and then compared
  • If a value is true, it is converted to 1 and compared, and false is converted to 0
console.log( false == null )      // false
console.log( false == undefined ) // false
console.log( false/ / = = 0)true
console.log( false= =' ') / /true
console.log( false == NaN )       // false

console.log( null == undefined ) // true
console.log( null == 0 )         // false
console.log( null == ' ') / /false
console.log( null == NaN )       // false

console.log( undefined == 0)   // false
console.log( undefined == ' ') / /false
console.log( undefined == NaN) // false

console.log( 0 == ' ') / /true
console.log( 0 == NaN ) // falseCopy the code

To sum up, ==

  • False is true compared to 0, “” in addition to being true compared to itself
  • Null is true only when compared to undefined, and undefined is true only when compared to NULL
  • In addition to being true compared to false, 0 has an empty string “” and an empty array []
  • The empty string ” has a number 0 in addition to being true compared to false

==, >, <, +, -,… Implicit type conversions caused by these operators are harmless and do not change the value of the variable itself. However, if you overwrite valueOf/toString of an object, == has side effects.

Such as:

Array.prototype.valueOf = function() {
  this[0]++;
  returnthis; } var x = [1, 2, 3]; x == 0; console.log(x); / / (2, 2, 3]Copy the code

=== operator:

  • Return false if the two values are of different types
  • Return true if both values are of type number and have the same value
  • Return true if both values are stirng and both values have the same String content
  • Return true if both values are true or false
  • Return true if both values refer to the same Object, Arraya, or function
  • Return true if both values are null or undefined

True and false judgment

  • The following contents in js are false:
  • false
  • null
  • undefined
  • 0
  • “(empty string)
  • NaN

Setting default Parameters

Logic operator | | and && can also be used to return Boolean value. If the object is not a Boolean, each expression is checked from left to right. Based on this operation, one expression is always returned eventually. This can be used to simplify your code when assigning values to variables. For example, if x does not exist and y does not exist, x=1; If x exists and y exists, x is equal to y

if(! x) {if(! y) { x = 1; }else{ x = y; }}Copy the code

Is equal to:

 x = x || y || 1;Copy the code

This little trick is often used to set default parameters for methods.

(function(log) {'use strict';

  function multiply(a, b) {
    a = a || 1;
    b = b || 1;

    log('Result ' + a * b);
  }

  multiply(); // Result 1
  multiply(10); // Result 10
  multiply(3, NaN); // Result 3
  multiply(9, 5); // Result 45

}(window.console.log));Copy the code

Do not use the eval() function

As literal as eval is, devil, using eval() is a security risk. The eval() function returns an arbitrary string, treated as js code.

This keyword

Use this only in object constructors, methods, and in specified closures. The semantics of this are somewhat misleading here. It points sometimes to a global object (most of the time), sometimes to the caller’s domain (in eval), sometimes to a node in the DOM tree (when bound to an HTML property with event handling), sometimes to a newly created object (in the constructor), Sometimes it refers to other objects (if the function is executed and called by call() and apply()).

Because it’s so easy to get it wrong, limit its use scenarios:

  • In the constructor
  • In the methods of the object (including the closure created therefrom)

The functional style is preferred

Functional programming lets you simplify code and reduce maintenance costs because it is easy to reuse, yet decouples appropriately and has fewer dependencies.

The following example compares two solutions to the same problem of summing a set of numbers. The first example is classic procedural processing, while the second example uses functional programming and ECMA Script 5.1 array methods. Is not recommended

(function(log) {'use strict';

  var arr = [10, 3, 7, 9, 100, 20],
      sum = 0,
      i;


  for(i = 0; i < arr.length; i++) {
    sum += arr[i];
  }

  log('The sum of array ' + arr + ' is: ' + sum)

}(window.console.log));Copy the code

Recommendation (functional programming) :

(function(log) {'use strict';

  var arr = [10, 3, 7, 9, 100, 20];

  var sum = arr.reduce(function(prevValue, currentValue) {
    return prevValue + currentValue;
  }, 0);

  log('The sum of array ' + arr + ' is: ' + sum);

}(window.console.log));Copy the code

Modify the prototype chain of the built – in object

Modifying built-in objects such as Object.prototype and array. prototype is strictly prohibited. Modifying other built-in objects such as function.prototype is less harmful, but still causes problems that are difficult to debug during development and should also be avoided.

Ternary conditional judgment (quick method for if)

Allocates or returns statements with ternary operators. Use in simple situations and avoid complex ones. No one wants to wrap their heads around 10-line ternary operators. Is not recommended:

if(x === 10) {
  return 'valid';
} else {
  return 'invalid';
}Copy the code

Recommendation:

return x === 10 ? 'valid' : 'invalid'Copy the code

JSHint

In the JS specification, there are a lot of conventions that are stylistic rather than logical, such as using === instead of ==, we can use JSHint or JSLint, Javascript code validation tools that can examine your code and provide suggestions for code improvements. I personally use JSHint, so I’ll take this as an example

Webstorm built-in JSHint

For WS aficionados, I haven’t used any other compiler, WS has basically everything you need (the latest WS integrates with VUE). In Settings => language & frameworks => JavaScript => Code Quality Tolls => JSHint

The jshint webstorm

The official documentation

The name of the meaning
curly Loop or conditional statements must be wrapped in curly braces
eqeqeq Use force etc === =
newcap For uppercase functions (declared classes), use new is mandatory
noarg Disable arguments.caller and arguments.callee
sub Use aaa. BBB instead of aaa[‘ BBB ‘] for attributes
undef Find all undefined variables
boss Look for code like if(a = 0)
node Specify the runtime environment as Node
strict Strict mode must be used
asi Semicolons are allowed to be omitted
bitwise Disallow the use of bit-operators, such as frequently misspelled && & to avoid this error
jquery Define the globally exposed jQuery library
evil Disallow eval
maxdepth Maximum depth of nesting
maxparams The maximum number of parameters

The CSS specification

Id and class names

Always use names that reflect the purpose or purpose of the element, or other generic names instead of literal and obscure names.

.fw-800 {
  font-weight: 800;
}

.red {
  color: red;
}Copy the code

Recommendation:

.heavy {
  font-weight: 800;
}

.important {
  color: red;
}Copy the code

Use ids wisely

In general, ID should not be used for styles, and ID is heavily weighted, so using class instead of ID is not recommended:

#content .title {
  font-size: 2em;
}Copy the code

Recommendation:

.content .title {
  font-size: 2em;
}Copy the code

Avoid label names in CSS selectors

In terms of separating structure, presentation, and behavior, HTML tags should be avoided in CSS, and the presence of tag names in CSS selectors is potentially problematic.

Use child selectors

Many front-end developers write selector chains without direct child selectors (note the difference between direct child and descendant selectors). Sometimes, this can lead to painful design issues and sometimes it can be very performance draining. However, in any case, this is a very bad practice. If you’re not writing generic selectors that need to match to the end of the DOM, you should always consider direct child selectors. Is not recommended:

.content .title {
  font-size: 2rem;
}Copy the code

recommended

.content > .title {
  font-size: 2rem;
}Copy the code

Use abbreviated attributes whenever possible

It is useful for code efficiency and readability to use abbreviations whenever possible, such as the font attribute. Is not recommended:

border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; The line - height: 1.6; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0;Copy the code

Recommendation:

border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;Copy the code

Zero is not followed by a unit

Omit the unit after 0, not recommended:

padding-bottom: 0px;
margin: 0em;Copy the code

Recommendation:

padding-bottom: 0;
margin: 0;Copy the code

Attribute format

  • To ensure consistency and extensibility, each declaration should end with a semicolon, and each declaration should end with a line break.
  • Use a space after the colon of the attribute name. For consistency reasons, a space is always used between the attribute and the value (but there is no space between the attribute and the colon).
  • Always use a new line for each selector and property declaration.
  • Property selectors or property values are enclosed in double quotes (” “) instead of single quotes (“).
  • Do not use quotes for URI values (url()).

As a best practice, we should follow the following order (it should follow the following table) :

Structural attributes:

  1. display
  2. position, left, top, right etc.
  3. overflow, float, clear etc.
  4. margin, padding

Expressive attributes:

  • background, border etc.
  • font, text

Is not recommended:

 .box {
  font-family: 'Arial', sans-serif;
  border: 3px solid #ddd;
  left: 30%;
  position: absolute;
  text-transform: uppercase;
  background-color: #eee;right: 30%; isplay: block; The font - size: 1.5 rem; overflow: hidden; padding: 1em; margin: 1em; }Copy the code

Recommendation:

.box {
  display: block;
  position: absolute;
  left: 30%;
  right: 30%;
  overflow: hidden;
  margin: 1em;
  padding: 1em;
  background-color: #eee;
  border: 3px solid #ddd;
  font-family: 'Arial', sans-serif; The font - size: 1.5 rem; text-transform: uppercase; }Copy the code

Related articles:

  • Front-end coding specification
  • JavsScript development specification,
  • Development specification (iv) JS specification