Foreword
Css start of the project should pay attention to what issues
File name specification
The recommended way to add a file name with a horizontal line in lowercase letters. why? Because of this relatively strong readability, looks cool, but also as a link in such a way, for example,
// 地址: github的地址
https://github.com/wangjeaf/ckstyle-nodeWhy do not the variable name in lowercase letters plus a small dash of ways, such as: family_tree, but recommended camel's familyTree? C language is like naming a variable in this way, but due to the more difficult because the underscore knock (shift + -), it is generally a camel named variables of the majority.
Introducing CSS file can not link with type = "text / css", the following code:
<link rel="stylesheet" href="test.css">Because the link rel inside the most important thing is this property, you can not type, but not without rel.
JS same token, you can not type, the following code:
<script src="test.js"></script>No compatibility issues.
Properties writing order
Writing order attributes do not differ for browsers, in addition to covering other than priority. But if the order is consistent, then glance can quickly know what type of property it affects the selector, it is generally take place in front of the more important properties. Compare the recommended order is as follows:
You might think I'm usually pretty much written so, so that you have a good accomplishment. And I think the rules are not dead, and sometimes can be flexible, just like you might write a transform center, then left / top / transform written side by side, and I think this is understandable, because it can make people at a glance What are you doing.
Do not use a style named features
Some people may prefer to use the characteristics of the style name, for example:
.red-font{
color: red;
}
.p1{
font-size: 18px;
}
.p2{
font-size: 16px;
}Then you will see its html which sets the class name of a large number of p1 / p2 / bold-font / right-wrap and the like, this is not desirable, assuming you engage in a red-font, the next UI to change the color, then you write the class name is useless, or the responsive layout inside the small screen when the right will go to the following, then you take a right useless. Some people put the overall aim UI a bit and found about UI with three kinds of size 18px / 16px / 14px, then wrote three classes p1 / p2 / p3, different font sizes on different sets of classes. This at first glance, it seems that quite common, but when you look at his html, you're mad, like these p1 / p2 / p3 of add up to write twenty or thirty, crowded. I think if you want to write, then might as well help title tag as follows:
.house-info h2{
font-size: 18px;
}
.house-info h3{
font-size: 16px;
}Because it increases the font size is likely to be a title, so why not just use title tags, heading tags can not just worry because there will be the default style.
Class names should be used in a logical sense that it represents, such as a signup-success-toast, request-demo, agent-portrait, company-logo and the like.
If some style you feel really special general, it can treat it as a class, such as clearfix, or some animation effects, there are several places to be used, I think this is more complex and versatile as a separate class . But still tend to use names significance.
Do not use the hack
Some people use some hack at the time of writing CSS method Notes, as follows:
.agent-name{
float: left;
_margin: 10px;
//padding: 20px;
}The principle of this method is due to begin with _ // or CSS properties browser does not recognize, so they are ignored, the semicolon is the attribute terminator, to content from // semicolon are ignored by the browser, but this comment It does not advocate either the .css file into .less or .scss file, so you can happily use the // comment.
There are also specific to a particular hack the browser, such as * the beginning of the property is a hack for IE6. In any case do not use hack.
Selector Performance
Selector generally do not write more than three, some people write a lot of sass or less like cover layer, as follows:
.listings-list{
ul{
li{
.bed-bath{
p{
color: #505050;
}
}
}
}}A layer of a container on the set, sets down layer by layer, the bottom layer set of seven or eight, so long selector performance is rather poor, since there is a recursive Chrome have a match from the last to the first selector the more selectors, the longer match, so time will be longer, and readability of the code is relatively poor, to see the innermost p style tags is what I have to up layer by layer look, to see where p. 7-8 indented code inside layer looks more tired.
Just write twenty-three generally more important to select just fine without written into each container, it is important to put the target element class or id.
The last is the label of choice should be used sparingly, because if you write .container div {}, then all of div on the page for the first time in the match, because it is matched from right to left, so write html benefit is not set many classes, but scalability is not good, so do not use this easily, if the use requires careful consideration, if only the right to use, at least not abuse.
Avoid selector selected by mistake
Sometimes there will be own style influenced by other people's style, or his style does not accidentally affect other people, probably because like others named classes, there may be a selector written too broad, for example, someone in he wrote his own page:
* {
box-sizing: border-box;
}Resulting in the common box style bomb hung up his pages. * Do not write the one hand, global matching selector, regardless of the terms of performance or the scope is too big, such as a selector in the three sub-selector:
.house-info .key-detail .location{}In three containers inside, * it is applicable and will inherit some property, like font-size, will lead the three containers have font-size, and then covered with a layer by layer.
Another is abuse: first-child,: nth-of-type selector such, the consequences of using this selector is poor scalability, as long as the html changed, it will lead to the style does not work, or It affects other unrelated elements. But this does not mean that the selector can not be used, as long as the well is very convenient, for example, that small point to make in all of last li li inside the margin-left, you can write:
.listing-list li:last-child{
margin-left: 10px;
}This may directly set a stronger class than you. But no matter what, you can not abuse the right time to use it, rather than just to write less class name.
Reduce coverage
Coverage is a common strategy, but also a less elegant way, the following code, in order to allow the middle of each house of 20px pitch, but the first not to have a house spacing:
.house{
margin-top: 20px;
}
.house:first-child{
margin-top: 0;
}In fact, you can change it to this:
.house + .house{
margin-top: 20px;
}Only the front .house .house to hit this selector, since before the first .house not, so I can not hit, so it looks more concise code.
There this case, as shown in the following code:
.request-demo input{
border: 1px solid #282828;
}
.request-demo input[type=submit]{
border: none;
}In fact, you can make use of a: not selector:
.request-demo input:not([type=sbumit]){
border: 1px solid #282828;
}This looks a lot code is also elegant.
There is a cover is worth it, and that is responsive style inside the small screen big screen coverage, as follows:
@media (min-width: 1025px){
.container{
width: 1080px;
margin: 0 auto;
}}I started to write is so, in order to follow the principle of reducing coverage, but later found that this is not good practice, the code is easy to chaos, written to cover the benefits that can be clearly seen in the browser, a small screen style which is covered style big screen, this is kind of how, when a large screen.
Less! Important
important to cover the property, especially in the CSS style which used to cover the inside of the property, however important or less better. Sometimes you just lazy to write one! Important, that this is the highest priority, and often mantis stalks the cicada, oriole in the post, probably before long have to write a higher priority overwrite, so it is slightly embarrassing. We are able to use less or less. If you want to overwrite or to add weight by increasing selector right way.
Typesetting specifications
Whether JS / CSS, indentation are transferred into four spaces, if you use the sublime, in the lower right corner of the software have a Tab Size, choose Tab Size 4, then put the hook on the top Indent Using Spaces, so, when you hit the tab key to indent a time will be automatically converted into four spaces. If you use vim, add or edit ~ / .vimrc file add the line:
: Set tabstop = 4 will be automatically retracted into four spaces, other editors find themselves setting method. Since t is not the same display length, and spaces may be changed format consistent in different people on computers in different editors.
A plurality of selectors share a style set, each of the selectors to own line, as follows:
.landing-pop,
.samll-pop-outer,
.signup-success{
display: none;
}Each attribute name with a space after the colon for a, ~,>, + front selector also with a space:
.listings > li{
float: left;
}And the proper use of background img
There are two ways to display a picture, you can set the CSS background-image, or use the img tag, what time in what it?
If the head is directly diagrams showing a picture or to the img tag, if it is used as the background image on the use of background, because you can write using img alt attribute enhanced SEO, and background images that itself does not require SEO. Although there is a background a background-position: center center is very good, but the first map that still use img bar, centered themselves to it, or can not do SEO.
Responsive Specification
Responsive Development worst Do not use hybrid rem, text size or use all rem, or do not use, do not use the transform: scale to go out, because the reduced size will look a bit strange, others are 14px, and you It became 13.231px, a bit small. Responsive general principle is to keep the same spacing on both sides or in the middle, and then reducing the width of the main content.
Less inline-block layout
Some people like to use inline-block, especially in the beginning of school-cut figure, because block will wrap, and inline-block does not wrap also has a box model, therefore inline-block with very smoothly, and float more complex, but also to deal with the problem clear float like. The following layout:
Should write li, then let li float, if you let li display: inline-block can achieve their goals. But with a much inline-block may be some strange problems, you usually want to set block element inside of a inline-block elements of, inline-block are inline elements, while the block is a block-level element, both of which eventually a little different. This should float / flex will be more natural, if you float with effortless you will find much better than the inline-block, and more professional. If you do not how used flex, then you can try to change it to use flex, if you do not how used the float, you can try it. Only your cutting plans diversification, you can map to the cut and raised more flexible.
