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

This article focuses on "what is the OOCSS architecture of CSS". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what is the OOCSS architecture of CSS?"

Object oriented programming

If you have experience in object-oriented programming, you can skip this section.

Before we move on to OOCSS, we need to learn about programming objects below. Object-oriented programming began to appear in the artificial intelligence team environment of MIT in the late 1950s, according to Wikipedia:

Object-oriented programming (OOP) is a programming paradigm that represents concepts as "objects" with data fields (properties that describe objects) and related processes called methods. Objects are instances of classes that interact with each other to design applications and computer programs.

Object-oriented has three major features: inheritance, encapsulation and polymorphism.

OOP has been widely used in JavaScript and back-end languages for several years, but organizing CSS according to its principles is still relatively new. In popular terms, OOP is a practice that makes your code reusable, efficient, and fast.

There is no need to introduce too many concepts, let's take a look at when we started JavaScript, I believe everyone has learned and practiced Animal classes to help us understand OOP:

/ / Base class / parent class class Animail {constructor () {} getName () {}} / subclass class Cat extends Animail {constructor () {} run () {} jump () {}} / / subclass class Fish extends Animail {constructor () {} swim () {}}

What is OOCSS?

Concepts are always difficult to understand, so let's quickly move on to an example and then learn what OOCSS is.

When we were new to CSS, when we organized the CSS code, we sometimes wrote something like this:

/ * Bad way * / .box-1 {border: 1px solid # ccc; width: 200px; height: 200px; border-radius: 10px;}. Box-2 {border: 1px solid # ccc; width: 120px; height: 120px border-radius: 10px;}

It is not difficult to find that there are some repetitive styles in the code. When maintaining this code, if you want to change the property value of border-radius or border, you have to change it in both places at the same time.

For ease of maintenance, we can extract the duplicate code and put it in a new class name as the base class name, so that when there are new changes, there is no need to maintain two pieces of code:

/ * good way * / / * repetitive code * / .box-border {border: 1px solid # CCC; border-radius: 10px;} .box-1 {width: 200px; height: 200px;} .box-2 {width: 120px; height: 120px;}

In the HTML structure, we can use the following:

Learn OOPLearn CSS

If we abstract the newly modified CSS code, we can think of it like this:

If we want the style of the two div to achieve the desired effect, without the public class name of box-border, box-1 and box-2 alone can not achieve the ideal style effect, in other words, box-border is the base class box-1 and box-2 is the subclass.

This is the hard abstraction of the OOP concept in CSS, called OOCSS.

However, Nicole Sullivan, the author of OOCSS, uses the following sentence to summarize CSS's object-oriented programming.

It's a repeating visual pattern, that can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript.

This is a repetitive visual pattern that can be abstracted as separate fragments of HTML, CSS, and possible JavaScript.

Nicole Sullivan

Understand what OOCSS is, I believe you have some understanding of OOCSS can write an extensible, maintainable CSS, and at this time you should also understand, although we may not have heard of the concept of OOCSS before, but the project absolutely unwittingly used this skill.

All right, what are we really going to learn about OOCSS?

OOCSS (Object-Oriented CSS translated as object-oriented CSS) is the leading modular or component-based system for organizing CSS. It was first proposed by Nicole Sullivan at the Web Directions North conference in 2008.

She also mentioned that abstraction is the first consideration when building an OOCSS, but there are two basic principles to follow:

Separate the structure (structure) from the skin (skin). You should retain the structure and position in the underlying object, and the visual features (such as background or border) in the extension class. So you don't have to override visual properties.

Separate the container (container) and the content (content). Never imitate the structure of HTML in CSS. In other words, do not reference tags or ID in the stylesheet. Instead, try to create and apply classes that describe the use of related tags. And keep nested classes to a minimum.

Keep in mind that the core of these two principles is to write reusable and maintainable styles.

Separate the structure from the skin

Skin is a visual attribute that we can see, such as:

Colors Color

Fonts font

Shadows Shadow

Gradients gradient

BackgroundColos background

Structures are, of course, visual properties that we can't see, such as:

Height height

Width width

Position location

Margin

Padding

Overflow

There is also a basis for such separation. To give you a vivid example, you have all hit Arena of Valor. If you are a loyal fan, you may have spent money on skin, and the change of brushing makes the hero feel much higher in an instant. The structure and skin of our web page are separated from each other, just like the hero of the king.

This good example is the one we gave above:

/ * good way * / / * repetitive code * / .box-border {border: 1px solid # CCC; border-radius: 10px;} .box-1 {width: 200px; height: 200px;} .box-2 {width: 120px; height: 120px;}

In the HTML structure:

Learn OOPLearn CSS

Separate containers and contents

Let's explain to the following example:

Div {font-size: 20px;} div h3 {font-size: 20px;}

In the above example, H3 is locked in the menu container. If we accidentally change the structure of HTML, the CSS we wrote will be invalid, very difficult to maintain, and the styles acting on the h3 tag can not be reused, which is really a headache.

According to the principle of separation of container and content, we should make the container and content have their own styles, while avoiding the use of tag selectors, and rewrite the following code

.menu {width: 200px; height: 200px;} .menu-title {font-size: 20px;}

OK, so that the code is very easy to maintain and reuse, and keep in mind that we should prohibit the use of location-related styles and tag selectors in the project.

Advantages and disadvantages

It has been repeatedly emphasized that the advantage of using OOCSS is to write reusable and maintainable styles. In this article, let's summarize the advantages and disadvantages of OOCSS:

Advantages

Extensibility: OOCSS allows you to freely mix and reapply classes on different elements without thinking too much about their context. Novices to a project can reuse what their predecessors have abstracted instead of piling up on CSS.

Maintainability: adding or rearranging HTML tags no longer requires you to rethink the entire CSS process. This is especially useful for large ongoing projects.

Improve the speed of the website. Reducing repetition helps applications run faster. CSS files are used to expanding exponentially as the complexity of the site increases, thereby increasing the page size.

Readability: when other programmers see your CSS, they will be able to quickly understand its structure.

Get started quickly: especially for newcomers who know object-oriented programming.

Shortcoming

While there are many advantages to using OOCSS, there are also some disadvantages:

Not suitable for small projects: small projects do not necessarily require extensibility, readability, and maintainability.

Increase the number of element classes: you may need to add multiple classes to an element to describe all style elements. This can cause some confusion for people who are not familiar with OOCSS and confuse your markup.

There is a learning curve: if you are using OOCSS and your colleagues are not familiar with it, it will take time for them to learn how to use it before continuing.

Non-semantic class name: according to the separation principle of the two cores, it is impossible for us to have a class name like .btn to fix the style. we will only split it in detail, but at the same time we need a business class name like .btn. So we need a mechanism to solve this problem.

Semantics and maintainability also need to be balanced, but what I need more is code maintainability, for which we can use CSS preprocessors, such as Sass/Less.

Inheritance of Sass/Less

Remember the three major features of OOP programming, one of which is inheritance, which corresponds to Sass/Less 's extend.

According to OOCSS when we need a button:

/ * Bad way * / .button-structure {min-width: 100px; padding: 1em; border-radius: 1em;}. Button-skip {color: # fff; background: # 55ace;}

In Sass, we can use% placeholder to create objects and combine them together by calling them in the class through @ extend. This allows you to organize your own code:

/ * good way * /% button-structure {min-width: 100px; padding: 1mm; border-radius: 1em;}% button-skip {color: # fff; background: # 55acee;} .btn {@ extend% button-structure; @ extend% button-skip;}

Here's the point: a business class name solution:

At this point, I believe you have a deeper understanding of "what is the OOCSS architecture of CSS?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.