5 Ways to Improve Your CSS

Almost anyone can write CSS code, nowadays any program will do it for you. But will it be good CSS? Here are five tips for improving your CSS.

1. Reset

Be sure to use a factory reset in one form or another. You can use ready-made solutions ( Eric Meyer , YUI ), or come up with your own, choose what you like best.

This may be the usual removal of margins and indents for all elements: The ready-made solutions mentioned above are certainly quite impressive, but it seems to me that they are a bit excessive. I just imagine how you reset all the settings for all elements, and then reinstall them. Therefore, if you decide to use one of the proposed options, do not completely copy the entire CSS-file, it is better to change it so that it meets the requirements of your project. And please do not do the following:

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }





* { margin: 0; padding: 0; }

This technique increases the processing time, and when removing the padding, some elements will not display correctly (for example, a radio button). Form elements, when deleting all the settings, can behave unpredictably, so it is better not to apply a reset to them.

2. Alphabetical order

In which of the examples do you think you can find the margin-right property faster?

Example 1

div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}

Example 2

div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}

Agree that in the second example, the property is faster. By arranging the properties in alphabetical order, you will create this sequence that will help you reduce the time it takes to find a specialized property.

I know a lot of people who have CSS properties in different ways, but in our company we agreed to arrange all the properties in alphabetical order. This helps when you have to work with code written by other people. I am annoyed every time I have to work with a css file in which properties are not alphabetically arranged.

3. Grouping

You must organize your CSS file so that the objects you are looking for and the properties associated with them are located next to each other, using comments is also effective. Here's an example of my grouping method: Using comments and grouping similar elements helps to quickly find the necessary objects and their properties.

/*****Reset*****/
Remove margin and padding from elements

/*****Basic Elements*****/
Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc.

/*****Generic Classes*****/
Define styles for simple things like floating to the sides, removing a bottom margin on elements, etc
Yes, these may not be as semantic as we would all like, but they are necessary for coding efficiently

/*****Basic Layout*****/
Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site

/*****Header*****/
Define all elements in the header

/*****Content*****/
Define all elements in the content area

/*****Footer*****/
Define all elements in the footer

/*****Etc*****/
Continue to define the other sections one by one

4. The sequence

Whatever method of writing code you choose, stick to it. I'm already sick of CSS debates about choosing the right way to write code, 1-line versus multi-line. Everyone has the right to their own opinion, so choose the one that is most convenient for you and use it in all CSS files.

Personally, I use a combination of both methods. If the selector contains more than three properties, I break it into several lines.

div#header { float: left; width: 100%; }
div#header div.column {
border-right: 1px solid #ccc;
float: right;
margin-right: 50px;
padding: 10px;
width: 300px;
}
div#header h1 { float: left; position: relative; width: 250px; }

5. Start correctly

Do not start writing css style until your page layout is complete.
Before creating a CSS file, I write all the page layout from the opening body tag to the closing one. I do not add extra divs, id and classes, only some characteristic blocks, such as header, content, and footer.

Use the inheritance of CSS selectors to arrange children, do not automatically add classes and id to the elements. Remember the main thing: CSS costs nothing without a well-formatted document.

This is not a complete list of some tips that help me write better code. What tips do you use?