There are many different styles of writing code for one do not like the padding, while others use capital letters, others use multiple elements on one line. But they all want to achieve one single goal: to create a good and understandable code . However one sees it in his own way and comes to this in their own ways. Although there are some experiences with the only true methods identified experimentally. Today, without considering my own coding style, I'm still in the way of improvement, let's discuss some tips for writing better code, CSS and understandable . All objections and amendments, as always, made in the comments. See you there ;)
Add comments.
Comments, perhaps the most hated part of writing code. But the good comment? Commenting significantly improves both the perception and understanding of the code and work with the code itself. For comments can be easily and efficiently determine the appropriate blocks CSS, and sometimes to understand why certain established rules. Sometimes it is very difficult to find the right from the point of a solid mass of lines with code. Every time have to spend a lot of time flipping through and viewing hundreds of rows. But if your code is divided into logical blocks and each block is well commented, then find the right line in the block is very fast. Instead of searching through many lines of code, your search is narrowed to the search of a few comments and a few lines of code next to the comment. This greatly simplifies the search and saves a lot of time. But the commentary is not only easier to find. It is well structures and all of the code. Your code will look like an easy and understandable. Also, comments say about the professionalism of the developer who has developed a habit to put the right, and sometimes the key comments.
Use paragraphs.
The division of code into paragraphs is another way to make your code very structured and easy to find the right rules. Even a simple division of the paragraphs of classes and IDs, is much easier to read code and simplifies orientation in it. It would seem very little things, but in fact they are quite capable to improve your code and make it easier to work with them in the development and modification in the future.
Use shorthand code.
Abbreviated code is able to record some of the CSS rules in summary form. I think this is one of the easiest things in the CSS. For example, instead of rules for padding padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; can be written much shorterpadding: 5px 5px 5px 5px; . A significant difference, both in writing and in perception, is not it?However, despite this opportunity, there are many papers CSS which really is not a short code.
Imagine that you have 350 lines of CSS code, where each class or ID consists of five rules and you are using a short code example for the rule margin . Now try to place a short code, write a detailed code of rules for margin : margin-top, margin-right, margin-bottom, margin-left . It turns out that each class or ID to receive three additional lines. So we add 350 to 500 lines of code.Poluchetsya that we just added the extra 150 lines of unnecessary code, impairing navigation of dokumeta and complicating the work of the rules.
So where you see fit, use a short account of the rules that regulate them, but at the same time increase the speed.
Use one rule per line.
One of the most annoying things that can often be seen in the code of CSS, a record number of rules in one line. I think it is not only ugly, but effective. The effectiveness of the code begins with the organization, as the organization accelerates and facilitates the coding of orientation in the code.All this eventually leads to productivity. Without creating chaos and having some CSS rules on separate lines, you are much easier on yourself. You'll see it in the long run, when you need to make changes to a document with the styles.
Highlight hacks in a separate file.
Always separate the hacks styles for your beloved Internet Explorer from the main document with the styles. Let the CSS in the main document you still have all the rules for your pages to be displayed in normal browsers. Create separate documents for styles with CSS hacks for different versions of Internet Explorer. If you mix khaki with the main document, you will not only complicate the document itself, but doing it is not valid. Because you can not put the code in the same document for different versions of browsers. So simplify the most styles, separate them into individual documents. So you get a well-organized structure.
Let's take a meaningful name CSS classes and ID
Quite often, when time is running out, and to direct the beauty of a particularly busy, the developer creates a class and calls him the first name that comes to mind. Basically, it is clear to him alone cuts, which were later and even he forgets. And the problem is just that. Over time, when it comes to the need to change something in style, we can not understand what makes a particular class. To do this, have to open the HTML and find in it the name of the class and try to understand what he was doing. Instead, if the class has a name with meaning, it is very easy editing of CSS.
Spend a little time, think about and name the class as close as possible to its functional purpose. For example, if you create a class that defines the style for the bar with the widgets in the basement, do not call it a Widget bar , if there is a chance that you still have bars on the widgets. So you will not be able to avoid ambiguity. Pick up the name, just describe the destination of styles.
Remove unused CSS classes and ID immediately.
Often, making changes to the project, we are creating new classes and IDs, replacing their old, and already unnecessary. Sometimes you just do not use what the classes and IDs. But instead of immediately remove unused elements, for some reason we keep them. Gradually, the document begins with the styles contain many unused classes and IDs, thus making it difficult to work with the document. Beginning to happen confusion among used and unused items. Therefore, you should make it a rule immediately remove unwanted elements, if they are not used on the pages. If you feel that some of them you may need in the future, move them into a single archive file. Do not store them in the main document.
Use the alphabetical order.
There is one positive point, which is easier for you to work with the code and further modification.This is the alphabetical order in the arrangement of classes and IDs. And most importantly, that it really works. And even within the rules of the classes and IDs is better to have too, in alphabetical order. So your rules are well organized, and you'll easily find the right rule quickly focusing on the alphabet. You can verify this claim on any list, and if the list is ordered alphabetically, it is much easier to read.
Locate the selectors together
Another simple way to organize your documents with styles, a combination of different selectors, if they have similar definitions or rules of style. For example, if you have a similar style definitions for tags li and ol , then you can combine them together into one definition. So you will save space and achieve a more compact notation, which is always more comfortable.
Divide the complex CSS document to a few simple
If you are working on a very large project and are trying to edit a document with styles, getting tangled in endless lines of CSS, then I would advise you just divide it into smaller and simpler. First try to logically divide your document with styles into several groups. Then divide the document into multiple files and place them in your group.
This will greatly facilitate further change. Instead of looking in one big file, certain rules, you can immediately open the file and work with him already. You will save much time and simplify work with styles.
For example, you can select styles that are responsible for typography in one file, and styles are responsible for elements of the format to another. And now, if you need to change or add typography styles, you can easily and quickly open the file without changing the rest.
However, for small projects splitting the files may complicate the job with style. Only when working with large document CSS becomes difficult, and only need to apply raezdlenie into smaller files.
Add comments.
Comments, perhaps the most hated part of writing code. But the good comment? Commenting significantly improves both the perception and understanding of the code and work with the code itself. For comments can be easily and efficiently determine the appropriate blocks CSS, and sometimes to understand why certain established rules. Sometimes it is very difficult to find the right from the point of a solid mass of lines with code. Every time have to spend a lot of time flipping through and viewing hundreds of rows. But if your code is divided into logical blocks and each block is well commented, then find the right line in the block is very fast. Instead of searching through many lines of code, your search is narrowed to the search of a few comments and a few lines of code next to the comment. This greatly simplifies the search and saves a lot of time. But the commentary is not only easier to find. It is well structures and all of the code. Your code will look like an easy and understandable. Also, comments say about the professionalism of the developer who has developed a habit to put the right, and sometimes the key comments.
Use paragraphs.
The division of code into paragraphs is another way to make your code very structured and easy to find the right rules. Even a simple division of the paragraphs of classes and IDs, is much easier to read code and simplifies orientation in it. It would seem very little things, but in fact they are quite capable to improve your code and make it easier to work with them in the development and modification in the future.
Use shorthand code.
Abbreviated code is able to record some of the CSS rules in summary form. I think this is one of the easiest things in the CSS. For example, instead of rules for padding padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; can be written much shorterpadding: 5px 5px 5px 5px; . A significant difference, both in writing and in perception, is not it?However, despite this opportunity, there are many papers CSS which really is not a short code.
Imagine that you have 350 lines of CSS code, where each class or ID consists of five rules and you are using a short code example for the rule margin . Now try to place a short code, write a detailed code of rules for margin : margin-top, margin-right, margin-bottom, margin-left . It turns out that each class or ID to receive three additional lines. So we add 350 to 500 lines of code.Poluchetsya that we just added the extra 150 lines of unnecessary code, impairing navigation of dokumeta and complicating the work of the rules.
So where you see fit, use a short account of the rules that regulate them, but at the same time increase the speed.
Use one rule per line.
One of the most annoying things that can often be seen in the code of CSS, a record number of rules in one line. I think it is not only ugly, but effective. The effectiveness of the code begins with the organization, as the organization accelerates and facilitates the coding of orientation in the code.All this eventually leads to productivity. Without creating chaos and having some CSS rules on separate lines, you are much easier on yourself. You'll see it in the long run, when you need to make changes to a document with the styles.
Highlight hacks in a separate file.
Always separate the hacks styles for your beloved Internet Explorer from the main document with the styles. Let the CSS in the main document you still have all the rules for your pages to be displayed in normal browsers. Create separate documents for styles with CSS hacks for different versions of Internet Explorer. If you mix khaki with the main document, you will not only complicate the document itself, but doing it is not valid. Because you can not put the code in the same document for different versions of browsers. So simplify the most styles, separate them into individual documents. So you get a well-organized structure.
Let's take a meaningful name CSS classes and ID
Quite often, when time is running out, and to direct the beauty of a particularly busy, the developer creates a class and calls him the first name that comes to mind. Basically, it is clear to him alone cuts, which were later and even he forgets. And the problem is just that. Over time, when it comes to the need to change something in style, we can not understand what makes a particular class. To do this, have to open the HTML and find in it the name of the class and try to understand what he was doing. Instead, if the class has a name with meaning, it is very easy editing of CSS.
Spend a little time, think about and name the class as close as possible to its functional purpose. For example, if you create a class that defines the style for the bar with the widgets in the basement, do not call it a Widget bar , if there is a chance that you still have bars on the widgets. So you will not be able to avoid ambiguity. Pick up the name, just describe the destination of styles.
Remove unused CSS classes and ID immediately.
Often, making changes to the project, we are creating new classes and IDs, replacing their old, and already unnecessary. Sometimes you just do not use what the classes and IDs. But instead of immediately remove unused elements, for some reason we keep them. Gradually, the document begins with the styles contain many unused classes and IDs, thus making it difficult to work with the document. Beginning to happen confusion among used and unused items. Therefore, you should make it a rule immediately remove unwanted elements, if they are not used on the pages. If you feel that some of them you may need in the future, move them into a single archive file. Do not store them in the main document.
Use the alphabetical order.
There is one positive point, which is easier for you to work with the code and further modification.This is the alphabetical order in the arrangement of classes and IDs. And most importantly, that it really works. And even within the rules of the classes and IDs is better to have too, in alphabetical order. So your rules are well organized, and you'll easily find the right rule quickly focusing on the alphabet. You can verify this claim on any list, and if the list is ordered alphabetically, it is much easier to read.
Locate the selectors together
Another simple way to organize your documents with styles, a combination of different selectors, if they have similar definitions or rules of style. For example, if you have a similar style definitions for tags li and ol , then you can combine them together into one definition. So you will save space and achieve a more compact notation, which is always more comfortable.
Divide the complex CSS document to a few simple
If you are working on a very large project and are trying to edit a document with styles, getting tangled in endless lines of CSS, then I would advise you just divide it into smaller and simpler. First try to logically divide your document with styles into several groups. Then divide the document into multiple files and place them in your group.
This will greatly facilitate further change. Instead of looking in one big file, certain rules, you can immediately open the file and work with him already. You will save much time and simplify work with styles.
For example, you can select styles that are responsible for typography in one file, and styles are responsible for elements of the format to another. And now, if you need to change or add typography styles, you can easily and quickly open the file without changing the rest.
However, for small projects splitting the files may complicate the job with style. Only when working with large document CSS becomes difficult, and only need to apply raezdlenie into smaller files.
Conclusion.
I hope these tips will be useful for you, and you will be able to write better code and intuitive CSS.What do you think? Are you using the techniques described above to write CSS? What advice do you have? What do you prefer? Please write in the comments!
I hope these tips will be useful for you, and you will be able to write better code and intuitive CSS.What do you think? Are you using the techniques described above to write CSS? What advice do you have? What do you prefer? Please write in the comments!
No comments:
Post a Comment