30个在写css需要注意的地方
2010-10-09 阅读 136
Cascading Style Sheets (CSS) is a language which is widely used in the web development as it facilitates in creation of quality web pages.
层叠样式表（Css），是一种广泛使用在web开发上的语言，它便于建立高品质的web页面。
Using CSS rather than tables for layout saves user bandwidth while enhancing the underlying semantics, accessibility and reach.
使用css而不是table布局，将会为用户节省带宽，并可增强underlying semantics, accessibility and reach.
CSS has continued to play an important role in web designing and its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document.
However, the ease of using this language depends upon the nature of project which you are working on.
It is necessary to understand the basic fundamentals of this language, no matter you opt this for a bigger project or just to redesign your blog.
This article will introduce you with some of the tricks, techniques and methods to write CSS so that it can provide you with the best outcome.
Note: All the necessary points mentioned below are presented before you assuming that you have an intermediate knowledge about the CSS coding and should consider these while writing CSS. However, there are still lots of minor details which are not included in this article but the necessary ones are surely going to help you all your way.
01. Start With A Blank Page 从一个空白页开始
It is always good to start with a blank page and include your header, footer, navigator and a sample of content in that page and then start adding your HTML markup followed by adding your CSS. This method works much better and without any complexities.
一个好的开始，总是从一个包含了页头、页尾和简单内容部分的空白页开始的。然后先添加css代码，然后添加相应的html代码。这个方法工作的更好，并且复杂性很低。
02. CSS Reset css重设
A repetitive writing of specific CSS codes can become little tiring and boring as well therefore instead of using the global Reset, use CSS Reset style sheet which has been launched by the industry leaders so that you can get all your browsers to display all the items properly.
03. Table Of Contents
Using a table of content from the beginning will enable you to view your CSS file and find where the specific items in your code are before they even have to scroll.
04. Containing Floats
You need to keep in mind that the content should be designed to stay within the container. Something which is going out of the container, would be clipped off. If you are shifting things using negative margins outside the container, that will also get clipped.
05. Go For CSS Inheritance
Suppose you have provided multiple child elements of a parent element and that too using same style on the web page then it will be better for you to define them for their parent element only and allow CSS Inheritanceto perform its task.
06. Collect All CSS Classes
These are generally used for debugging but make sure that these are not used in the release version as you can use multiple class names, make use of them while debugging your mark up.
07. Class And ID Names
It will be better for you if you keep the naming structure of your CSS classes and IDs simple as it will allow you later to edit your codes and make necessary amendments.
08. Organize Your CSS Alphabetically
Organizing the properties of your CSS style coding alphabetically helps you to search for specific properties at great ease. Always try to organize your CSS classes, IDs and rules in an alphabetical order. It helps your work to manipulate easily.
09. Combine Multiple Selectors
If your CSS selectors have a common style definition then combining them into a single one will be of more advantage for you.
10. Be Careful While Adding CSS Properties
Do not try to add as many CSS properties as possible, it spoils your coding. Use properties only if they are suitable according to the layout.
11. Avoid Unnecessary Selectors
The definitions while writing CSS should be confined up to some extent and be used only if they are required, also try to get the overall design so that the view can be loaded quickly.
12. A Clear Format For Coding
Try to be very precise while coding CSS. Mention one idea for one line and multiple if there are many. This will enable you to recode CSS on a much easier basis.
13. Use Short Hand CSS
Using shorthand CSS provides you with a shorter way of writing CSS codes which automatically makes the codes tidy and easy to interpret.
14. Case Sensitive
As you might know that there is a difference between the upper case and lower case in CSS. Here it is important to understand that every definition’s name must be identical to the tag written in order to work properly.
15. Understand The Overflow
By understanding that Internet Explorer doesn’t handle the overflow effectively, it will be easier for you to understand the correct condition when the floats start dropping.
16. Avoid Redundancy
Using extra and duplicate declarations may increase the number of duplication in your CSS file.
17. Browser Support
Supporting a latest browser saves a lot of effort and time. While supporting the most recent browsers try to end up by using least hacks.
18. Use Elastic Layouts
As Elastic layouts have both fixed and fluid layout design advantages which is of great advantage as your layout will not break whenever the user resize their fonts/screen resolutions.
19. Import CSS Style
This another option available to you of importing CSS files, this will help you to write a single sentence on the header of the HTML file and leave the rest of the master file.
20. Add Proper Comments
Adding proper comments helps you to separate different sections of your CSS codes.
21. Define Connectivity For Links
The attribute is supposed to indicate a semantic link relationship from one resource to another and make use of the attribute selector for space separated lists of values.
22. Use External Style Sheets
This is always beneficial to separate your web content from presentation. Try to place all your CSS codes into external style sheets and use the link to reference style sheets within a page.
23. Try To Avoid Quotes In URL
There is a path within the bracket itself and it works regardless of any quote provided to it or not. Therefore, we should avoid to put any quote in the URL bracket.
24. Split Them If The Files Are Multiple
If you are working on a larger project, it is advisable to you that make your CSS separate into multiple groups in multiple files. It allows you to locate CSS code blocks instead of searching one main file with thousands of line.
25. Add Proper Comments
Using the right comment at right place is very important. Be careful while writing any comment in between your coding.
26. Try To Be Consistent
As there are so many debates attached to writing CSS therefore, it is suggested to stick with one particular format which you have started following. Start to develop your own sub-language of CSS which allows you to quickly name the things.
27. Select Suitable DOCTYPE
This is an important factor to consider while writing CSS as it decides whether or not your Markup and CSS will validate or not.
28. Use Firebug
Firebug is a tool provided by Firefox an Chrome which helps you to modify and inspect and edit your CSS in real time. So if you haven’t downloaded it yet, it advisable to get it as soon as possible.
29. Separate out Hacks
It is part of our routine activities to write conditional elements and hacks. However, you need to make it separate out from style.css files. Because if it gets mixed with coding part, then it will cause clutters to happen in between and hence could create problems in validation of the coding.
30. Experience Matters
If you got anything more useful which we might have missed, please feel free to share it via comments.
css
更新于 2023年03月28日
