8 CSS policies that help you write maintainable and streamlined front-end code, front-end css

8 CSS policies that help you write maintainable and streamlined front-end code, front-end css

(Click the public account at the top of the page to follow it quickly)

English: Corinne Kunze Translator: Open Source China

Https://www.oschina.net/translate/8-css-strategies-for-writing-maintainable-streamli

Writing basic CSS and HTML is one of the first things to learn in getting started with Web development. However, many of the programs I have encountered do not really take the time to consider the long-term and maintainability of front-end development.

I think this is mainly because many developers do not have a deep understanding of related policies when organizing their CSS/HTML and JavaScript.

For me and our team, the most important thing is to write maintainable front-end code. Although we have several customers who have been working together for many years, remember that you will never be the only developer in an application. Your one-time code and configuration only make sense to you, which does not mean they are meaningful to the next developer who develops this application.

To prevent this article from being too long, I will focus on organizing CSS content today. There are totally different ways to organize JavaScript.

The goal of this article is to become at least one rule, and it is best to become a guide for writing CSS for you. I will encourage you to find your own processing method, but the goal here is to make CSS consistent, simple, and easy to use.

Here are eight tips for organizing CSS to facilitate long-term maintenance.

1. Do not write unnecessary styles

For example, you must pay attention to display: block writing anywhere. Because many elements use this style by default.

For example, the definition inherits the font size of the elements you have defined the font size.

The goal here is double:

• Reduce the length of the CSS file, making it easier to locate the code position in the CSS file.

• Identify what the CSS class actually needs to do, rather than defining a bunch of existing junk styles.

A common problem is that many CSS styles that are no longer used are not cleared up. For the sake of simplicity, these CSS styles can be completely deleted.

2. Consider using CSS as reusable components.

If you can define reusable CSS tools and components for use, rather than regard CSS elements as forms and elements unique to each single page, the complexity of the code will be greatly reduced.

Write reusable classes to do the following:

• Make sure that your design is consistent among multiple different pages. You should know that if you change the style of a class, the changes will appear on every page.

• In this way, CSS writing is indeed fast. Most of the time, if you define some styles as a tool or class, you do not need to spend a lot of time updating and recreating styles that already exist elsewhere in the application.

3. Define tools in CSS to make your CSS more practical

We define a 'tool' as a CSS class, which is generated for a specific target, rather than to represent an entire element.

In the CSS framework of the process, such as Bootstrap and Foundation, you will often see the application of this policy.

You can see some examples in the process framework:

For example. after hide, you do not need to write a class every time to hide the elements on the page. You can use it directly on the elements. hide class, which is assigned to the display: none; style element.

We have created our own tool files and shared them among various applications. We use some public tools to reduce the need to write specific styles for each element.

There is a good example of using the margin and padding tools. Here we have an example of the padding tool (we also define tools related to margin, and tools only including padding-left and padding-right ):

By combining these tools, we can keep the blank pixels consistent and quickly mark the page without writing a lot of CSS.

When defining tools, you should consider using them multiple times. If it is a one-time style, or you just want to combine some common styles, it is best to define a specialized CSS class.

4. Avoid nesting, unless you really need it

There are some check box forms. In this particular case, you need your check box inline (side by side ).

If you try to write your style like this:

You realize that a link in the list element is actually black. So you try to write a tool class with a black link:

This. link-black link will be covered by the special nature of CSS and will not overwhelm. my-form li style.

This may be your intention. Now make sure that all the anchor points in your list element are red, but you do not know the future elements and possible design changes.

You may read this question: "Good Corinne, but how do you solve the problem above ?"

Through the above example, you should understand that the color of the anchor tag should be a variation away from the default link color.

So, in this case, I will 100% determine an additional tool class to process the red link. So this is an example of what it looks like in practice:

Add it to each li element in HTML.

I will make this assumption here: this red link will be used somewhere else in the application one day. I don't want to embed it into a user form, because I have to write another style in the future to explain the need for a red link.

In addition, because I hover my cursor over my own anchor, the red link turns black and does not have to define any other style.

5. Use BEM to prevent excessive nesting

BEM (Block Element Modifier) policies can effectively prevent excessive nesting.

An example of using BEM is that when you use a component with many specific styles, it becomes complicated and confusing and cannot use utilitiy.

For example:

From this example, you can see that the. profile _ photo in the my defined style sheet is nested with. profile, but no nested class is used. This is the best place for BEM, which is why I recommend BEM.

6. Use it only when you have no choice! Important

Define on a class! Important is a method that makes code overwrite, especially when you try to process media queries.

And this is very troublesome for mobile terminals. For example, if you want to display some content on your phone screen, you must use another one! The important class overwrites the. hide class to display it on mobile devices.

I have not found a reasonable excuse to use it! Important, unless you put the wrong position before rewriting others! Important class.

7. Sometimes the wheel needs to be re-invented, but consider other feasible options carefully.

Build your own grid CSS framework in the client project. This is an example of repeated wheel creation.

In my experience, unless you want to know how it works, writing these things by yourself is not very good. There have been many edge cases built by myself, and there is no reason not to use what others have done well and are free of charge.

That is to say, building a wheel by yourself may be a good learning experience-but this may not be applicable in application production.

Okay, but what about the JavaScript plug-in?

When talking about JavaScript or jQuery plug-ins, I will say that the same is true for common components that are well integrated with any of your components. Here are some examples, such as switching photos between JavaScript turntable or date selector.

The edge cases here can use some JavaScript framework plug-ins with encapsulated component logic (React, Ember, Angular, etc. If you want to do something relatively simple, sometimes it is more difficult to put these plug-ins into these components.

For example, if I use a jQuery-dependent project, but will build my own module in React, then I will use the basic module or pilot module (just because the component is written so that jQuery can be inserted into the React component by introducing it ).

8. care about your front-end code

Finally, the most important thing I suggest you do is to care about your front-end code, master the code, and constantly improve the Code (and constantly improve yourself !).

Between an application that requires long-term maintenance and a project that is hard to get started and always has problems, I believe that continuous code improvement is one of the most important factors.

These eight skills are used to write CSS. You can not only save your time, but also save the time for developers who will take over your code in the future.

What advice do you take to streamline your CSS code? Please comment below to let me know your choice.

I think this article is helpful to you? Please share it with more people

Follow the "front-end overview" to improve front-end skills