CSS optimization usually includes two aspects:Format CSS and streamline CSS.
The method to streamline CSS is to merge elements with the same attributes, but this reducesCodeThe readability of the Code makes it very difficult to maintain the code in the later stage. If you do not pay attention to it, an error will occur.
Formatting CSS is generally the choice of multi-line mode or single-line mode. For example, I personally cannot accept the multi-line mode.
The following are some online CSS optimization tools that allow you to easily optimize CSS files.
1. Online CSS optimizer/online CSS Optimization
This online tool is used to streamline and compress the file size of the style sheet. The optimized code is completely confusing. It supports URL input, file submission, and direct input compression.
2. CSS compressor/CSS Compression
This tool has very detailed compression options, including basic mode and advanced mode.
In basic mode, you can select the compression mode: mild, standard, and height. The file after compression in the highest mode is the least, but the readability is also the lowest. Even problems may occur after compression, and so on. You can also select the CSS annotation code processing: Do not process comments, clear all comments or limit the number of comments.
In advanced mode, you can also select and process white spaces, tabs, and new lines.
3. cleancss/CSS formatting and optimization tools
An online CSS optimization tool based on csstidy can format CSS code or optimize CSS to reduce the size of CSS files, including very detailed options. For example, sorting selector and attribute, case-sensitivity conversion, and so on.
4. CSS analyzer/CSS Validity Analysis Tool
Check the validity of the style sheet, verify that the style sheet complies with W3C standards, and conduct Color comparison tests and ensure the unit of size (W3C guideline 3.4We recommend that you use relative rather than absolute units. Although PX is relative units, the final font size depends on the output media. Therefore, we recommend that you use percentages and Em .)
5. Format CSS online/online CSS formatting Tool
This is an online tool dedicated to formatting CSS style sheet files. It makes no sense to use the "multirow mode", "single row mode", or other modes, it is better for everyone to do it in their own mode, and use tools to format it into their favorite mode during collaboration.
6. tabifier
A simple formatting tool that adds code indentation to make the code more readable.
7. Pretty printer
A multi-purpose code optimization tool that provides multiple options. In addition to CSS, it also supports PHP, Java, C ++, C, Perl, JavaScript, and other languages.
8. styleneat
Simple and Easy-to-use CSS formatting tool. Although there are not many options, it is quite practical. It supports direct input, file upload, and URL input.
Finally, some personal suggestions: use online tools for formatting, but do not use online tools for compression. It is best to manually merge some elements and attributes.
Reproduced from 8 online CSS optimization tools/CSS organization and compression | Palan Image
CSS optimization usually includes two aspects:Format CSS and streamline CSS.
The method of streamlining CSS is to merge elements with the same attributes, but this reduces the readability of the code and makes it difficult to maintain the code in the later stage. If you do not pay attention to it, the error will occur.
Formatting CSS is generally the choice of multi-line mode or single-line mode. For example, I personally cannot accept the multi-line mode.
The following are some online CSS optimization tools that allow you to easily optimize CSS files.
1. Online CSS optimizer/online CSS Optimization
This online tool is used to streamline and compress the file size of the style sheet. The optimized code is completely confusing. It supports URL input, file submission, and direct input compression.
2. CSS compressor/CSS Compression
This tool has very detailed compression options, including basic mode and advanced mode.
In basic mode, you can select the compression mode: mild, standard, and height. The file after compression in the highest mode is the least, but the readability is also the lowest. Even problems may occur after compression, and so on. You can also select the CSS annotation code processing: Do not process comments, clear all comments or limit the number of comments.
In advanced mode, you can also select and process white spaces, tabs, and new lines.
3. cleancss/CSS formatting and optimization tools
An online CSS optimization tool based on csstidy can format CSS code or optimize CSS to reduce the size of CSS files, including very detailed options. For example, sorting selector and attribute, case-sensitivity conversion, and so on.
4. CSS analyzer/CSS Validity Analysis Tool
Check the validity of the style sheet, verify that the style sheet complies with W3C standards, and conduct Color comparison tests and ensure the unit of size (W3C guideline 3.4We recommend that you use relative rather than absolute units. Although PX is relative units, the final font size depends on the output media. Therefore, we recommend that you use percentages and Em .)
5. Format CSS online/online CSS formatting Tool
This is an online tool dedicated to formatting CSS style sheet files. It makes no sense to use the "multirow mode", "single row mode", or other modes, it is better for everyone to do it in their own mode, and use tools to format it into their favorite mode during collaboration.
6. tabifier
A simple formatting tool that adds code indentation to make the code more readable.
7. Pretty printer
A multi-purpose code optimization tool that provides multiple options. In addition to CSS, it also supports PHP, Java, C ++, C, Perl, JavaScript, and other languages.
8. styleneat
Simple and Easy-to-use CSS formatting tool. Although there are not many options, it is quite practical. It supports direct input, file upload, and URL input.
Finally, some personal suggestions: use online tools for formatting, but do not use online tools for compression. It is best to manually merge some elements and attributes.
Reproduced from 8 online CSS optimization tools/CSS organization and compression | Palan Image