Shulou(Shulou.com)06/03 Report--

This article shows you how to use the SMACSS specification to write CSS, the content is concise and easy to understand, can definitely brighten your eyes, through the detailed introduction of this article, I hope you can get something.

This is a relatively complicated CSS theory, which is divided into five parts: Base, Layout, Module, Status and Theme. However, its core idea is still similar to OOCSS, encouraging the use of class.

1. Basic attributes of Base

Basic properties are easy to understand, that is, the most basic things, many simple-style websites use a simple two-level CSS file mode, a base.css is common to all pages, and each page has a specific CSS file, I think this is the embryonic form of Base. Let's talk about what it is, such as reset files, and some similar toolset files that put clearfix or BFC.

In fact, you will eventually find that the CSS attribute in Base will be used almost all over the site, but I don't want to describe Base this way, because it can be misleading. In most cases, there are only a few simple pages at the beginning of a website, so the properties used by these pages become general properties, but it is not that simple. With the expansion of the scale of the website, the increase in demand, and the burst of inspiration from designers, the so-called GM and Unification are also exerting an imperceptible influence. So when writing Base, the benchmark that should be followed is which styles you will want to use when you do the next site, which styles, even if the design has changed, only need to change some values and colors, and which styles are some basic principles; instead of putting the styles currently used on most pages in Base, or the same reason, they may just happen to be the same, not logically consistent.

2. Layout layout

Layout is the basic of a website, whether left or right or centered, or even any other layout, in order to achieve the basic browsing function of the page, layout is essential. SMACSS is also quite right to propose this feature separately, and there is also an agreement with a prefix, lmerhand class-to identify the layout of the layout. Take the most common example.

The code is as follows:

. l-header {}

. l-brand {}

. l-navigator {}

. l-container {}

. l-sidebar {}

. l-content {}

. l-footer {}

This is a simple left-and-right layout, with navigation and Logo at the top.

3. Module module

Module is not only the most basic idea of SMACSS, but also the basis of most CSS theories. Modularization of styles can achieve the purpose of reuse and maintenance, but SMACSS puts forward a more specific modularization scheme. First of all, on the surface, the module in SMACSS should have a name and its class name, while the other class of the module is prefixed. For example:

CSS Code copies content to the clipboard

.product {}

. product-title {}

. product-image {}

. product-border {}

. product-shadow {}

As you can see in the example, product is a module, title and image are components contained in the module, available or not; border and shadow are OOCSS-like additional class used to change the module itself. In short, you can use its name as a prefix to organize any module structure within a module, but for now it makes it easier to use, improve scalability and flexibility, and it feels a bit tangible and unreal to write some class just for certain functions.

4. State statu

Status is often used with JavaScript, which is a class used to identify the status of a page, whether for the user or by the program. It's a common example, and I'll see it right away. Active is often used to indicate the current tab, or the currently selected target, which is a state that both the style and the program need to know.

SMACSS still has a corresponding prefix to indicate the state class,is- is an appropriate word to indicate what state an element is.

5. Theme theme

The theme is the skin, which coincides with the separate skin and structure of OOCSS. More importantly, for sites with replaceable skin, such separation is necessary, and the skin can be replaced simply by replacing the loaded theme file.

Generally speaking, SMACSS is a more detail-oriented and implementation-oriented CSS theory, which is very suitable for beginners of CSS. It can keep your CSS on track without derailment. Its ideas also have a lot in common with OOCSS, if there is no suitable solution, I suggest that beginners can properly integrate the idea of OOCSS and use the structure of SMACSS, so that the website style written in this way will not get bogged down immediately.

The above is how to write CSS in SMACSS specification. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.