Front-end stew, summarize some details points

Summarize the front-end aspects, some of their own experience, a mess of finishing a bit, temporarily think of these, will continue to update.

build tools must be used, Gulp and so on. Use Requirejs, browserify and other JS module management, Bower Management three-party library

Css:

　Structure:

• Using less, file structure reference bootstrap less source file
• As much as the less files, according to the use, classification, and so the name, try to make a lesser file code a little bit more, so good later maintenance and query

　Three-party library:

• Use Bower to download the three-party library, if you need to modify the three-party library of the class, the introduction of the third-party library of less source files, covering some of the three-party library class

(Do not modify the source file, just use the priority method to modify some classes themselves)

As below, go to Boostrap Portal file to add some less to yourself:

　　　　

@import ". /.. /bower/bootstrap/less/mixins.less "; @import". /.. /bower/bootstrap/less/variables.less "; @import "variables.less";//my setting@import ". /.. /bower/bootstrap/less/normalize.less "; @import". /.. /bower/bootstrap/less/utilities.less "; @import". /.. /bower/bootstrap/less/type.less "; @import". /.. /bower/bootstrap/less/grid.less "; @import". /.. /bower/bootstrap/less/scaffolding.less "; @import". /.. /bower/bootstrap/less/buttons.less "; @import". /.. /bower/bootstrap/less/button-groups.less "; @import". /.. /bower/bootstrap/less/forms.less "; //my@import "buttons.less", @import "form.less", @import "scaffolding.less ";

　Named:

• The name is separated by a middle bar, for example:. Layout-text.
• At the same time, I think that the custom class must be preceded by a prefix, such as the project is called Sun Light, the prefix is. SL, the actual is. Sl-layout-text. Or it may be the English beginning of the company name, or its own, depending on the project situation.

This has the advantage, because generally will use the tripartite CSS Library, when the custom class and the Tripartite class mixes in the HTML, then can see which is oneself definition, very convenient maintains and the clearing page.

• Depending on the situation, you can also not add a custom prefix, for example (you only need to add a prefix to the top):

　　

<ul class= "Xx-user-comments" >
<li>
<div class= "Con" >

<p></p>
</div>
</li>
</ul>
. xx-user-comments{//XX represents the required prefixli{padding-top:15px;. con{position:relative;Padding-left:45px;. head{position:Absolute; Left:0;Top:0; }P{font-size:14px; }        }    }}

• Picture naming is also recommended to be separated by a middle bar

　Code:

• Rigorous, layout as far as possible to write the perfect, such as the write wide high place must write, otherwise there will be some unexpected confusion.
• Fully understand the elements and block-level elements in the row, as far as possible and reasonable use of float.
• ID class style!important and other selectors to understand their priorities
• CSS3 animation written in before and after is invalid
• Can pull away from the general properties of the class as far as possible
• Can write variables where possible to write variables, can help write less code and post-maintenance, as follows (if the path changes, only need to change the amount, with the editor batch modification can also, just the following more elegant point):

　　

//# #IMG @img-path:      '. /img ';//img button@weixin:        ' @{img-path}/[email protected] '; @weixin-hover:  ' @{  Img-path}/[email protected] '; @qq:            ' @{img-path}/[email protected] '; @qq-hover:      ' @ {Img-path} /[email protected] '; @weibo:         ' @{img-path}/[email protected] '; @weibo-hover:   ' @{img-path}/[email protected] ';

• The color of the General page is determined by the designer, all the colors to be used as variables, unified management
• With the following box pattern, any padding and borders specified by the element will be drawn within the set width and height

* {    -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     box-sizing: border-box;}

• Note Some of the unpopular CSS3 properties, can solve some troublesome problems, such as encountered a problem before, with User-select to solve. Mobile iOS long-click replication Compatibility Program
• Recommended use of Webfont
• Try Rem.

Js:

• According to the page, the module divides the directory structure
• The variable of JQ starts with the $ sign
• Use the Global JS Variable plus window, for example: Window.map, the purpose is to post-maintenance, a glance to know that this is a global variable, save some time to see the code
• Note the effect of asynchronous and synchronous on logic
• Use variables to store the DOM selected by the JQ or native selector to be called multiple times, optimizing performance
• Learn to encapsulate some tool classes to reduce development costs
• Figuring out the changes in the scope
• The mobile side is also recommended for JQ, no Zepto
• Use Requirejs, browserify and other module management tools to manage JS
• The mobile side remembers to use Fastclick

Html:

• Extraction from common modules, footer, headers, modal, etc.
• Beware of text whitespace issues caused by code wrapping
• Exclamation marks and other symbols as far as possible in English symbols, Chinese symbol spacing is large, resulting in some center effect does not seem to center
• Using template inheritance, the benefits are greatly
• Don't use the Super long document declaration, see can not stand, direct <!doctype html>
• Dom's Display:none, to manipulate it, it will be easy to have some problems arise

Thought:

• Do not pursue the popularity of technology too much, do not follow suit, do more contrast, use the technology suitable for the project
• Do not use too much action on the page, moving more than dizzy, not for the technology and in the project to dazzle skills
• Do not perfunctory, there are problems do not think you can not solve, the courage to bear, a little digging, more attention to detail, always solve the
• Meet the needs of the first online to find the right three-party plug-in, there is the use, efficiency first; not write on their own, in fact, very interesting
• Think clearly again, try to write, low efficiency, many bugs
• Read more documents, more knowledge, do not rely on people, time and no growth
• Not recommended to buy a lot of books, and then did not read
• Recommend blogging, more effective than online or in-person technology
• Know more about non-technical knowledge, the bottleneck of personal growth is not the technology
• Get involved in the team, what level of thinking, and at what level do things
• Last point: Meet your favorite sister paper

Welcome message to add, about some details of the attention point, weird situation, etc.

These are just a few points, each point can extend a lot of knowledge.

Front-end stew, summarize some details points