CSS naming inside there are brainiac

In fact, slow to start writing about the layout of the style of experience,

Because most people in the eyes, which need to tube so much, only need to achieve the final effect on the line.

However, even today's domestic and foreign top Daniel is not afraid to say that he is a good CSS engineer.

General large companies are HTML and CSS is separate to write, a responsible for the structure and semantics, a responsible layout and style, it is not easy to see this stubble ...

CSS Separation and merging

What should I say,

Part of the code can actually be separated into pt1 to represent Padding-top:1rem,

And the other part of the code can be combined into. Icon {...}. Icon-heart {...},

Separation and merging are seemingly contradictory, but they are created for thin code, requiring great control from programmers (especially when multiple pages use the same CSS file).

. Item A is much slower than. link

This has to do with the rendering of the render tree, which follows the "right-to-left" principle, which is to iterate over a, and then find. Main_menu_item, think how horrible it is.

. Box.box1 morphology you think it's going to be fast.

Do not deny,. x the most straightforward naming method is the highest rendering efficiency. (this advice is important)

Reject id! Reject Hierarchy! Reject tags!

Their existence is only for the sake of promoting the style priority, all limits the dead scope, also talks about how to reuse.

ID Let it go and JS to make it good, do not let it into the world of CSS.

The maximum performance consumption selector should be * and multiple class selectors (e.g.. Foo.bar)

But. x > * This situation is really hard to define, obviously he is very burning, but also to ensure that. The sub-labels under x can be varied, so it's hard to decide.

Width separation

This is also why the menu we always use ul > li > A to set, rather than div > a reason, A's parent to set wide height, a responsible for padding just fine.

Can not set the width of resolute not set, not only is the basis of flexible layout, but also to avoid their own wide-height overflow,

In addition, in the absence of Border-box, the change of padding has to be involved in the recalculation of the width.

In fact, there is no width, but also can be through padding | Margin | Absolute to make the settings.

Writing code for a while, fine-tuning and changing demand is the norm ...

Fully compatible or progressive enhancement

In fact, I do not care about this aspect of myself, really is not a good front-end ...

For example [type= "range"] in each browser look different, that should not be fully compatible must make a kind of,

But Text-shadow is not supported on some browsers, does it matter?

This question varies from person to person. Now I'm glad I'm a Taurus.

CSS naming inside there are brainiac