5 ways to improve your CSS

Practically 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 the reset settings 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 can be the usual deletion of fields and indents, for all elements:
')
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; }

The above solutions 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 suggested options, you should not completely copy the entire CSS file, better modify it so that it meets the requirements of your project as much as possible.

And please do not do the following:

* { margin: 0; padding: 0; }

This technique increases the processing time, and when you remove padding, some elements will not be displayed correctly (for example, a radio button). Form elements, when deleting all 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 the margin-right property can be found more quickly?

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. Arranging properties in alphabetical order will create this sequence, which will help you reduce the time spent searching for a specialized property.

I know a lot of people who have CSS properties in different ways, but in our company we agreed to place all properties in alphabetical order. It 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 the properties are not arranged alphabetically.

3. Grouping

You must organize your CSS file so that the objects you are looking for and the properties associated with them are located side by side, and commenting is also effective. For example, my grouping method:

/*****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

Using comments and grouping similar elements helps to quickly find the necessary objects and their properties.

4. Sequence

Whatever method of writing code you choose, stick to it. I'm already sick of the 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. If the selector contains more than three properties, I split 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 right

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

Use inheritance CSS-selectors, for the location of children, do not automatically add classes and id to the elements. Remember the point: 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?