CSS style sheets create amazing websites

Become a css expert and be proficient in usageCSSSelectors are far from enough. It also focuses on the overall planning of the work, master the work flow, and improve the maintainability and efficiency of the style sheet. In this article, Jina Bolton selects 10 css application skills from 12 top designers and recommends them to you.

Recently, I have been studying how to create more attractive style sheets. Css can be used to create a website that we want, and css is a pleasure.

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

A few months ago, I was lucky enough to attend the 2007 webpage visual conference held in borantra, Oregon. For this event, I studied 12Webpage designDesigners who have made outstanding contributions to development. The results of this study, combined with my own work experience, help me summarize a set of good methods for creating exquisite style sheets.

01. Do not mark css too much.

Linking or importing a style sheet sounds like a confusing task. But I want to emphasize why this is so important. I have seen many website development projects with neat and well-organized css documents, but slowly, because it may not be able to quickly update in a short period of time, or I am too lazy to manage them again, this makes the previously created exquisite style sheet junk.

Imagine that you are working on a huge website that requires hundreds of content to be published. Due to limited time, you need to nest or arrange css for quick modification or update. A year has passed, and this habit persists until one day you are told that the website should be completely overturned and re-designed (but the content is still the same) and you only have one week to create (including testing ).

Update a style sheet is usually a very simple method. Unless you modify the scattered area of your website for a long time. You cannot have an overall grasp of the structure of the website style table. So now you have two ways: a. Sort out all the content, and re-design (good luck) B in a month to find a new job.

Don't let your work look like this. Linking or importing your style sheet is not that casual. Create a clean and tidy style sheet and keep it up. Your work will be happier.

Note: Do not add too many tags in your style sheet. If you try to create a new style sheet every time you update or add new content, you must be in trouble. Too many links and imported style sheets will make it difficult to eliminate bugs and make it difficult to maintain your style sheets. It is understandable that a larger website creates different styles. Be careful not to go too far.

It is worth mentioning that adding many style sheets will add more http requests and may affect subsequent work. In addition, Microsoft Internet Explorer 6 imposes certain limitations on the 32 connection style table.

02. Semantics is not just an industry term

You know, I have to put it up. Semantics will become your good friend. Apart from choosing the most appropriate and meaningful element to express your content, make sure that you select the class and id attribute values. In addition to your own job, it will make your life easier (it will also make your partner's life easier in your work team-if you work in a team ). Let's take a look at the following definition:

. L13k {color: #369 ;}

If you are new to work, will you immediately find this class in this css file? It is unlikely that the name of this class may be an abbreviation, so there is no accurate method for you to say it immediately. Or maybe you put it there. Today you know what it means, but do you still know what it means after many years?

Now let's take a look at this definition:

. Left-blue {color: #369 ;}

You may immediately clearly know the purpose of this class selector, just as you know where the blue module in the left sidebar is, so it indicates that it works. As I mentioned earlier, you may need to redesign in a week. During the re-design, this module was placed on the right side, and it was still red. This class will no longer have value. So now I have to choose either to change all the attribute values or leave it unchanged. (This may cause more confusion .)

It is best not to add the color or length and width in your class attributes. You should avoid any attribute value being a direct word. (Such as box) direct attributes can lead to content separation.

Finally, let's look at the more appropriate naming rules:

. Product-description {color: #369 ;}

Here you can see. The product-description defined in this style is clear no matter how you change it.

03. Benefits of adding annotations

If your comments are well organized and within the control scope of css, clearly mark each section ). It is best to make sure that the annotation is visually highlighted so that you can quickly locate the problem when the content is scrolled or dozens of rows. Commenting on your css document will be of great help to you or others in future development. Most basic comments will prompt you why this rule is used here.

Tips and notes

Adding annotations can help you or future developers avoid unnecessary confusion. Keep this habit. Example:

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

Time and signature

Some designers and developers like to have their names and initial statuses updated on css documents tomorrow and on time. This information can be provided to you, who participated in this information, and prompts you about the latest documents.



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

This is a good idea, especially when you work in a team, remember that some teams need to save this information (some companies prefer not to include these names and dates in the document .) Therefore, it is best to check whether such information is required.

Organization category

It is a good idea to briefly describe each part of css with comments. For example, if all the title types are put together, you need to watch to distinguish them.

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

I will explain this in detail later when discussing "differentiate different types.

Annotation addition

If your css document is the same as I mentioned above when organizing fragmented styles, the annotation addition can help you make it easier to find the part of the file. You can use feature symbols and keywords to find the final result.

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

This is very helpful in long and complex style sheets. You can read this in Stop Design ..



Reference

If you have different habits in creating style sheets, it is useful to use annotations as a reference guide. What you see in the css file of Steve Smith's is a 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 at the top of your css document to help you remember what colors have been used on your website. In addition, you can define different parts here and find them immediately (you can also use annotations to add values). This is the example.

/* GENERIC
HEADER
SIDEBAR
FORMS
TABLES
FOOTER
*/

/* = GENERIC
----------------------------------------------------*/

04. Know when to add conditional comments and use tips.

Many articles have written some tips on problem solving. Conditional comments are a good way to control ie release. Then the article talked about other aspects. I agree that conditional comments are much better than spam in your css document, but recently I began to realize that there is a lot of evidence that this is not the best solution.

Imagine. You want to set the lowest height of an element, but ie6 does not execute it, so you know that the height you can use will also be processed. Create a style sheet and add conditional comments to your logo. Do you need to follow this rule? Keep the rules at the lowest height and height together, and select a tip in the same css document. Will this be better? In this case, I think it is very difficult to use this method.

Another thing to consider is: if your style positioning is diverse, too many css documents and conditional comments will make your debugging process very painful. Therefore, you need to change some things (which may be the lowest value in the above statement), and you have to open more than one document for this modification. In many cases, this may not be a big deal for you, but imagine that if you define something, in your main css document, then, we need to redefine three different ie style sheets.

If you are sure you want to use conditional comments, we recommend that you leave the comments in your main style sheet to let you or the next developer know that this is a special rule for ie. This approach is when you have to edit a height or something else. You know more than one document is open.

If you are sure you want to use the skills, remember to update the browser to change the next work. The use of the skills will not work for later version control.

05. Organization selection and statement

Keep your css regular and organized. It is best to classify your selections.

• Reset styles
• Typography styles
• Layout styles (header, content, footer, etc .)
• Module or widget styles
• Etc.

Then, in each group, the delimiters are organized through the dom layer.

• Any parent styles (containing elements, working outside-in)
• Block-level element styles (paragraphs, lists, etc .)
• Inline element styles (links, abbreviations, etc .)
• Etc.

Next, work based on the element type:

• Paragraphs
• Blockquotes
• Addresses
• Lists
• Forms
• Tables
• Etc.

Finally, the css declaration is also classified according to the above.

• 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

Some people prefer to organize in alphabetical order. This is of no use to me, but it may be helpful to you. No matter what method you choose, stick to it.

06. Create an architecture.

When you start to create a css style sheet, if you find that you always repeat the same thing, consider creating a library or framework structure. A framework is like a website skeleton, which saves you time to build a website. You may find the following typical style sheets in your framework:

• Screen.css-A screenCSSFile can either have all your styles you want to be used for on screen, and/or can import additional styles, such as the following:
O reset.css-A resetCSSFile can be used to "reset" all the default browser styling, which can help make it easier to achieve cross-browser compatibility.
O typography.css-A typography CSS file can define your typefaces, sizes, leading, kerning, and possibly even color.
O grid.css-A grid CSS file can have your layout structure (and act as the wireframe of your site, by defining the basic header, footer, and column set up ).
• Print.css-A print CSS file wocould include your styles you want to be used when the page is printed.

One example of building a framework is the framework blueprint compiled by 0 olav bj & oslash; rk & oslash; y (the authors also include Jeff Bean and Eric Meyer ). Another popular framework is Yahoo's user interface library. Many developers feel that this pre-built framework contains bloated markup and css, and also contains direct class names.

Note: When I am still drafting this article, Jeff Croft has published a book on how to fall in love with the css framework. As he mentioned in the book's comments, others told him that I strongly oppose the existence of the framework. I am not sure where such comments come from, but I want to declare that this is not the case at all, on the contrary, I like frameworks very much. To achieve the best results, I suggest you create your own framework structure to better serve you or your work.

07. Ensure the balance between readability and optimization of the style sheet.

Style formatting varies from person to person. Some developers first create a readable style table, and then optimize the style table (Comment, bit, tag, shipping benefit, etc.) before the document is fully created ). This is a good technology I want to recommend. However, if you don't know how to do this, try to find a style that balances the readability and optimization of the style sheet. Steve Smith has a good suggestion here to provide this technology.

In addition, we consider using hyphens instead of underscores. Microformats uses hyphens as the separator standard. Some old browsers are not compatible with such hyphens. You can read more about Underscores in class and ID Names.

08. Master your text editor.

Just as artists are familiar with their professional tools, it is equally important for a designer or developer to familiarize themselves with the tools they need. For css, when you use it again, you are an editor.

There are many text editors to choose from: TextMate, Coda, BB Edit, TextPad, and DreamWeaver. I am not here to tell you which one to use. They have their own advantages and disadvantages, A good editor will choose the one that suits you. However, once you decide to use a text editor, you need to learn all about the editor. Find shortcuts and learn all the skills and tips you can learn.

Mastering the editor can quickly increase the creation time of your style sheet and help you complete your work more effectively.

09. Use version control

Smooth maintainability is also an important part of creating exquisite style sheets. That's why Version Control becomes your right arm. This is not only helpful to the team, but also a lifeguard for individual designers or developers.

Some applications are built-in software, so they are controlled in terms of resources. DreamWeaver uses a check-in/check-out synchronization system (this helps a developer not edit a document in the confirmation that it has been correctly edited ). This is convenient, but it is restricted in some places.

Subversion (SVN) or Concurrent Versions System (CVS) is a good tool for managing, including adding options, replying, check the changes (this is very helpful to the team-you can check who added, edited, or changed the password, and when to do so) and resolve the conflict. Jonathan Snook wrote a good article named "Hosted Subversion". You can read this article to learn more about how to create a style sheet faster and more easily.

10. Create and maintain a style specification.

In some cases, a style specification is an author's standard on grammar rules and writing. It can also be used as an outline standard for design, development, and content. A style specification is a reference manual that can well clarify typographical, table, color, and image size.

When you create a style specification, it will play an effective role in tag and css. This reference can be used as a manual for development teams and future developers. It can include defined la S, where you can list different la S and provide related labels and styles.


Finally, you have left other developers with standard steps (such as verification and accessibility) to ensure higher quality.

Conclusion

As a css master, advanced css skills are far from enough. (That is, fully understand the stack mode, Box mode, and how the browser works ). I encourage you to think about ways you can continuously improve maintainability and efficacy. Think about how to design texts, or even what you need to improve. If your style sheet is beautiful and intelligent, it is essential to master a well-organized workflow.