Using the SMACSS specification to write CSS

This is a relatively complex CSS theory, divided into base, Layout, Module, status and theme a total of five parts. But its core idea is still similar to OOCSS, which encourages the use of class.

1. Base Basic Properties

The basic attributes are easy to understand, is the most basic things, many simple Web sites have a simple two-level CSS file mode, a base.css universal to all pages, and each page has a specific CSS file, I think this is the embryonic form of base. What to say specifically, such as reset files, and then, for example, put Clearfix or BFC some similar toolset files.

It turns out that the CSS attribute in base will be a property that almost all stations use, but I don't want to describe base because it's misleading. In most cases, there will only be a few simple pages at the beginning of a Web site, so the attributes to be used in these pages become common attributes, but not so simple. With the expansion of the Web site, the increase in demand, designers inspired by the burst, the so-called universal and unified also occur imperceptibly. So when you write base, the benchmark that you should follow is, which styles are you going to use when you do the next site, and which styles are just changing some values and colors, and which are some of the basic principles, rather than putting the styles that most of the pages are currently using in base, or is that the truth, They may just be exactly the same, not logically consistent.

2. Layout layout

Layout is a site's basic, whether it is about or centered, or even what other layout, to achieve the basic page browsing function, layout is essential. Smacss It is also true that this feature is presented separately, and a prefix l-/layout-is also agreed to identify the class of the layout. One of the most common examples.

The code is as follows:

. L-header {}

. L-brand {}

. L-navigator {}

. L-container {}

. L-sidebar {}

. l-content {}

. L-footer {}

This is a simple left-right layout, navigation and logos at the top of the logo.

3. Module modules

Module is the most basic idea of smacss, and it is also the basic of most CSS theory, it can achieve the purpose of reuse and maintainability, but Smacss put forward more specific modularization scheme. First, on the surface, the module in SMACSS should have a name and its class name, and all other classes of the module should be prefixed. Like what:

CSS code copy content to clipboard

. Product {}

. Product-title {}

. Product-image {}

. Product-border {}

. Product-shadow {}

As you can see in the example, product is a module, and title and image are components that are included in the module and are available for use, and border and shadow are similar to oocss additional classes used to change the module itself. In short, you can use its name in the module to prefix arbitrary organization module structure, but at present it is to make it more user-friendly, improve scalability and flexibility, if only for some features and deliberately write some class is a bit of a tangible sense of reality.

4. State

The state is often used in conjunction with JavaScript, which is a class that identifies the state of a page, whether for user identification or program identification. is a common example, immediately understand. Active is often used to represent the current tab, or the currently selected target, which is a state that needs to be known either as a style or a program.

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

5. Theme Theme

The theme is skin, and oocss skin and structure coincide. More importantly for the replacement of the skin of the site, such a separation is very necessary, only to replace the loaded theme file can be replaced by the skin.

Overall, Smacss is a more detailed and implementation of the CSS theory, is very suitable for the first-class CSS, it can let your CSS run in orbit without derailment. The idea also has many similarities with oocss, if there is no suitable solution, I suggest that the novice can fit into Oocss's thought and use SMACSS structure, so that the style of the Web site will not get bogged down at least.