If you want to become a CSS expert, it is not enough to be proficient in using CSS selectors. It also lies in the overall planning of the work, mastering the workflow and improving the maintainability and efficiency of the style sheet. In this article, Jina Bolton selects 10 CSS application techniques from 12 top designers and recommends them to everyone.
Lately, I've been looking into ways to create more engaging stylesheets. Using css we can create the wonderful websites we want, and writing css is a pleasure in itself.
How to create a more attractive style sheet? What features should your stylesheet have?
A few months ago, I had the pleasure of attending the 2007 Web Vision Conference in Portland, Oregon, USA. For this event, I researched 12 designers who have made outstanding contributions to web design and development. The results of this research, combined with my own work experience, helped me summarize a set of good methods for making beautiful style sheets.
01. Don’t let css have too many tags
Linking or importing style sheets may sound like a confusing task. But I want to emphasize why this is so important. I have seen many website developers have neat and well-organized CSS documents, but slowly, because they may not be able to update quickly in a short period of time, or they are simply too lazy to manage them, the exquisite style sheets created previously are lost. Became trash.
Imagine you are working on a huge website that needs to publish hundreds of pieces of content. Because time is limited, you need to make quick changes or updates by nesting or arranging CSS. Year after year goes by, and this habit continues, until one day you are told that the website is going to be completely redesigned (but the content will still be the same) and you only have a week to create it (including testing).
Usually, updating a style sheet is a very simple method. Unless you make changes to scattered areas of the website for a long time. You cannot have an overall grasp of the website style sheet structure. So now you have two options: a. Organize everything and redesign it within a month (good luck); b. Find a new job.
Don't let your job become like this. Linking or importing your stylesheet is not a casual matter. Create a clean and tidy style sheet and keep it there, and you'll be happier at work.
Note: Don't add too much markup to your stylesheet. If you try to create a new stylesheet every time you update or add new content, you're definitely asking for trouble. Too many links and imported style sheets will make it difficult to eliminate bugs and make your style sheet difficult to maintain. It is understandable for larger websites to create separate style sheets for different parts. Just be careful not to go too extreme.
It is worth mentioning that adding a lot of style sheets will increase more http requests, which may also affect subsequent work. In addition, Microsoft IE6 browser has certain restrictions on the 32-connection style sheet. .
02. Semantics is not just an industry word
You know, I have to mention it, semantics will be your good friend. In addition to choosing the most appropriate and meaningful elements to express your content, you must also make sure you choose class and id attribute values. Outside of your job, it will make your life simpler (and it will also make your work team's life simpler - if you work in a team). Take a look at the definition below:
.l13k { color: #369; }
If you just came to work and you saw this class in this css file, would you immediately find this class? It's probably not possible, because the name of this class is probably an abbreviation, so there's no accurate way for you to tell it right away. Or maybe you put it there and you know what it means today, but can you guarantee that you will still know what it means many years later?
Now, let's look at this definition:
.left-blue { color: #369; }
You'll probably know immediately what this class selector does just like you know the blue module in the left column is there, so that means it works. I mentioned earlier that you may need to redesign in a week's time. During the redesign, this module was placed to the right and was still red. This class no longer has the value of existing. So now I have to choose, either change all attribute values, or leave it alone. (This may lead to more confusion.)
It's best not to add color or length and width dimensions to your class attributes. You should avoid any property values that are literal words. Direct attributes (such as box) can lead to separation of content.
Finally, let's look at a more appropriate naming convention:
.product-description { color: #369; }
Here you can see it. The product-description defined in this style is very clear no matter how you change it.
03.Benefits of adding comments
If your comments are well organized and within the scope of CSS, label each section clearly. It is best to ensure that comments are visually prominent so that they can be quickly located when the content is scrolled and glanced at ten lines. Then commenting on your CSS document will be of great help to you or others in future development. Most basic comments will hint at why this rule is used here.
Tips and Notes
Adding comments can help you or future developers avoid unnecessary confusion. Keep this habit going. See example:
/* Turn off borders for linked images */
img { border: 0; }
Time and signature
Some designers and developers like to indicate the date and time when a CSS document was last updated, along with their name and initial state. This information can provide you with information about who was involved, as well as a hint as to what the most recent documentation is.
/* Sushimonster Typography Styles
Updated: Thu 10.18.07 @ 5:15 pm
Author: Jina Bolton
-------------------------------------------------- --*/
This is a good idea especially if you work in a team, keep in mind that some teams need to omit this information (some companies would rather not have these names and dates in the document.) So, it's a good idea to just take a look. Is this information needed?
Organization classification
It's a good idea to use comments to briefly describe various parts of your CSS. For example, if all heading types are grouped together, you'll need to look at them to distinguish them.
/* HEADER
-------------------------------------------------- --*/
I'll elaborate on this later when I discuss "differentiating between types".
Annotation marking
If your CSS document organizes scattered styles like I said above, comment marking can help you make it easier when you want to find that part of the file. You can use feature symbols, keywords and find the final result.
/* =HEADER
-------------------------------------------------- --*/
This is helpful in long and complex stylesheets. You can read about this in Stop Design. .
refer to