10 tips for creating a CSS style sheet

If you want to be a CSS expert, it's not enough to recite a bunch of selectors, but also to improve the readability, efficiency, and maintainability of CSS stylesheets. Here, Jina Bolton will share her 10 tips on how to create a sexy CSS style sheet.

The main content of this article is: CSS code coding specification, teach you how to write neat beautiful sexy CSS code, how to clearly organize your style sheet files. Gossip less, go straight to the point

1. Do not use CSS style definitions in HTML files

I believe that for most designers with certain working experience, using an external style sheet to define CSS styles is a piece of work. But I still need to tell you this again here, because I see quite a lot of sites at the beginning, with very structured, well-organized code. But as time goes on, the internal definition and even the inline style begin to spread to every corner of the site. Maybe it's because the project cycle is tight, or just because we're a little lazy.

Imagine, when such bad habits were kept by us, after a while, if the boss wants to redesign the site's style without altering the content of the Web page, OH, you'll have to find the junk code that you've lost in every nook and cranny, and if the project happens to be very large, then I'm afraid only good luck, Or recommend you to find Huang.

Don't get yourself into such trouble, create clean code, and keep them clean all the time, so you can make your life a lot more enjoyable.

Note: Be careful with too many external style sheets, and if you create a new stylesheet every time you make a change, it won't do you any good. Too many stylesheets will make your future debugging and updating work more complicated, but I understand that you want to manage your style in groups, and I'll discuss it with you later.

Friendly reminder: Too many style sheet applications can pose potential performance problems, and under IE6, you can introduce up to 32 external style sheets.

2. "Semantics semantics" is more than just a word that confuses you.

I want to tell you that "semantics semantics" will be your best friend. When you choose the most appropriate, semantically correct element to describe the content of your document, select a semantic, appropriate word to define your class name and the element ID name. Not only do the right things, but it also makes it easier for you and your team members to work. Let's look at a style definition:

. l13k {color: #369;}

I believe you see this definition at first sight, do you know what it is for? I don't think you can answer it. The name should be an abbreviation that only the author knows, even if the author now knows the meaning, but after one months, will you know what it means after a year? Let's take another look at the definition:

. left-blue {color: #369;}

This definition, you might immediately guess what it is used for, the left area of the page, the text color is blue, the expression is very clear. But let's assume that in the near future, the boss wants to redesign the style, the content position of the area will be changed to the right, the text color will be changed to red. Obviously, this name will become no longer appropriate or even incorrect, now you have two choices, one is to replace each use of the class, and the second is to continue to use this misleading name.

In this case, the name is not a description of clarity is good, I suggest you should not use such as color or height width size, such as very specific details to name the style definition, also try to avoid using a specific image of the words to name (such as using box), This has somehow undermined our intention to separate content from style. What is the best thing to do, let's take a look at this:

. product-description {color: #369;}

The name of this definition, no matter how many times you refactor, it is very appropriate, beautiful things are always beautiful.

3. Use code comments

Using code annotations will bring you and your team members great convenience, not just the usual annotations, but also the creative use of annotations to help us get the job done.

* Hints and callouts

The most basic and common use of code annotations is to prompt and annotate code, telling others what it is for.

/* Turn off borders for linked images * *

img {border:0;}

* Time Stamp and signature

As we write program code, it is better to keep track of the history of records by using annotations to leave a timestamp, version number, and the editor's signature on the head of the file.

/* Sushimonster Typography Styles

Updated:thu 10.18.07 @ 5:15 p.m.

Author:jina Bolton

—————————————————-*/

* Organization Code

grouping style definitions in different groups is a great idea, and if I wanted to put the style definitions together at the top of the page, I would use such annotations to help me improve the readability of my Code:

/* HEADER

—————————————————-*/

* Note flags

If you use the method that I mentioned above to use annotations to separate different groupings of styles to define the code, then using the annotation flag will be a very useful technique to help you find the code better and quickly and accurately locate the location you want. We can use a special symbol (such as [=]) to mark the comment

/* =header

—————————————————-*/

A really cool trick, so you don't have to drag up and down, you can quickly navigate to the location you want to edit, and see more about the annotation flags.

* Reference Index

Although not commonly used, it is also useful for a comment to be used as a reference index for code, such as the color code left in the file's head:

/* COLORS

Body Background: #2F2C22

Main Text: #B3A576

Links: #9C6D25

Dark Brown Border: #222019

Green headline: #958944

*/

4. Specify when to use CSS Hack when to use IE conditional annotation

There are a lot of articles about using CSS hack, or using IE conditional annotations to solve IE compatibility problems is a better way of doing things, and neither of them supports. I used to think that using IE conditional annotations to solve this problem was better than CSS hack, but recently, with some examples, I found that conditional annotations are not the most appropriate solution.

The reason is that the use of conditional annotations, the inevitable need to maintain the same style of different IE version of the copy, so that the increase in workload, and the use of CSS hack is not the problem, so the specific problem specific analysis.

But regardless of which method you use, note the following two points:

A If you use a conditional annotation, leave a comment in the main code file to remind yourself and other designers that if you modify the style here, you need to update the style definitions for all other IE versions at the same time.

b If you use CSS Hack, also leave a comment indicating which Hack to use and what version of the browser is in effect because these Hack are likely to fail in the foreseeable future as the browser version upgrades.

5. Organize your selector and attribute declaration

Remember, keep in mind that your style sheet files are organized in a clear structure, and I prefer the following code to organize the way:

Reset styles Reset Browser defaults

Typography styles text, layout definition

Layout styles (header, content, footer, etc.) Layout definition

Module or widget styles modules definition

etc.

For the above groupings, I group according to the element Dom position:

Any parent styles (containing elements, working outside-in) container Element

Block-level element Styles (paragraphs, lists, etc.) block-level elements

inline element styles (links, abbreviations, etc.) line-level elements

etc.

Again, I group by element type:

Paragraphs

Blockquotes

Addresses

Lists

Forms

Tables

Finally, for each style definition, I will group the attribute declarations according to different types:

Positioning (with coordinates) styles

Float/clear Styles

Display/visibility Styles

Spacing (margin, padding, border) styles

Dimensions (width, height) styles

typography-related (line-height, color, etc.) styles

Miscellaneous (List-style, cursors, etc.) styles

A lot of people like to sort the attribute statements alphabetically, which is to look at people's preferences, but I like this way of grouping.

6. Create CSS Framework

If you find that you often create similar stylesheets, you can create your own CSS framework to accumulate a large number of base stylesheets so that you can greatly simplify your work in the future.

Screen.css-a screen CSS file can either have all your styles your want to is used for on screen, and/or can import Additi Onal styles, such as the following:

Reset.css-a Reset CSS file can is used to "reset" all of the default browser styling, which can help make it easier to Achi Eve Cross-browser compatibility. (My reset style sheet undohtml.css)

Typography.css-a typography CSS file can define your typefaces, sizes, leading, kerning, and possibly even color.

Grid.css-a grid CSS file can have your layout structure (and act as the wireframe of your site, by defining the basic he Ader, footer, and column set up.

Print.css-a print CSS file would include your styles you want to being used when the page is printed.

The Blueprint framework is a very good CSS framework that you can look at.

7. Balanced readability and code optimization

is to optimize the code to the extreme (for example, no comments, no line wrapping, compressed to the smallest volume), or keep the document very good readability. This problem, everyone can go to find their own balance point. The best thing to do, though, is to compress the CSS style sheet files when you publish the Web site.

8. Good command of your text editor

Whether you are using Textmate,dreamweaver,vim or something, be sure to master them skillfully. 工欲善其事, its prerequisite.

9. Use version control

Use version control programs such as SVN or CVS to help us better maintain style sheets. (For our programmers, this is probably more familiar, and it's recommended to use SVN Iloveit)

10. Create and maintain a guide to style sheet files

If you want to be a good designer, stick with it.

Note : More wonderful articles please pay attention to the triple web Design tutorial section.