Semantic CSS, a new approach (I)

Introduction

There are countless websites that offer thousands of different proposals when the use of CSS in the layout of web portals, as we apply to multiple technologies: XHTML, Flash, etc ...

What is hard to find is the solution that perfectly suits your development, your particular environment. Perhaps even more difficult is to adapt a similar approach to yours. This task is prone to multiple errors, which will emerge as and when required and time, we see that we have the wrong base, requiring a restructuring from the beginning.

This is the context in which we are today. After a strong commitment to restructuring and organization of CSS semantics based on their use is that if it is perhaps one of the most successful approaches, leaves plenty of open items should be specified. That is the task that we propose here.

For the uninitiated, commenting that the semantic approach is based on the idea that the way to structure the information on the presentation layer of our web projects must follow the criteria of what is and the context in which each element is used.

The web environment is a key feature that few others have and the capacity and potential for use in multiple types of devices, which further opens the range of points that we control the time to create our style sheet, the After multiplying the case mix and other errors to be controlled.

Here we hope to give a possible solution that conforms to the principles of semantic CSS and follow the guidelines for accessibility and ease of extension to multiple devices.

Points to consider

Hierarchical Structure of CSS

Our style sheets follow a hierarchical structure, which will be the main element that includes, for each type of device, the corresponding style sheets.

Explanation of each style sheets

Pantalla.css, and Movil.css Impresora.css. These are CSS specific to each type of device. His mission on top of the hierarchy is imported daughters CSS (@ import url css ("... ")). Not include specific styles.

LayoutPantalla.css, and LayoutMovil.css LayoutImpresora.css. Include information on the various layers that form the layout of the page, ie, layout information from different areas of the portal (Banner, menus, content, credit, ...)

CrossBrowser.css. Binds tricks, fixes and other elements to make pages look the same in all browsers (Internet Explorer, Mozilla, Firefox, Opera, etc.).

Tipografía.css. Any matter relating to the way it presents the typography of the page is a collection aquí.Comienza relative measure of 62.5% in the body tag, which is set as equal to 1em. All other sizes come to this subject (age: 1.2em, 1.5em, etc ..., and under: 0.8em, 0.5em, etc.).

Formularios.css. Setting styles apply to all tags associated with generic forms.

Documents associated with this article

Semantic CSS. Includes various CSS described.

XHTML page with an example in layer-based layout type

If you continue reading on this topic ... Semantic CSS. A new approach (II)