Not conforming to code specifications is the biggest problem for newcomers
It is recommended to read the encoding specification of AlloyTeam, which provides some front-end writing specifications. This is very suitable for a team to implement this specification, and ensure the readability and maintainability of the code. These specifications can effectively avoid many novice common problems.
A, random naming
Class names should be lowercase letters separated by hyphens, and id should be named in camel shape, which is required by the specification. Many beginners write less development projects and watch more training videos, and many front-end learning videos are of low quality. Div and ID are arbitrary, class= “div1″,id=”test1”, etc. But not professional, if it is a big project is very bad.
Second, comments are rarely written and CSS is poorly structured
Many beginners have a problem with the editor is, don’t know how to quickly annotation, also does not have the habit of comment, CSS and see where and the style of the design draft or page render different is bad, just change where no whole structure of the CSS file has a complete plan, no plan no composition, of course not feel the need for comment. There is even a CSS file, style overwrite serious situation.
Three, the attribute has no rules
There are empty rules, attribute conflict, no Tab layout ugly, attribute order disorder readability poor
Do not understand the modularity and reuse of CSS
The core is that I don’t know how to organize CSS, because I haven’t done large-scale project experience before, so I don’t feel the necessity of CSS modularization, and I know little about CSS design patterns such as OOCSS and SMACSS. For example, I haven’t done the modularization of CSS similar to the following: Base, Layout, Module, State, Theme. If you don’t have modularity experience, you won’t have a deep understanding of the need for CSS programming.
Do not understand performance optimization of CSS
Repeated styles are just one example of the aforementioned property clutter, as well as the overuse of child selectors, ID selectors, and class selectors to restrict clutter, especially layout and positioning issues.
Missing knowledge
Because many people learn CSS is w3CShool knowledge (W3CSchool knowledge is too simple), it seems that they can make the web page more beautiful, but because they do not understand the responsive design, media, rasterization and many other knowledge, the research on CSS is still superficial, write web page problems are also more. Many people don’t even have knowledge of CSS3.
To avoid these problems, one is to read the specification, two is to understand the CSS design pattern, three is to study the CSS performance, four is to study the UI framework such as Bootstrap, five is to learn a set of front-end framework Vue or React, which can roughly improve the level of CSS.
Comprehensive methods to improve CSS capabilities:
1. Find several commercial-grade design drafts to disassemble and reconstruct, for example, go to some well-known design websites to download PS documents or sketch drafts, reproduce them with code, and adapt to multiple terminals;
2. Visit Github to see a few representative projects, starting with one Single Page;
3. Read the classic UI framework source code and understand the design concept behind it;
4. Use developer tools to “copy” and decompose the front-end web pages of well-known websites to learn more about the code experience of commercial level works;
5. Learn Webpack packaging, at least understand Vue, some web pages are written with three frameworks, it is necessary to master the packaging;
6. Read front-end specifications to understand engineering under the background of team collaboration;
7. Understand the CSS preprocessor.
8. Go to MDN to sort out the properties of CSS, such as pseudo-classes and pseudo-elements. Many people only read some books, video tutorials, or W3CSchool, which is completely not enough.
4. Write at the end:
Do not forget the original aspiration, never give up, you will open a flower of their own, come on.