A summary of some notable places in CSS programming

CSS is a cascading style sheet, so a layer of overlay is actually its essential feature. The real problem is maintenance, many people think that CSS is only style, not code, no maintenance, so arbitrary writing, as long as the style of their own needs to set the highest priority, it led to the emergence of deep level CSS, because each time you add a style must be higher than the previous priority to see on the page. The deep level not only causes the maintenance to reduce, the readability is also a problem, the person is not the machine, cannot be very elegant by the priority reading, therefore it is difficult to confirm a style to use where, actually still has many redundant styles, in the style which is covered everywhere. This kind of code in the extensibility, at first there is an advantage, because add a new class, do not need to worry about the impact of other places, but slowly as the project scale, the page increased, the need to copy the style of the place is more and more, there are small differences between them, design changes, changes in demand, All this will push the fast-food CSS into the tar pits. Because it is difficult to maintain, so can not respond to demand, so can not be reused, can only copy, a vicious circle.

As mentioned above, the problem lies in the aspects of readability, maintainability, extensibility and reusability. So as long as they are raised they can solve the problem, although that is not so simple. Let's talk about the meaning of these concepts in CSS.

Readability

Some people think that CSS is not a program, do not need readability, some people think that CSS as long as the writing is readable, because it is very simple. Aside from the various preprocessor does not say that the native CSS structure is really simple, there is no need to programming parts, but still can lead to confusion. There are two reasons, one is that CSS can cascade, which involves the priority and scope of action, if the writing is not good, people can not read the meaning of it, the second is a large number of CSS, plus CSS3 introduced a number of unique properties, a selector may contain dozens of properties. For example, the following CSS code I write casually:

CSS code copy content to clipboard

span {

-WEBKIT-BOX-SHADOW:6PX 4px 4px Red;

-MOZ-BOX-SHADOW:6PX 4px 4px Red;

BOX-SHADOW:6PX 4px 4px Red;

}

Div span {

border-width:4px;

border-style:dotted;

Border-color:blue;

}

#box {

BORDER-LEFT:2PX solid red;

BORDER-BOTTOM:2PX solid red;

}

At first glance also nothing, is border, roughly can see this CSS just to add a red shadow to make box look more stereo. But the middle part seems to be disruptive, you might say it's too stupid to see. Yes, when these 3 pieces are scattered in the tens of thousands of lines of CSS, certainly do not see. So some people naturally think of our lovely browser, yes, in the browser can quickly find the role of the target CSS style, but this is the root of all evils. First I assume you don't know what the middle part is for, because you found it in a browser. Then there are two possibilities left, no matter 3,721 changed and see why it exists. The likelihood of the former tragedy is 100%, the likelihood of the latter tragedy is 90%, because you're already out of the hole, and soon we'll find that there's another place to change it, and then explore another baffling style in the browser, and when you know all that, you've got to make a clear list of thousands of lines of code. , and perhaps the most fortunate of all, a few hours of wasted time finding that only one line of change is needed to achieve the goal.

Of course, we can be naïve to think that just write them together on it, it's easy to find. And I will continue to try to expose the problem with this idea.

Maintenance of

The so-called birds of a feather is very reasonable, people are accustomed to classify things, but the problem is the classification criteria, style does not care about the business, no matter what the text content, or the function of what is different, it cares about the style, such as the size of text, spacing and width, color and so on If you simply put the style of a component together, it is inevitable that a small piece of code will be written repeatedly. How bad does it feel? I'll give you a chestnut.

CSS code copy content to clipboard

aside {

box-shadow:6px 4px 4px #AA3343;

}

Nav {

box-shadow:6px 4px 4px #AB3633;

}

. Item {

box-shadow:6px 4px 4px #AA3732;

}

. item.otherstatus {

box-shadow:6px 4px 4px #AA3132;

}

To go on to the above example, box needs a shadow, but what if the UI of the project, including Sidebar,navigator and item, needs to be shaded? And if, tomorrow, the client or the UX takes a pat on the head, should the shadow be grey or red? Don't continue to be naïve to think that global substitution is a lifeline. First of all, few sites will use Red,blur to do tonal, you should use the #aa3333, such code, and then you find sidebar used #a43433, and navigator is #ab3633, and so on, item has two states, And the two states correspond to different colors. How is that possible? But when you open the browser you will find that the original color, in the shadow of the same, who can see it, the original use of the time may be just random in the mockup to take a color.

A lot of repetition brings more than just code redundancy, we have to synchronize them by human beings, and it's hard to make sure that their modifications are exactly the same, especially when they introduce something unique and inconsistent. Do not underestimate the CSS, the result is the progress and manpower pressure, the following is the PM has read the "Human Moon myth".

Someone must be thinking, who told you to write like this. When we read code, we like to ask, why did you write this? But slowly you will read out its history, sometimes it is involuntarily. This involves the next item to be discussed.

Extensibility

Extensibility is a deceptive thing, the so-called extensibility is actually on the existing basis to develop new things again performance, but I think it must also have the prerequisite, that is, maintain readability and maintenance.

The simple pursuit of maintainability is suicide, for the simple reason that when the old and new code is completely separated, the scalability is the highest, because there is no need to worry about the previous part, the new style can be free to play. is not very magical, so think we write down the code, must be the previous we cross-examine code. So you answer yourself, did not consider the readability and maintenance, just want to quickly add new style, so write.

So what is a good extension of it, in short, is multi-functional products. Like a box, maybe it's a style

Reuse of

It seems like I've been talking about repetition, so let's talk about reusability, how to reuse CSS code is a big problem, such as granularity, is one or two properties for reuse or a large group of selectors for reuse, such as objects, is for class reuse attributes, or for HTML reuse class. These choices are not too important, but the impact is significant, it can be said that the entire CSS structure changes. Next, continue to use box shadow to discuss reuse.

CSS code copy content to clipboard

. Shadow {

-webkit-box-shadow:6px 4px 4px #A93334;

-moz-box-shadow:6px 4px 4px #A93334;

box-shadow:6px 4px 4px #A93334;

border-left:2px solid #A933349;

border-bottom:2px solid #A933349;

}

So it looks like I've got a shadow class that can add this shadow to any target, but this leads to a reuse problem, just like the one on top of the disruptive CSS style, which cannot be removed if the item has another 2 border. So it's not just about what you need, but about what you don't need. Other necessary properties such as display and overflow are also to be considered, because the user agent for the reasons, many attributes are hidden in the element.