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

This article mainly explains "what are the excellent ways to improve CSS". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn what are the excellent ways to improve CSS.

1. Do you really need a framework?

First, determine if you really need to use the CSS framework. Today, there are many lightweight and robust alternative frameworks. In general, you will not use every selector in the framework, so your package will contain invalid code.

If you only use styles on buttons, outsource them to your own CSS file and forget about the rest. In addition, you can use code coverage in DevTools to identify unused CSS rules.

To open it, search for Coverage in the tools panel, which you can open by clicking Ctrl + Shift + P.

When open, click the reload icon to start recording. All content shown in red is not used.

As you can see, in the above example, it says that 98% of the CSS is not applied. Note that this is not really the case-some CSS styles are applied after the user interacts with the site. The style of the mobile device is also marked as unused bytes. Therefore, before deleting everything, make sure that it has not been used anywhere.

two。 Preferred use of CSS methodology

Consider using the CSS methodology for your project. CSS methodologies are used to create consistency in your CSS files, and they help scale and maintain your project. Here are some popular CSS methodologies I can recommend.

/ BEM /

BEM (blocks, elements, modifiers) is one of the more popular CSS methodologies. It is a collection of naming conventions that can be used to easily make reusable components. The naming convention follows the following pattern:

.block {...} .block _ _ element {...} .block-- modifier {...}

Block-- block, which represents a component. They are independent entities and have meaning to themselves.

Block__element-- these are part of .block. They have no independent meaning and must be bound to a block.

Block--modifier-- these are used as flags on blocks or elements. We can use them to change the appearance, behavior, or state of an element. For example, to use hidden flags, we can say .block-- hidden.

/ ITCSS /

The abbreviation for Inverted Triangle CSS, which means "inverted triangle", helps you better organize your files by introducing different layers into different features. The deeper it is, the more specific it is.

/ OOCSS /

Object-oriented CSS, or OOCSS, has two main principles.

1. Separation of structure and epidermis

This means that you have to define visual effects separately from the structural code. What does it mean?

/ * instead of * / .box {width: 250px; height: 250px; padding: 10px; border: 1px solid # CCC; box-shadow: 1px 2px 5px # CCC; border-radius: 5px;} / * so * / .box {width: 250px; height: 250px; padding: 10px;} .elevated {border: 1px solid # CCC; box-shadow: 1px 2px 5px # CCC; border-radius: 5px;}

two。 Separate containers and contents

This means that you don't want any element to depend on its position. The same elements should look the same no matter where they are on the page.

/ * instead of * / .main span.breadcumb {.} / * so * / .breadcrumb {.} 3. Set up preprocessor

Setting up a preprocessor can benefit you a lot. A preprocessor is a tool that allows you to use advanced features that don't exist in CSS, which could be loop variables or even functions and the like.

There are many preprocessors, and perhaps the three most famous are Sass,Less and Stylus. I recommend using Sass because its community is very prosperous and a large number of documents can be found on the Internet.

So, how can the preprocessor help you?

/ better organize your style /

They have the ability to decompose your files into smaller reusable files that can be imported into each other or later into your application separately.

/ / Import different modules into a SCSS file @ import 'settings'; @ import' tools'; @ import 'generic'; @ import' elements'; @ import 'objects'; @ import' components'; @ import 'trumps'

/ nest your selector /

Another good way to enhance readability is the nested selector, which is a simple but powerful feature that CSS lacks.

.wrapper {.sidebar {& .collapsed {display: none;} .list {.list-item {... & .list-item--active {...}

The hierarchical structure makes the relationship between different elements more intuitive.

/ automatically prefix your rules /

There are some non-standard or experimental prefixes in CSS for which different browsers use different prefixes, such as:

Webkit-: is suitable for WebKit-based browsers, such as Chrome,Safari or newer versions of Opera.

Moz-:Firefox

Omuri: an older version of Opera

Ms-:IE and Edge

In order to support all major browsers, we have to define certain properties multiple times.

Background:-moz-linear-gradient (top, rgba), 50% rgba, 51% rgba, 51% rgba, 100% rgba; background:-webkit-linear-gradient (top, rgba) 0%, rgba 50%, rgba 51%, rgba (125 top, rgba) 50%, rgba (31) 51%, rgba (125) Background: linear-gradient (to bottom, rgba) 0%, rgba (41grad 137) 216Power1) 50%, rgba (32pce124) 51pc1), rgba (125pj185pd1) 100%); filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);}

The preprocessor can help us solve this problem by using mixed functions, which can be used instead of hard-coded values.

@ mixin gradient () {background: rgb (30Power87153); background:-moz-linear-gradient (top, rgba (307pr 153) 0% background RGBA (41, 137, 216) 50% Magi RGBA (32, 124, 202) 51%, rgba (125, 185, 232) 100%); background:-webkit-linear-gradient (top, rgba (30, 87)) 0% top, rgba (30, 87)) 50%,) 50%, and rgba (125, 185and 232) 50%) Background: linear-gradient (to bottom, rgba) 0% background (41 include gradient 137) 50% LGBA (32 124) 51%, rgba (125 185) 232) 100%; filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);} @ include gradient ();}

You don't have to write the same thing over and over again, but just include mixin when needed.

/ use post-processor /

A better choice is the post-processor. Once the CSS is generated by the preprocessor, the post-processor can run other optimization steps. One of the more popular post-processors is PostCSS.

You can use PostCSS to automatically prefix CSS rules, so you don't have to worry about missing major browsers.

Another great post-processor is autoprefixer. With autoprefixer, you can do all the work without writing any vendor prefixes in the CSS file when you want to support the latest four versions!

Const autoprefixer = require ('autoprefixer') ({browsers: [' last 4 versions', 'not ie < 9']})

/ use configuration for consistent design /

In addition to mixins, you can also choose to use variables. When used with the sintering machine, you can enforce the design rules. In conjunction with linter, you can enforce design rules.

/ / Font definitions $font-12: 12px; $font-21: 21px; / / Color definitions $color-white: # FAFAFA; $color-black: # 212121 Use tags instead of CSS

Now, let's move on to the actual CSS. This is often overlooked, and in general, you can reduce the size of the CSS package by simply using the correct HTML element. Suppose your title contains the following rules:

Span.heading {display: block; font-size: 1.2em; margin-top: 1em; margin-bottom: 1em;}

You are using a span element as the title, and you can override the default display, spacing, or font style. This situation can be avoided by using h _ 2meme h _ 3 or h _ 4. By default, they have styles that you want to implement with other elements, and you can immediately get rid of four unnecessary rules and be more semantic.

5. Use short attributes

To further reduce the number of rules, always try to use abbreviated properties. For the above example, we can say:

.1em {margin: 0;}

The same is true for other properties, such as padding,border or background.

6. Reduce redundancy

This is closely related to the previous point. Sometimes it is difficult to find redundancy, especially if the repetition rules do not follow the same order in both selectors. But if your class differs on only one or two rules, it's best to outsource those rules and use them as an additional class. Not like this.

.customers {width: 100%; height: 50px; background: yellow; border-radius: 5px;} .elevated-warning {width: 100%; height: 50px; font-size: 150%; background: yellow; box-shadow: 1px 2px 5px # CCC; border-radius: 5px;} ⚠️ {width: 100%; height: 50px; background: yellow; border-radius: 5px;}. Elevated-warning {width: 100%; height: 50px Font-size: 150%; background: yellow; box-shadow: 1px 2px 5px # CCC; border-radius: 5px;}

Try a similar approach:

Background {width: 100%; height: 50px; background: yellow; border-radius: 5px;} 1px 2px 5px-- elevated {font-size: 150%; box-shadow: 1px 2px 5px # CCC;} ⚠️. Percent {width: 100%; height: 50px; background: yellow; border-radius: 5px;} .percent-elevated {font-size: 150%; box-shadow: 1px 2px 5px # CCC;} 7. Avoid using complex selectors

There are two main problems with using complex selectors. First, the increased weight not only makes it harder to rewrite existing rules later, but also increases the time it takes for browsers to match selectors.

/ match selector /

When the browser tries to interpret the selector and determine which elements to match, they go from right to left. In terms of performance, this is faster than other methods. Let's take the following selector as an example.

.deeply .nested .selector span {...}

Your browser will start with span. It will match all the span tags and then go to the next one. It will filter out the span in the .selector, and so on.

/ understand selector /

Machines are not only difficult to analyze, but also difficult for human beings to understand. Take the following as an example:

[type= "checkbox"]: checked + [class$= "- confirmation"]:: after {...}

When do you think the above rules can be applied? This can be simplified by making a custom class and switching with JavaScript.

8. Do not delete the profile (Outline)

This is one of the most common mistakes developers make when writing CSS. Although you may think there is nothing wrong with deleting the highlight created by the outline, in fact, you are making the site inaccessible. The usual practice is to add this rule to your CSS as a reset.

: focus {outline: none;}

However, in this way, only keyboard navigation users will not know what they are following on your site.

If the default style is not good for your brand, create a custom profile, as long as you make sure there is some indication on the focus element.

9. Mobile priority

Always use mobility first when you have to handle media queries. The mobile device first approach means that you first start writing CSS for small screen devices and start building from there. This is also known as progressive enhancement.

This will ensure that you spend most of your time adding additional rules to meet the needs of large-screen devices, rather than rewriting existing CSS rules. This can reduce your final number of rules.

How can you tell if you are using Mobile first? If your media query uses min-width, then you are going the right way.

/ * for mobile priority media queries, all content above 600 pixels will get the following style * / @ media (min-width: 600px) {/ * your CSS rules * /} / * non-mobile priority media queries, and those below 600px will get the following styles. * / @ media (max-width: 600px) {/ * your CSS rules * /} 10. Compress

Finally, compress the bundle to reduce its size. By compressing and deleting comments and whitespace, your bundling software requires less bandwidth to get data.

If you haven't already, enable compression on the server side as well.

Another good way to further reduce the size of CSS and tags is to confuse class names.

To do this, you can select several options based on your project settings:

Webpack: for Webpack, you can use the css-loader module.

Gulp: for Gulp, you can use the gulp-minify-cssnames plug-in.

Create your own implementation: if you don't have a dedicated package for project setup, I'll provide a tutorial that shows you how to create your own implementation.

Thank you for your reading, the above is the content of "what are the excellent methods to improve CSS". After the study of this article, I believe you have a deeper understanding of what the excellent methods to improve CSS have, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.