Shulou(Shulou.com)06/03 Report--

In this issue, the editor will bring you what is worth paying attention to in CSS programming. The article is rich in content and analyzes and describes it from a professional point of view. I hope you can get something after reading this article.

CSS is cascading stylesheets, so overriding layer by layer is its essential feature. The real problem is maintenance, many people think that CSS is only a style, not code, no maintenance, so arbitrary writing, as long as the need for the style of the priority can be set to the highest, leading to the emergence of deep-level CSS, because each time you add a style must be higher than the previous priority to be seen on the page. The deep level not only reduces maintainability, readability is also a problem. People are not machines and cannot be read gracefully according to priority, so it is difficult to identify where a style is used. In fact, there are many redundant styles that are covered everywhere. This kind of code has an advantage in expansibility at the beginning, because adding a new class does not need to worry about the impact of other places, but slowly as the project size increases, the number of pages increases, there are more and more places to copy styles, and there are slight differences between them, changes in design, changes in requirements, all of which will push this fast-food CSS into the tarmac. Because it is difficult to maintain, so it can not respond to requirements, so it can not be reused, can only be copied, vicious circle.

As mentioned above, the problem lies in readability, maintainability, extensibility, and reusability. So as long as you improve them, you can solve the problem, though, it's not that simple. Let's start with what these concepts mean in CSS.

Readability

Some people think that CSS is not a program and do not need readability, while others think that CSS is readable as long as it is written, because it is very simple. Leaving aside the various preprocessors, the native CSS structure is really simple, with no programming parts, but it can still lead to confusion. There are two reasons, one is that CSS can be cascading, which involves priority and scope, if it is not written well, it is difficult to read the meaning, and the other is that there are many CSS attributes, coupled with the introduction of many unique attributes by CSS3, a selector may contain dozens of attributes. For example, the following CSS code that I casually wrote:

CSS

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, it's nothing, it's all border, and you can roughly see that this CSS is just to add a red shadow to make box look three-dimensional. But the middle part seems to be disruptive, and you might say it's too stupid to see. Yes, when these three parts are scattered in tens of thousands of lines of CSS, they will definitely not be seen. So some people naturally think of our lovely browser, yes, in the browser can quickly find the CSS style that acts on the target, but this is also the root of all evil. First of all, I assume you don't know what the middle part is written for, because you found it through a browser. Then there are two possibilities left, regardless of the change and see why it exists. The possibility of tragedy of the former is 100%, and the probability of tragedy of the latter is 90%, because you have fallen into the pit, and we will soon find that it involves another place to modify it, and then explore another inexplicable style in the browser. By the time you understand it all, you should have figured out tens of thousands of lines of code, perhaps most luckily. After wasting a few hours, I found that I only need to modify one line to achieve my goal.

Of course, we can naively think that as long as they are written together, it is easy to find them. And I will continue to follow this line of thinking to try to expose the problem.

Maintainability

The so-called birds of a feather flock together is very reasonable, people are used to classifying things, but the problem is that the classification standard, the style does not care about the business, no matter what the text content or function is different, it only cares about the style, such as the size of the text, spacing and width and height, color and so on. If you simply put the styles of a component together, it is bound to bring about repeated writing of small pieces of code. Don't you think how serious it is? Let me give you a chestnut.

CSS

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

}

Continuing with the above example, box needs shadows, but what if the project's UI uniform style, including sidebar,navigator and item, needs such shadows? And if the customer or UX slaps his head tomorrow, the shadow should be gray instead of red? Don't continue to naively think that global replacement is a lifesaver. First of all, few websites use red,blur as a hue, you should use # AA3333, such a code, and then you find that sidebar uses # A43433, while 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 same color has become exactly the same in the shadow. who can tell that it was probably just a random color in mockup when you first used it.

A large number of repetitions bring more than just code redundancy, we have to synchronize them manually, and it is difficult to ensure that their changes are completely consistent, especially when inconsistent and unique things are introduced into them. Do not underestimate CSS, the consequence is the pressure of schedule and manpower, and then there is whether PM has read the Myth of Man and Moon.

Someone must be wondering who told you to write like this in the first place. When we read the code, we like to ask, why did you write this in the first place? But slowly you will read its history, and sometimes it can't help it. This brings us to the next topic to be discussed.

Expansibility

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

The simple pursuit of maintainability is self-destruction, for the simple reason that the scalability is highest when you completely separate the old and new code, because you don't have to worry about having an impact on the previous part, and the new style can be played at will. Isn't it amazing to think that the code we wrote must be the code we asked before. So answer yourself. I didn't think about readability and maintainability. I just wanted to add a new style as soon as possible.

Then what is a good expansibility? to put it simply, it is a multi-functional product. For example, a box, maybe its style is just right.

Reusability

It seems that what I have been talking about is repetition, so let's talk about reusability. How to reuse CSS code is a big problem, such as granularity, whether one or two attributes are reused or a large set of selectors for reuse, or objects, whether to reuse attributes for class, or reuse class for html. These choices are not very important, but the impact is so significant that it can be said to be a change in the overall structure of CSS. Let's continue to discuss reuse with the shadow of box.

CSS

.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 # A93334\ 9

Border-bottom: 2px solid # A93334\ 9

}

So it looks like I have a class of shadow that can add this shadow to any target, but this leads to a reuse problem, like the messy CSS style above, if the item already has two other border, then this class cannot be removed. So when reusing, you should consider not only what you need, but also what you don't need. Other necessary attributes such as display and overflow also need to be considered, because of user agent, many properties are hidden in element.

These are the noteworthy aspects of CSS programming shared by the editor. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.