CSS style sheets to create wonderful websites

To become a CSS expert, it is not enough to be proficient in using CSS selectors (selectors). It also lies in the overall planning of work, the mastery of workflow and the improvement of the maintainability and efficiency of the style sheet. In this article Jina Bolton a selection of 10 CSS application tips from 12 top designers.

Recently, I've been working on ways to create more attractive style sheets. With CSS you can create the wonderful website that we want, and writing CSS is a kind of enjoyment.

How do I create a more attractive style sheet? What features should your style sheet have?

A few months ago, I had the privilege of attending the 2007-year Web Vision Conference in Oregon State, USA. For this event, I have studied 12 designers who have made outstanding contributions to web design and development. The results of this study, combined with my own work experience, helped me to summarize a good way to make a beautiful style sheet.

01. Don't let the CSS have too many tags

Linking or importing a style sheet sounds like a job without a clue. But I want to emphasize why this is so important. I've seen a lot of web development with neat, well-organized CSS documents, but slowly, because it may not be quick to update in the short term, or simply lazy to manage, this makes the refined stylesheet created earlier into junk.

Imagine that you're working on a huge web site that needs to publish hundreds of content. Because time is limited, you need to make a quick change or update by nesting or arranging CSS. Year by year, this habit is maintained until one day you are told that the site will completely overturn the redesign (but the content remains the same) and that you have only one week to create (including testing).

In general, updating a stylesheet is a very simple way to do it. Unless you have a long time to make changes to the site's fragmented area. You can not have a overall grasp of the Web site style sheet structure. So now you have two ways to organize all the content and then redesign it in one months (good luck) b to find a new job.

Don't let your work turn out like this. Linking or importing your style sheet is not as casual as it is. Create a clean and tidy stylesheet and keep it going, and your work will be much happier.

Note: Do not add too many tags to your style sheet. If you try to create a new style sheet every time you update or add new content, you must be asking for trouble. Too much linking and importing style sheets makes it difficult to eliminate bugs and make your stylesheets difficult to maintain. It is understandable that larger sites create different parts of the style sheet separately. Just be careful not to go overboard.

It is worth mentioning that adding a lot of stylesheets will add more HTTP requests and may also affect the work that follows. In addition, Microsoft IE6 browser to 32 connection model table also has certain limits. Www.webjx.com

02. Semantics is not just an industry word

To know that I have to put it on, semantics will become your good friend, besides choosing the most appropriate and meaningful elements to express your content, but also make sure that you choose class and id attribute values. In your job, it will make your life easier (it will make life easier for your team's partners----if you work on a team). Look at the following definition:

. l13k {color: #369;}

If you have just come to work, do you see this in the CSS file, you will immediately find this class? It is unlikely because the name of this class may be an abbreviation, so there is no precise way to get your word out immediately. Or maybe you put it there, today you know what it means, but can you promise to know what it means after many years?

Now, let's take a look at this definition:

. left-blue {color: #369;}

You may immediately be aware of the use of this class selector just as you know the Blue module in the left column is there, so this means it works. As I mentioned earlier, you may need to redesign your time in a week. At the time of the redesign, the module was placed to the right, and the red color. This class will no longer have the value of being. So now you have to choose to either change all of the attribute values or leave it motionless. (This could lead to more confusion.) ）

It's best not to add color or a wide size to your class attributes. You should avoid any attribute values that are direct words. Direct attributes, such as box, can cause the separation of content.

Finally, let's take a look at the more appropriate naming conventions:

. product-description {color: #369;}

Here you can see. The Product-description (product description) defined with this style, no matter how you change it, is clear.

03. The benefits of adding annotations

If your annotations are well organized and within the control of the CSS, clearly annotate each section. It's a good idea to make sure that annotations are visually prominent so that you can quickly locate content as it scrolls and Islands, so annotating your CSS documentation will help you and others in future development. Most of the underlying annotations will indicate why this rule is used here.

Tips and attention

Adding comments can help you or future developers avoid unnecessary clutter. Keep this habit. See Example:

/* Turn off borders for linked images * *
img {border:0;}

Time and signature

Some designers and developers like to mark the days and times in the CSS document's recent updates, as well as their names and initial state. This information can be provided to you who are involved in these, as well as the latest documentation.
Webjx.com

/* Sushimonster Typography Styles
Updated:thu 10.18.07 @ 5:15 p.m.
Author:jina Bolton
----------------------------------------------------*/

It's a great idea. Especially when you are working on a team, remember that some teams need to omit this information (some companies prefer not to have these names and dates in their documents). So it's best to see if you need this information.

Organization classification

It's a good idea to use annotations to simply explain the various parts of the CSS. For example, if all of the title types are put together, you need to watch to differentiate them.

/* HEADER
----------------------------------------------------*/

I will explain this in more detail later when I discuss "distinguishing between different types".

Annotation Add mark

If your CSS documents are organized in a fragmented fashion, as I said above, annotation labels can help you get easier when you want to find that part of the file. You can use the signature, keyword, and then find the final result.
　　
/* =header
----------------------------------------------------*/

This is helpful in a long, complex style sheet. You can read this in the Stop design.

Reference

If you have a different habit of making style sheets, it is useful to use annotations as a reference guide. What you see in Steve Smith's CSS file is the reference standard that contains a specified color.

/* COLORS
Body Background: #2F2C22
Main Text: #B3A576
Links: #9C6D25
Dark Brown Border: #222019
Green headline: #958944
*/

You can put this reference on top of your CSS document to help you remember what color is used on your site. Also here you can define the different parts and find them immediately (or you can add them with annotations). That's the example.

/* GENERIC
HEADER
SIDEBAR
FORMS
TABLES
FOOTER
*/

/* =generic
----------------------------------------------------*/

04. Know when to add conditional annotations and apply skills.

A lot of articles have written about problem solving skills, conditional annotation is a good way to control IE release. Then the article says something else. I agree that conditional annotations are much better than littering your CSS documents, but lately I've come to realize that there's a lot of evidence that this is not the best solution.

Imagine. You want to set its minimum height in an element, but the IE6 browser does not execute it, so you know that the height you can use will also be handled the same way. Re-build a stylesheet and add conditional annotations to your logo, all of which you need to follow this rule? Keep the minimum height and height of the rules together, choose a little trick in the same CSS document, would that be better? In this case, I think this method is very difficult to work.

Another thing to consider is that if you have a diverse style of positioning, too much CSS documents and conditional annotations will make your debugging process extremely painful. So, you need to change something (probably the lowest level in the above statement), and you have to open more than one document to make this change. In many cases, this may not be a big deal for you, but imagine if you define something, in your main CSS document, and then redefine the three different IE style sheets.

If you are sure you want to use conditional annotations, I recommend leaving the comments in your main stylesheet to let you or the next developer know that this is an IE special rule. This approach is when you have to edit a height or something. You know, there will be more than one document open.

If you're sure you want to use the technique, remember that updating your browser can change the rest of the work, and the use of this technique will not be useful for later version control.