Use your own CSS framework

[Classic Promotion] CSS Framework Selection Wizard

Many CSS frameworks have existed for some time, but most web developers avoid using them. Instead, the most experienced developers want to create their own CSS frameworks, provide the benefits of a personalized solution, and reduce the negative reliance on third-party solutions. While the CSS framework is designed to speed up network development, developing your own comprehensive CSS framework can take a lot of time and effort. This article will provide guidance and carefully selected resources to assist you in fulfilling this wish.

Before you begin
First try some popular CSS frameworks or at least look at the files they provide:

• Blueprint
• Yet another multicolumn Layout (YAML)
• YUI Grids CSS Foundation
• 960 Grid System

You may also want to check the authoritative list of CSS frameworks.

Why build your own CSS framework?
CSS plays a crucial role in modern web design, it is really not difficult to learn. There is no reason not to seek a shortcut to accomplish this seemingly once and for all.

Here are some specific reasons/benefits:

More effective:
You will be able to use your own more efficient framework.

Better design Compatibility:
Your design will not depend on how a framework is developed and the framework will automatically support your design preferences.

Less headaches:
You will not inherit errors or defects created by other people. Of course, your own CSS framework may have errors or flaws, but you will be better able to solve these problems.

Greater flexibility:
When your design preferences and requirements change, you will be able to easily modify them.

Additional Benefits:
You won't spend your precious time learning the frame, instead your time will be spent learning something more precious: CSS.

Let's get started-groups and rules
The main objection is that developing your own CSS framework will be a complex task. The CSS framework is simply a collection of CSS code that you use repeatedly in your project. The process of optimizing and improving the quality and utility of code requires additional effort, skill and time.

Let's take a look at what type of CSS code is used repeatedly in our project. Wealways use CSS layouts, typography, tables and commonly used such as lists, pictures, etc., we can also use CSS to ensure that the overall appearance of elements and feelings in all Web browsers to。 In addition, some of us may like components (such as menus, Atlas, sliders, etc.) that we use repeatedly in our projects; including their styles in our frames.

To easily maintain every part of your framework, divide it into multiple CSS files, such as:

Reset.css
Base.css
Typography.css
Layout.css
Form.css
Table.css
Browser.css
Print.css

The list above is just a suggestion, you can divide your frame into any number of files. However, to get the most out of your CSS framework, you must make sure that:

You have thoroughly tested the output of all major browsers
litmus– Online services that make compatibility testing easier
You have followed the best practices of CSS:
CSS standards and best practices
CSS best practices-insight into industry best practices
Concise code, reasonable structure and proper documentation
Styleneat-online tools, organize and standardize your CSS-Select, sub-selectors and properties
With a minimum of class and ID
It has passed the error test and has been validated by the CSS validation service

with CSS Reset, base & typography as a solid foundation
Various elements of different browsers have different default styles (margin, edge space, boundary, contour, etc.). The reset file removes inconsistent default styles and ensures that all major browsers will render your site using a consistent style. Here are two of the most popular CSS Reset, which you might consider using in your own CSS framework:

• Eric Meyer CSS Reset
• YUI Reset CSS

After you complete the CSS reset, the next logical step is to set your own base, which provides a consistent default style for all major browsers. This may be done in a separate so-called Base.css file or with your reset file. Here are some resources to help you build your base:

• Tripoli
• YUI Base CSS

Text typesetting (typography) is closely followed by each specific design, so including in a CSS framework seems to be the first to be thought of as annoying and unwise ideas. But having a text-typesetting file that covers all the basics is a really time-saving tool. Even for a period of time, you may end up having to use more than one layout file for different styles, depending on the style of the font.
Here are some resources and tools to help you get started:

• Typetester
• Typechart
• Blueprint Typography
• CSS Type Set
• EM Calculator

Layout (layout,layouts)-Find the Holy Grail

Layout is the trickiest, perhaps the most controversial part of a CSS framework. Like typography, layouts vary with design and you should choose carefully whether you want to make it part of your CSS framework. You can even consider the possibility of having more than one layout file in your frame.
Here is a list of resources that may provide further assistance:

• In search of the one True Layout
• 6 Keys to understanding modern css-based Layouts
• Advanced CSS Layouts:step by Step
• Five simple Steps to designing Grid Systems
• Fixed Width CSS Layouts
• Perfect multi-column CSS Liquid Layouts
• The ' Holy Grail ' 3 Column Liquid Layout (Pixel Widths)
• CSS Layouts:a Collection of 224 Grid and CSS Layouts
• CSS Layout Generator

Forms & Tables-why not?

Both forms and tables can be included in your Base.css file. However, having more additional templates will add significant value to your design to meet different needs.
Before making a final decision, look at these resources:

• The Form garden–a CSS Based Collection for Web Forms
• Fancy Form Design Using CSS
• Clean and Pure CSS FORM Design
• Blueprint Form
• A CSS styled Table
• Top Ten CSS Table Designs

Browser-specific CSS
Unfortunately, many occasions require us to write some browser-specific CSS workarounds. However, CSS hacks or workarounds may result in CSS validation errors. To overcome this problem, you should use the conditional tag in your HTML file to include the BROWSER.CSS.
Here are some resources for your reference:

• IE6 CSS Fixer:starter Kit
• CSS Hacks
• Developing CSS for IE6 and 7
• Explorer exposed!

Print style
A separate plot style sheet will greatly improve the usability of your site, especially for a large number of content pages.
Here are some additional guidance resources:

• CSS Media Types Create print-friendly Pages
• Print Stylesheet–the Definitive Guide

What else can you do?
You can do more things, and that's the main idea behind that is to have your own CSS framework. You can create many abstract CSS files as you like, such as:

COMPONENT.CSS (component)
This may include elements commonly used in CSS, such as drop-down menus, tooltips, etc.
APPLICATION.CSS (Application)
This may have multiple versions for each of the different types of applications that you often design. For example: Wordpress,drupal,blogengine.net and so on.

Finally-use your own CSS framework
Using your frame is simply to include all the necessary files in your HTML. However, including some unnecessary CSS files means additional HTTP requests. To avoid this situation you should first merge all the files (except the browser.css and Print.css files) and then include this new CSS in your project file.

In order to keep this article short and only provide some limited resources, please feel free to look for a better alternative and share your comments with others.
You can also take a quick look at:

• Definitive List of CSS frameworks
• List of Really useful Tools for CSS developers
• CSS3 unleashed–tips, Tricks & Techniques

        
         ——————— ———————————————————————
         Posted in April 1st, 2009 Original: Saud Khan
         Original website: http://www.w3avenue.com/2009/04/01/ guidelines-for-developing-your-own-css-framework/
        
         Translator Note: This is actually an old article. But it still seems exciting to date. The main thing is that this article is not about what you learn, but what it is that guides you to do. Since the concept of OO css (object-oriented CSS) has been generated, then the old Oocss framework, the Buleprint framework, is now available in 10 CSS frameworks, making it impossible to determine which one to choose.
         on the other hand, after the choice, there must be regret. As stated above. So, most people's wish is: write one yourself.
         Of course, you can write a decent CSS framework according to this article, as this article says, beginners can do. Because, this article let you refer to are authoritative, classic, famous. Of course, on the other hand, if you really have a certain degree of CSS skills, it is more natural. So, I hope that you have read the book of "Proficient in CSS" at least.