Color your tags. CSSL

I sometimes came across when a web programmer did not know CSS, or rather did not want to be engaged in ennobling his HTML, which was the result of the work of the script he developed. This prompted me to the idea that he (the programmer) would not hurt to have with him some means to create "beautiful" pages. The tool would have to include some CSS, possibly images, and connect to any HTML (obviously, created according to some specific rules). At the same time, the change of CSS (and images) to alternative ones should not lead to a semantically incorrect display.
The above requirements are very similar to the requirements for the preparation of a skin for any system (in particular, CMS). But, unlike the skin, which is sharpened for a specific HTML, in our case, I would like to simplify the rules of writing HTML as much as possible, so that developers do not need to keep in mind many complex rules.
Thus, specifying some (small) restrictions on HTML, on the one hand, we guarantee the programmer that his code generated taking into account these rules will be correctly executed by any CSS made for this purpose, and on the other hand, we stipulate the template for making these CSS themselves .

CSSL (CSS Library) - this is how our concept will be called. It is a CSS framework. Its main task is to allow a non-designer and non-layout maker, when designing his HTML page, to have a means of guaranteed its “ennoblement”. This implies that the result of applying the appropriate CSS should be extended with additional CSS, if not quite standard styles are required.
So let's get started.
We will carry the main idea: the programmer does not need to remember the specific classes and constructions. Only tags. We will use the wealth of HTML5 tags, for compatibility - classes that coincide with the tag names.

Tag [.class]		Using
HTML4	HTML5
What wrapped content:
div.wrapper		Wrap the whole page
div.header	header	Cap, header block
div.footer	footer	Basement, lower unit
div.section	section	Main content
div.article	article	Article text block
Typical structures:
ul		Sequence of similar blocks
div.article ul, li	article ul, li	Bulleted and numbered lists
dl, dt, dd		Definition list
ul.menu, ul.menu li	menu, menu li	Menu, navigation
table, tr, td, th, thead, tfoot, tbody, caption		Table
form, fieldset, legend, input, input.text, input.radio, input.checkbox, input.file, input.submit, input.reset, button, textarea, label, select, option, optgroup		The form
Special structures:
div.aside	aside	Note
blockquote		Quote
Inside the blocks:
h1, h2, h3, h4		Headlines
p, ol, ul, address, div.copyright		Paragraph, lists, address, copyright
a, a.no_reload, a.logo, a: hover, a: visited, a: active, em, strong, cite, del, ins		Links, text highlighting

Now the same is more detailed:
Let's start with the simplest - with inline elements: a, b, i, em, strong, strike, cite, del, ins, sub, sup. Some of them (b, i, strike, sub, sup) carry only visual load, so we will not prescribe styles for them. Others (a, em, strong, cite, del, ins) also carry a meaning, and therefore specific styles should be defined for them. The a element needs a pseudo-class definition of a: hover, a: visited, a: active, as well as a special class to designate links that work without reloading the page (AJAX), for example, a.no_reload.
Now we define the elements that define the main blocks of the page. Div.header is a container that contains supporting information that is located up to the main meaningful content. Div.footer (or footer in HTML5), respectively, information located after the main meaningful content. Div.section (or section in HTML5) contains the main content. It is expected that there may be several sections on the page. For navigation, use ul.menu (or menu in HTML5), which contains li elements with links, text, or navigation structures inside, that is, nesting of navigation is implied. The active menu item is li.active. All page content should be wrapped in div.wrapper, which specifies the width, margins, position of the content.
The following headings should be used: h1 for the logo or the name of the site section (on the page should (if possible) be present in one copy), h2 for section headings (the number should match the number of sections), h3 for block and structure headers, h4 for headings in within the block structure.
Now we will discuss the typical structures used when displaying information. The first structure is an ordinary table. The following tags are used to format it: table, tr, td, th, thead, tfoot, tbody, caption. When defining styles for headers (th elements), it should be understood that this element can occur both within thead and tbody; and so on. The second typical structure is a list of elements, labeled (ul) and numbered (ol). Since ul is often used to format any sequence of such structures, it makes sense not to label ul, except when it is inside a div.article (article) that serves as a container for texts. The third structure is a list of definitions (double list) (unlike the previous structure, here the list element is for one data block, and two); This list is formatted with dl, dt and dd tags. The fourth structure is form. The form tag contains one or more fieldset elements that contain the remaining elements: legend, input, textarea, label, select, option, optgroup. The label element should be used in an “uneconomical” manner, that is, its associated element (input, textarea) should not be contained in it (for more flexibility in formatting). For the design of buttons related to the form, use input; the button element should not be used inside forms; its purpose is actions that are activated using JavaScript. For the input element, you should define the design for input elements of different types (input.text, input.radio, input.checkbox, input.file, input.submit, input.reset). The fifth structure is a column; is in the div.sidebar, may contain blocks of information, menus, etc., must be in front of the div.section (section).
To format quotes containing a lot of text, you should use blockquote; nested quotes are possible. Note, hint or similar content should be enclosed in a div.aside tag (aside in HTML5). Div.article (article in HTML5) should be used when you need to select or separate (wrap) a large amount of textual information.
Summing up the above, we get

• instructions for the person who is going to write HTML-code compatible with CSSL
• basic (empty) CSS, which will be the template for writing CSS templates.

I wrote several pieces to illustrate the above:

• HTML block
• CSS disc

Here’s what CSSL looks like in action:

Clean html

Same HTML, just colored

Another option colored with CSS3

Unlike other CSS frameworks:

• It is focused on the use with pure html, it is not necessary to learn a lot of classes.
• Orientation to use with modern browsers (HTML5, CSS3). For IE6, etc. - graceful degradation.

The result .
The purpose of this post is to get feedback from:

• programmers who will be interested in this. If there are such, then it is relevant.
• designers who do not mind cooperate. The result of cooperation should be a certain library of css-files that can be used by anyone.
• coders who could speak constructively)

Thank.
')
Ps. My twitter , jQuery API cheat sheet .