OO CSS Try

zhaozj2021-02-11  189

OO CSS Try: Object-Oriented Style Table Practice

How do artists and programmers work? My answer is CSS that rely on this rule because of the structural comparisons, so you can generate Table but universal and programmakers by fixed taglib. Web programmers who are familiar with CSS / SCRITPT

I thought that the CSS similar to the object-oriented approach was used. The main design idea is as follows.

For some type of table, there will be multiple times in the system, such as for displaying news, showing an announcement, etc. Therefore, this Table is summarized as a CSS, and these different CSSs have some common. Code: sampletable.css.sampletable {}

Sampletable2.css.sampletable2 {} such as heads, data lines, etc., many elements are the same. So make a CSS template, which is implemented by the technique inherited by CSS attribute. Code: .sampletable1 {} .sampletable1 tbody .text {} .sampletable2 {} .sampletable2 tbody .text {} Why is OO's CSS?

Because this CSS draws on the OO's idea, inherit, abstraction, and polymorphism

Inherit, that is, the CSS Class inherits the attribute of the parent class, such as. Table Tbody abstraction, is abstract as a described name, such as .text

At the time of application, the above .Table .Label .Menu, etc., can be seen as the same interface for the different CSS implementations. If .TABLE1 .TABLE2 should have .Label .ment

One

, can be seen as an object of this interface, yes, this object may also be Table2 object, but they all implement the .table interface.

Table is the implementation of different interfaces, which is the polymorphism in OO.

So, what is the benefit of this? First of all, you get a clean table, no extra color format information second, this form is rule, you can automatically generate the third, change a Class is very simple, only need to change one, no need Modify the fourth, better organizational CSS, etc. of TD, divide CSS into multiple files according to color or function

Code is located in: http://icecloud.51.net

Now I only realize a Table 0.12 version interested friends may wish to do this OO-CSS project:>

Copyright Notice: This article is completed by ice cloud, the author retains Chinese copyright. No commercial use is not permitted without permission. Welcome to the reprint, but please keep the article and copyright statement complete. For contact, please send an email: Icecloud (at) sina.comblog: http: //icecloud.51.net

转载请注明原文地址:https://www.9cbs.com/read-4939.html

New Post(0)
CopyRight © 2020 All Rights Reserved
Processed: 0.041, SQL: 9