Designing a beautiful style sheet is an art.

Designing a beautiful style sheet is not a dark art (if you look at this art from the artist's perspective, it will show more about the desire for a happy life and the pursuit of a perfect life. PS: This is the most reliable explanation found by the translator .). it requires sustained exercises and full commitment, but there are some tips to help you quickly improve and make you a CSS master.
In the next article, I will demonstrate some technologies used in style sheets that are designed to be readable, maintainability, and easy to debug.

Naming Conventions for objects

I follow a simple naming convention in all projects. this is a simple and effective way to maintain CSS files. there are many designers who will give the style sheet some fuzzy names, such as main.css and style.css. I think the file name can be more detailed. In this way, you can quickly know what each file is.
This is the website file structure of one of my customers.

CSS naming convention

Style_all.css
Contains resetting and some CSS code for various browsers and operating systems. It is also recommended to use the content generated by the WYSIWYG editor in the content management system. Format in this file, such as the link color and element style.

Style_screen.css
This is the main file that contains the overall style. We will learn more about it later.

Style_screen_IE7.css
This is a style sheet specially prepared for IE7. For most projects I have done, I do not need to prepare a style sheet for IE7. Here I just want you to better understand the naming conventions I mentioned.

Style_screen_It-IE7.css
This is a style sheet compatible with all browsers earlier than IE7.

Style_print.css
This style sheet is used for printing when you remove all the images and only display nice and neat text.

This naming convention is very complicated. For example, if you want to prepare a style sheet for IE6, you can name it style_screen_ie6.css. If it is for a portable device, you can name it style_handheld.css.
The commercial content management system I have developed has the function of checking style sheet files and automatically using appropriate conditional annotations. In the future, I may release that part of the code.

Modular

Now let's take a closer look at the main style table style_screen.Css. This file will become very large in the future, so it is very important to divide the style into a part.
Which parts will be declared at the beginning of the style sheet.

Divide CSS files into many parts

Tip: press ctrl + F (or Mac + F) and input = FORMS to directly jump to the form style section. I found this particularly saves time.
Positioning

Define the layout structure and locate basic elements. divide the page into the header, content, sidebar, and footer. when developing a new page, the first thing to do is to build the overall framework, instead of considering the details first.

First define the basic style structure
Typographical

Typographical layout includes defining fonts for Global and All common elements. Defining fonts for elements that control content, such as page headers, paragraph styles, lists, and references.

Divide the font definition from the layout style
Layout Design

Now that positioning and formatting have been solved, you need to focus on page design.
If this part is too long, you can divide it into smaller parts in the future. Appropriate indentation is helpful to maintain the style sheet.

Normally, I will separate the form and content management system code and separate the style of my project into parts as needed.
Once you need to debug or modify the previous project, the advantages of modular code are obvious. It is much easier to browse the code and find the required code.

Indentation and hierarchy

At the highest level, the element is indented at least. The next level of the element is indented once. The next level is indented twice, and so on.
Indent appropriately and maintain the hierarchy of parent-child level

This is not only beautiful but also readable, but also easier to lock. A large number of spaces make the file larger, but you can always compress the CSS file before publishing.
For example, a problem occurs in the search box on the page. the code must be written under the parent sidebar style in the layout section. if you have proper modularization and indentation, you will find out how easy it is to find the code you need.

Attribute classification, instead of sorting in alphabetical order. Some designers think that it is more effective to sort CSS attributes in alphabetical order, because it is easy to maintain. but I do not agree. I think it is more effective to sort the types of CSS attributes.

. Selector {
Font-size: 12px;
Line-height: 15px;
Text-transform: uppercase;

Padding: 10px;
Margin: 5px;
 
Background: #000;
Border: 1px solid #222;
}

In the preceding example, attributes are divided according to the following types: control content, control spacing, and visualization (background and edge) of block-level elements.
If they are arranged in alphabetical order, they are as follows:

. Selector {
Background: #000;
Border: 1px solid #222;
Font-size: 12px;
Line-height: 15px;
Margin: 5px;
Padding: 10px;
Text-transform: uppercase;
}

Obviously, the readability of CSS is greatly reduced. I usually write Layout-related attributes first, followed by content attributes, followed by spacing and other attributes.

Summary

In fact, these are not complicated. these simple things can help front-end developers keep their ideas clear at any time. Beautiful style sheets are the first step of Zen-Italian development.

If you have good suggestions or debugging methods, share them with you.