How to improve writing skills CSS? How to learn Web front-end development? Many people in learning Web front-end, the beginning will learn HTML and CSS, HTML for text content, CSS for style design, master the knowledge of these two parts can be made simple page. But if takes a long time work in general is somewhat more harm than good, so you need to master some skills, in order to improve the efficiency of writing CSS.
1, the use of flex layout
It appears flex elastic layout for a reason. Floating and inline-block can be achieved, although the layout much effect, but they are essentially a tool element layout and a block of text, rather than for the entire page. flex can easily create layouts as we expected.
flex has a group-oriented "flexible container" for a set of attributes and "flexible project" of the property, once you learn them, do any responsive layout is a piece of cake. The latest version of browser support for various types of flex is also no problem, so you should use a lot of flex layout.
2, note that the folded margins
Unlike most other properties, from the upper and lower vertical outer margin will exist when folded margins occur. This means that when an element is in contact with the lower edge to the upper edge of another element, only kept two margin values in the larger one.
There are ways to solve the margins are many fold, for starters, the simplest is to use all the elements margin only in one direction, such as up and down from the outside we all use margin-bottom.
3, all the elements set Border-box
Most beginners do not know this box-sizing property, but in fact it is very important. box-sizing property has two values:
1) content-box (default). When we set the width or height of an element, it is to set the size of its contents. All the padding and border values are not included. For example, a div width to 100, padding 10, so that the element will occupy 120 pixels (10 * 100 + 2).
2) border-box. contained in the padding and border width or height of the element in a set width: 100px and box-sizing :. border-box div element, and its total width is 100px, whether it's how much padding and border.
All elements are set to border-box, you can more easily change the size of the element, without fear of padding values or a border element will be deformed or stretched wrap display.
4, the reset element CSS styles
Different browsers there is a big difference between the default styles for the various elements, the best way to solve this problem is common to all the elements set at the beginning of CSS CSS is, Reset reset code. So you are laid out in the absence of any basis for the default margins on the inside and outside, the effect of which is unity.
The network has matured CSS code base for us to resolve the problem browser inconsistencies, such as normalize.css, minireset and ress, you can reference them in your project.
5, more friendly comments
Perhaps CSS is not a programming language, but the code still needs to be documented. Comments can add some simple code classification to distinguish themselves and their colleagues to facilitate post maintenance. It should be noted, CSS // no comment, only / ** / comment.
6, the picture as a background
When the page is added to the picture, in particular, need picture is responsive, it is best to use background attribute to the introduction of the picture, rather than the label. It looks to use the picture is more complicated, but in fact it will make the picture style settings easier. With the background-size, background-position, and other attributes, maintain or change the image size and aspect ratio of the original will be more convenient.
One drawback background picture is the introduction of a Web page accessibility will be slightly affected, because screen readers and search engines can not properly get to the image. This problem can be solved by CSS object-fit properties, so far in addition to IE browser other browsers can use object-fit.
Small partners interested in the web front end this technology can be added to our study circle, the sixth year of work, learning to share some with you to develop practical details that need attention. 767-273-102 autumn dress. From the zero-based front-end to learn how to start. Are a group of people with a dream, we may be in different cities, but we will walk together with the front tip of the tip
7, do DIY, multi-use code library
CSS community is very large, there are always new code base appears. They have a variety of uses, from tiny fragments to construct whole frame in response to the application of the formula. Most of them open source. The next time you face a CSS problem, before you try devoting efforts to resolve it, check to see if a solution has been available on Github or Codepen.
8, using AutoPrefixer achieve better compatibility
CSS browser prefixes is one of the most annoying things that need to prefix each attribute is inconsistent, in the end you never know which one needs, if you really take it one by one manually added to the style sheet, it is undoubtedly a silly nightmare.
Fortunately, there are tools to automatically provide added functionality to the browser prefixes we can even decide which browsers need to support:
Online Tools: Autoprefixer
Text Editor plugin: Sublime Text, Atom
Code libraries: Autoprefixer (PostCSS)
9, compressed CSS file
In order to improve the site and page loading speed and load applications, resources should be used after compression. Compressed version of the file will remove all gaps and duplication, thereby reducing the volume of the total file. Of course, this process also makes a style sheet completely unreadable, so use .min version in a production environment, as well as developing retain conventional version. There are on the market are many different ways to compress CSS code:
Online tool: CSS Minifier, CSS Compressor
Text Editor plugin: Sublime Text, Atom
Code libraries: Minfiy (PHP), CSSO, CSSNano (PostCSS, Grunt, Gulp)
10, verification
Verify CSS may not validate HTML or JavaScript code that important, but by running tool at your code still very useful. It will tell whether you made any errors, warnings, incorrect usage, and provide tips to improve your code for you.
Like compression and Autoprefixer as there are free tools you can use:
Online tool: W3 Validator, CSS Lint
Text Editor plugin: Sublime Text, Atom
Codebase: stylelint (Node.js, PostCSS), css-validator (Node.js)
For people who want to join the Web front-end for the industry, employment is a big problem, but also a direct impact on all decisions. Therefore, the choice of professional learning is better, not only solid theoretical foundation, there is a wealth of experience in project development, clear career planning and skill of interviewing techniques, offers the potential for their own rapid employment.