To practice JS, must first attack the css--of the front-end practice of the road

Today I talk about the theme is CSS, specific talk about my CSS learning history, share some dry goods, I hope this share has inspired and help.

personal CSS History:

Talk about their own history of CSS learning, 12, was the teacher hand 1 to 1 teach me div+float fixed layout, all elements with float, do the student Union website All front page, because there is a period of time to learn PS more, also do their own UI, very ugly, The teacher said the first time to make this very good, then the teacher felt I have to do the front-end talent, I was from this time to contact the front end. Graduation design oneself A person to do a full stack of the web, finished the whole graduation design, I decided to do the front end, feel more like. 14 out of work, then will not use what less, is directly write CSS, then the main or write fixed layout of the PC page, 14 at the end of their own in the project toss, with a jqmobile, super difficult to use. 15 to do a mobile project, the study of several CSS libraries, learning bootstrap and some of its source code, but also used to Webfont, using flow layout this time the promotion is very large and later learned REM, and used to the project, so my CSS to a slow growth period, or not intentionally learning CSS.

Dry Goods

Here are some, I usually pay more attention to the details, technical points, and some people may not be very familiar with the knowledge points.

1.box-sizing:border-box

Box-sizing mainly has two values Content-box and Border-box, first look at the official explanation:

Popular point, by default, padding and border will occupy extra space, if the element width is 10px, if the 1px border border is set, the actual width is 12px,padding the same. So this will lead to the layout of the width of the poor control, calculation is particularly troublesome. So we will give the global elements to use the Border-box, as long as the width is set to high, then border and padding no matter how the change, the width of the element will not change, so convenient layout and calculation.

2. Left fixed right adaptive

In the layout, such as some list page, often left is a fixed-size thumbnail, the rest of the right side to show the title,

Then we call the left fixed to the right adaptive layout bar, my method 100% wide div with padding-left left the picture to leave the location, div element content is the title, the image is absolutely positioned to the Padding-left area, so that the left fixed right adaptive, (If the box-sizing must be border-box, otherwise the padding plus 100% width will exceed the screen width), the approximate code is as follows:

3. Pseudo-class content attr

The content property of pseudo-class before,after is used to insert contents, we can pass the property name of the current element through attr, and load the property value into pseudo class content, this is a kind of writing, but the actual application scenario may not be many, just understand it.

4. Chinese symbol centering effect

For the dynamic output text can not be concerned about, some pages may have a similar hint of the copy of the place, in English punctuation, for the center effect is relatively friendly.

5. Upper and lower spacing of elements

Layout of the time from the top down to write the page, is generally written to the next element margin-top to determine the spacing between the previous element, then try not to write Margin-top and write Margin-bottom, if mixed with, late maintenance, For example, a piece of area needs to be stacked position, or a component may be shared by many places, mixed writing words later in the change, it may be troublesome, the problem here can be said slightly, but whether it is JS or CSS, attention to detail and develop good habits, is the code of the ability of a manifestation.

6. Font Color Transparency

Sometimes designers, when configuring the font color may use a transparent percentage, to set several different colors, such as the main color is #000, light gray #000 80% Transparency, this case does not recommend the Web write transparency, but let the designer to give the corresponding color value, because the transparent color according to the background of the different, For example, this is the case now, so the extensibility is poor.

7. Naming

Naming is one of the most tangled things, first look at the first, so the name of the more detailed can be at a glance to know the meaning of the current class, but the length is longer, increase the amount of code.

The second use of the abbreviated name will make the code shorter and faster to write, but not easy to read.

If you use abbreviations to name, you can contract the document, there are conventions and familiarity with costs, but familiar with the future more efficient, the naming of the class will become more standardized and unified

8.0.5px Frame Understanding misunderstanding

When I wrote the border, I found that as long as the color of the border is lighter, the border looks thinner, so when the designer asks me why the border looks thicker, I tell them that the color is a little bit lighter, and this technique I've been using in practice. Online blog said through the CSS3 transform Zoom scale 50%, can achieve 0.5px border, I have been very strange, 1px is actually the smallest unit of physics, how can achieve 0.5px, so I did an experiment, I set the 1PX color 000 border (black),,

When I scaled 50% with scale, the color changed to C5C5C5, but actually there was still 1px. ，

I use the color picker tool to be accurate to pixels, and indeed 1px, so this way does not achieve 0.5px but the color becomes lighter. Also some mobile phone screen 1px is the display according to 2PX, so this way can make 2px zoom 1px, so that the 1px border becomes more light, this way does make the border thinner, but not to say it is 0.5px.

9.user-select:none

This property lets the area content cannot be selected, can prevent the user to long press copy, also may avoid the user to copy irrelevant content, for example below I only want the user to copy 6655 verification code, except 6655 I have set the User-select:none, long press other part does not appear the Copy button, the button number can , and the left and right subscript of the third picture can only be dragged between 6655

10.js-class

When binding events to the DOM, you may be bound to the current style of the class, which will be modified or replaced by the class name, affect JS, and if the definition of a non-style JS prefix class is specifically used to bind the event, so that the decoupling of style and logic, when reading the code, You can also see at a glance which elements are bound to events.

11. Common class combination notation

Well, this is my name, let's look at the first one, it's normal, all styles are written in a class.

Then look at the second, define a public class, introduce the class directly through less in the style, the second is a little bit more efficient (write fewer letters), but you need to be familiar with and maintain the public class

Look at the third, the public class written in the element class, this kind of more flexible, such as I now want to write two item element, a left floating, a right floating, then this can not change the item, and directly use different classes to implement different styles, like JS code to weight the same, Pass in a different parameter to differentiate and share the same place.

The fourth kind of public class all writes in the element, in writes the DOM the time does not have to write the CSS, directly the desired class writes in the DOM, is not a bit like the JS component, this kind of writing is more efficient in the specific case, for example the PC backstage class project, to the UI request is not high, is more suitable, This efficiency also depends on whether the public class class is comprehensive, is familiar with the class in the project, but also should be careful not to let the length of the element is too long, as far as possible to maintain within 4 classes, beyond the words should not be used in this way.

These four kinds of writing can actually be, in a project, for different parts can be written in different ways, can be very flexible to choose the way you want.

text size for 12.rem layouts

We all know that browsers generally do not let the text less than 12px, if the setting is less than 12px browser will show 12px, when we use the REM layout, the element will be based on the screen width, such as the scale of the design, such as the designer to the 750px, if an element of the text is 22px, Then when the user's screen width is 375, the text will be scaled to 11px, the actual browser will be displayed as a minimum of 12 pixels, then the other non-font element scale will still be reduced, this time the font may and other elements of the proportion is not the original design, if the user screen is 320px, Then the ratio between the original design elements is much worse. So we must tell the designers according to their own situation, in the width is 750 pixels of the design, the minimum font size should be how many pixels.

13.object-fit:cover

When we do the list page, the picture is fixed size, such as a 100px*100px square picture, but it is possible to get the picture is not square, this non-square picture placed in the square img tag, will be deformed if the use of Object-fit:cover Can be cropped out of proportion of the part, so that the picture will not be deformed or stretched, but this will cause the picture is incomplete, depending on the picture, may be cut off the key part of the content, but in view of the list is the thumbnail, so still can add this attribute, is a more eclectic approach.

14. The agreement of the picture

When it comes to picture stretching, it is necessary to say that the contract for the picture, because whether it is stretched or cut will lead to the picture of disability, stretching affects the vision, cutting fear of missing key parts, if not strictly in accordance with the agreed specifications, it is certainly not compatible with all circumstances, Therefore, in the beginning of the project and product operators to agree on a good picture ratio, the proposed convention is a square.

Summary

Always, to learn CSS, need long-term scrutiny, long-term attention and improve the details of the code, in each project in the actual combat, take a little time to optimize, try, accumulate to become a personal system,
Personal style. This system and style, generally you are accustomed to, will be accustomed to, and even summed up when you do not know what to say, but when you go to maintain or look at other people's code, you can realize that,
Originally this place other people may use, you present own opinion, can have the good influence to the team and the surrounding colleague, if own question colleague pointed out, can also in turn, enhances own understanding.

and designers ...

To do css, write good pages, and the designer's communication is also a very important skill, because the designer decided to show the final appearance of the page, to pass the project acceptance, also must be approved by the designer.

Scenario 1:
Designers to come over an interactive effect, the front-end to get, a want to interact with the effect can also, but the realization of high cost, function is not finished, do not want to do so thin, and then directly said no time this can not do, the designer a think this interaction is difficult, others can do, why don't you do, just like this back and forth Make the product there, the last possible interaction effect still have to do, time also delayed. In fact, this is a lot of front-end will encounter problems, time pressure tight, the function may have to be postponed, but also to do these interactions, will naturally a little complaining, emotional one up, the product and design are offended, and finally to do, as the contradiction becomes more and more deep, communication becomes more and more difficult. A change of thinking, designers most of the time is also very tight, to the product and design leadership have an account, the front-end and in urging, finally made, you can not achieve that also can not achieve, you so I can not explain AH. Then we change the way of communication, such as: we have a bit of time, this interaction is troublesome, compared to the time, I can do, but may affect the progress of the project, you see or I do a simple point, wait until the time when the test to add this interaction, really can not wait until the line, I'm going to optimize this place alone and I'll be online soon.

Designers are still reasonable, according to some features of the web, some of the designers design some of the ideas may not be realized, or the realization of the cost is too high, we have to convince them why this place can not be achieved, because they do not understand, so afraid of you to confuse them (actually sometimes someone to cheat them), So if you want to convince others, you must make clear the problem, the knowledge points clear, can not achieve the reasons for the designers to speak clearly, and to be reasonable, and the best online to find relevant blog or official explanation for supporting. There are many contradictions and problems, it is that we neglect the communication, or we are lazy, in fact, when the knowledge point to the layman to say clearly, this also shows that the understanding is through, but also to their ability to improve. Designers hard to design the manuscript must try to achieve their results, but also to consider the scalability and achievable, attitude is very important, do not let people think is perfunctory them, what is perfunctory, do not explain clearly said do not do, is perfunctory, otherwise truth only blame himself. Technical point to make clear, or explain not clear, others do not pay, in the discovery of design issues, patience to remind some of the inappropriate places, more to help others bear a little, front-end and designers to get along .

let 's talk about it.

Do not compatible with IE low version (I feel compatible with more than 11 on the line), especially the start-up company, for the start-up company, the cost is very low, its own entrepreneurial company no technology, no precipitation, live is a problem, compatible with IE is even a waste of labor costs, for example, IE8 does not support rounded corners,
Without placeholder, you have to use JS to simulate. For individuals, the replacement of technology is the trend, we have to look ahead, there is something for you to learn, do not waste youth in this place.

We all go to see Bootstrap source code, see some of the core part is enough, such as variable variable some of the most commonly used parts, source code is not difficult, can get a lot of inspiration.

Finally, we enclose the live address

To practice JS, must first attack the css--of the front-end practice of the road