Means not only proficient in CSS style tags and can be used to write, but also make the code a good read, easy to transplant, easy to maintain.
1. External code quality: Debugging CSS
Quality is an external proxy users to experience the end result. Mainly reflected in several aspects.
- Correctness. CSS property name written on it? The browser can support?
- Robustness. Declared two properties, which is used as a backup for older browsers.
- performance. The page loads fast unhappy? Animation and scrolling is smooth?
We should be good developer tools use the browser.
How browser parses CSS 1.1
When the browser loads a website, you will first receive an HTML file corresponding to the URL. Then the browser to parse the HTML file as an object (node) tree. This is the Document Object Model (DOM, document object model).
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Document</title>
</head>
<body>
<h1>This is a test.</h1>
<p>This is a paragraph.</p>
<p>This is anothr paragraph.</p>
</body>
</html>When the browser to link CSS files in HTML met, it will acquire and parse CSS file. Similar to convert HTML into DOM, CSS files will be converted browser CSS object model (CSSOM, CSS object model).
Not only is the external CSS, internal style elements or inline style attribute in CSS is also parsed and added to CSSOM in.
Each CSS selectors will match a DOM node, then the browser will eventually be calculated based on the style of each DOM node stacking, inheritance, and specificity.
In rendering the tree, each node represents information to be rendered on the screen.
In the completion of construction of the render tree, the nodes should know what color they are, what kind of text using the font, and whether there is a clear width, and so on.
The browser will traverse the render tree to determine what position each object on the page, this process is called layout (layout) or rearrangement (reflow).
After determining the location and properties of each object is rendered, the browser can calculate the number of pixels they occupy on the screen, a process called rendering .
If you find that a certain part of the browser does not affect the final image page displaying other content, it may decide to draw split into different tasks, each responsible for a specific part of the drawing page, or call layer . Application of an element of filters or blending, mixing need to determine how the other layers. This is split into the first layer, and then combining process called Synthesis (compositing).
1.2 rendering performance optimization
To ensure that the page on the screen changes smoothly, preferably in less than 16 milliseconds to complete the redraw. 16 msec corresponding screen refresh rate to 60Hz.
Some changes almost not affect the performance, such as scrolling page. This time the browser as long as the entire rendering results redrawn to a different location. If some of the changes will lead to changes in the style of the page, then it may affect performance.
2. The internal code quality: people-oriented
Internal code quality is measured in several ways:
- Reusability. If you modify a program, whether you need to modify many places?
- readability. When other people read your code, if you can quickly read?
- Portable. You write a piece of code that can be used independently, or must rely on other projects in order to use the code?
- Modular. Can your code to be self-evident way to organize themselves into other parts reuse?
2.1 understand CSS
CSS is easy to learn. As a designer, you should be able to do to pick up a website can apply a style to it. In other words, it does not require the use of knowledge and more advanced writing software.
If you just do a draft of the prototype, the code quality down does not matter, can be used on the line. However, when it comes to online products, the quality of the code could have a profound impact. It is related to the level of maintenance costs, bug possibilities, as well as ease the emergence of newcomers to get started.
Examples of code quality 2.2
<div id="pink-box">
<p>This is alert message implementation one</p>
</div>div#pink-box {
border-radius: .5em;
padding: 1em;
border: .25em solid #d9c7cc;
background-color: #ffeded;
color: #373334;
}ID selectors primarily within the page link, or access point as JavaScript. Of course, they can also be used as CSS selectors entirely feasible, but the ID selector high specificity pattern makes it difficult to cover them .
Also added in front of the selector div, the purpose of limiting ID selector. Such an element with an ID or class selector common situation is common, but is usually used to cover some special selectors too.
Improved implementation:
<div class="message">
<p>This is a <code>message</code> box</p>
</div>
<div class="message message-warning">
<p>This is a <code>message message-warning</code> box</p>
</div>
<div class="message message-success">
<p>This is a <code>message message-success</code> box</p>
</div>.message {
border-radius: .5em;
padding: 1em;
border: .25em solid rgba(0, 0, 0, 0.15);
background-color: #ffffed;
color: rgba(0, 0, 0, 0.8);
}
.message-warning {
background-color: #ffeded;
}
.message-success {
background-color: #edffed;
}
.message + .message {
margin-top: 1em;
}
2.3 Management stacked
It can be summarized in a few principles we help to improve code quality:
- Class name as the primary means of applying styles;
- Class name to be the name suggests, clarity;
- By splitting the single use rules to avoid unnecessary duplication;
- Do not bound element type and style rules.
These articles have a common principle that restrictions layered effects, mainly by controlling the particularity to achieve.
2.4 Managing Complexity
CSS methodology ultimately to manage complexity.
Even without CSS (including JavaScript), the page itself should be able to convey their message.
HTML specification for a description of the class name:
On what values assigned to the class attribute is no limit, but we recommend that describes what is essentially a descriptive name rather than the content of the performance.
CSS class name specification description:
CSS gives too much capacity for the class attribute, authors can completely customize design their own "document language", there is little to show sexual orientation elements (such as div and span HTML is) basis, and is specified by the class attribute style information. Authors should do so, because of the structural elements of the document language usually has accepted meaning of the definition of the class does not.
3. tools and processes
CSS is no universal programming language syntax, loops, functions, lists, variables, these are not.
It was written as an alternative CSS syntax, called a pre-processor , it can be converted into CSS-based style syntax to write general-purpose programming language. Currently there is a common preprocessor Sass, Less, Stylus, PostCSS and so on.
Sass (syntactically awesome style sheets, grammar super handsome style sheet) is the most popular. Sass write the most common way to use a superset of CSS, called SCSS . In other words, SCSS support all valid CSS syntax, in addition to Sass has added unique features.
4. workflow tools
Use Node and Gulp build CSS workflow
Node JavaScript is achieved outside the browser can be used for any task required of programming. Since the advent of Node, a large number of front-end development tools are based on JavaScript, the so-called "one-off does not bother two masters."
When it comes to front-end workflow, there are a lot Node tool, like Grunt, Gulp, Broccolli, we are focused on the realization of building tasks. These tools are configurable, and can be put together output between multiple tasks together to achieve the complete process.
5. The future of CSS syntax and structure
Degree CSS properties by browser support is not consistent in the use of the new features to be considered progressive enhancement to this principle (although many features have been widely supported, but does not support their browser, should also have a corresponding alternative implementation).
Web component refers to a set of specifications that allow developers to HTML, CSS and JavaScript packed into a truly comprehensive, reusable components, like a native of the same elements. Web components directly into the project in use, do not worry about style or script naming conflicts occur.
References:
- "Mastering CSS" - [British] Andy Budd, [Sweden] Emile 比约克隆德
Reproduced in: https: //www.cnblogs.com/gzhjj/p/11016413.html