Using ORGANICCSS: The best way to use CSS

Article Introduction: I don't know if I will use ORGANICCSS in the future, but that's not the most important part. What I can learn from it is the most important thing. I knew I had to change our CSS development process and I did it. I think we should talk more about the framework of CSS. You can see that we have a lot of good resources. We have to find them, learn what they do and how to work. Only then

Don't you think CSS has nothing to say? He has become a hot topic in recent years and a lot of people are talking about him. CSS is not a simple thing to do, and front-end developers can use it to make the page better and prettier. Looking farther, we are more concerned with the performance of the site and how to make a better site. In this article, I would like to share my knowledge of CSS coding that I have learned in the last few months. What I'm really interested in as a programmer is the Framework (Architectural) section. I think writing CSS should need to change, for this I dug a lot of knowledge. I searched for good programs, workflows, and principles. This article will lead you to travel with CSS, many people say that writing CSS is not programming, I do not agree, I said that writing CSS is also interesting, challenging.

CSS Preprocessor

Let's face it, writing CSS in the world is not a funny thing. The CSS preprocessor looks like CSS, but he's more like a magician, using some magic to produce valid CSS code. This makes you more and more of a new layer between the browser, this is not even worse? That's what it looks like, but that's not the case, because the CSS preprocessor provides some really useful features.

Connection (concatenation)

I think the most valuable thing is to connect your files. I believe that you know@importto use to refer to your.cssfile and tell the browser to get this file. To do this, the browser needs to add a request, which is a bit cumbersome, because you may have many of these files. Add extra requests to make your program less performance. If you use the CSS preprocessor language, this problem will not exist. They will only compile a single file in your style file.css.

Extension (extending)

Less and Sass are the main two CSS preprocessor. We all support expansion. Although they work in a slightly different way, their ideas are the same. You can do a basic class (usually calledmixin) and a bunch of attributes, and then import these properties in another selector, such as

// less .bordered (@color: # 000) {border: dotted 2px @color;} .header {.bordered;} .footer {.bordered (# BADA55);}
// Compiled CSS .header {border: dotted 2px # 000000;} .footer {border: dotted 2px # bada55;}
The problem here is if you don't define a parameter mixin, such as the example just now:

.bordered
{border: dotted 2px # 000;
}
Ranch
This is the last compiled CSS file, it doesn't matter whether you use it or not. Because he is an effective selector. In Sass we can do it more flexibly. He has mixins, extensions, and placeholders (if you want to see the difference between them, I highly recommend reading this article). Let's take a brief look at how Sass works and compiles:

// sass @mixin bordered ($ color: # 000) {border: dotted 2px $ color;} .header {@include bordered;} .footer {@include bordered (# BADA55);}
// Compiled CSS .header {border: dotted 2px black;} .footer {border: dotted 2px # bada55;}
It looks almost the same as before, but if we look at the use case for the second placeholder:

// sass% bordered {border: dotted 2px # 000;} .header {@extend% bordered;} .footer {@extend% bordered;} // compiled CSS .header, .footer {border: dotted 2px # 000; }
This has two advantages. First, it does not compile the .bordered class name. Second, it uses a combination selector to merge the same styles, making the code more concise.

Configuration
Both LESS and Sass support variables. You can call these variables as the value of a property:

// sass
$ brand-color: # 009f0A; ... h1 {color: $ brand-color;}
This is a good feature, because you can store some important things, such as color or grid width, and store them in the same place. If you need to modify some code that does not change often, it will become very Easy.

Another good deal, you can use variable interpolation, as demonstrated below:

// sass @mixin border ($ side) {border-# {$ side}: solid 1px # 000;} .header {@include border ("left");} // compiled CSS .header {border-left: solid 1px # 000;}
Against the preprocessors
A preprocessor is a tool that you must use in a suitable environment. If you miss integrating it into your application, you also need extra coding.
If you don't want to clutter your code, you need to have an observation mechanism to monitor your files. If so, you need to run this monitoring mechanism at the beginning of each project.
Usually developers only see .less or .sass files, but what the output is very important. You may have well-written Sass code, but that doesn't mean that you will end up with good CSS code. There may be some specific issues, so you need to check the compiled version regularly.
Further reading
CSS Preprocessor
Sass Tutorial
How to Choose the Right CSS Preprocessor
CSS Preprocessors: Focused Decisions
Sass And LESS: An Introduction To CSS Preprocessors
Poll Results: Popularity of CSS Preprocessors
On CSS preprocessors
Understand the Power of Sass and Why You should use CSS Preprocessors
OOCSS & CSS Preprocessors (pt.1)
OOCSS & CSS Preprocessors (pt.2
8 CSS preprocessors to speed up development time
BEM
Using OrganicCSS: the best way to use CSS-

OK, I found a new fun tool. This preprocessor can save a lot of time, but it can't write good structure for you. First, I started thinking about a naming convention. Let's look at the following HTML tags:

<header
class = "site-header">
<div
class = "logo"> </ div>
<div
class = "navigation"> </ div>
</ header>
Ranch
May write the corresponding style:

.site-header {...} .logo {...} .navigation {...}
This style works fine, but it has a problem-reading CSS is difficult to understand. For example, the logo is part of the header. You may have another logo in the footer. Then a descendant selector will be added to control:

.site-header .logo {...}
But using these selectors is not a good idea, because it always depends on specific tags and structures. Once you move the logo outside the <header>, the style will be lost. Another approach is to add a site-header to the logo and rename it:

.site-header-logo {...}
It's great, it just explains it, but it can't be applied in all cases. For example, I want to use a Christmas version of the logo on Christmas Day 12. So I cannot write:

.site-header-logo-xmas {...}
Because my logic is to write a selector to match like a nested HTML tag.

BEM may address such situations. This means blocks, elements and modifiers, and some creation rules, you can follow these rules. Using BEM, our small example will become:

.site-header {...} / * block * / .site-header__logo {...} / * element * / .site-header__logo--xmas {...} / * modifier * / .site-header__navigation { ...} / * element * /
Ranch
In other words, site-header is our block. Then the logo and navigation are elements of this block, and the Christmas version of the logo is a modifier. Maybe it looks simple, but it is really powerful. Once you start using it, you will find that it can make your structure better. Of course there are reasons to object, because of its grammar. Yes, it may look a little ugly, but in order to have a good structure, I will prepare to make sacrifices for this. (For better reading please click here and here).

Further reading
BEM
BEM Methodlogy
A New Front-End Methodology: BEM
Maintainable CSS with BEM
BEM: The Block, Element, Modifier Approach To Decoupling HTML And CSS
What is BEM?
Thoughts About SCSS and BEM
OOCSS
Using OrganicCSS: the best way to use CSS-

Ever since I discovered BEM, I have been thinking about how to use my class names correctly. Perhaps my first thing to read is an article on object-oriented CSS. Object-oriented programming adds some abstract concepts, and CSS also supports such concepts. If you use a CSS preprocessor, you know more or less. As a person writing code, I find this concept is very close to my usual programming. Take JavaScript as an example, there are two main principles:

Separate structure and style
We use the following example to introduce:

.header
{background:
# BADA55;
color:
# 000;
width:
960px;
margin:
0 auto;
}
.footer
{background:
# BADA55;
text-align: center;
color:
# 000;
padding-top:
20px;
}
Ranch
Some of these styles are duplicates, and we can consider extracting these same styles in another class:

.colors-skin
{background:
# BADA55;
color:
# 000;
}
.header
{width:
960px;
margin:
0 auto;
}
.footer
{text-align: center;
padding-top:
20px;
}
Ranch
So we use colors-skin as an object for extension. This HTML template is modified like this:

<div
class = "header colors-skin"> ... </ div>
<div
class = "colors-skin"> ... </ div>
<div
class = "footer colors-skin"> ... </ div>
Ranch
There are several benefits to this:

There is a class which can be used multiple times
If you need to modify, you only need to modify one place
Remove duplicate code in CSS styles to make their files lower
Independent containers and content
The idea here is that each element should have the same style, no matter where it is placed. Therefore, you should try to avoid using selectors like the one shown below:

.header
.social-widget
{width:
250px;
}
Ranch
If you move the .social-widget outside the .header container, the width of the .social-widget changes. Especially the components used on the page. This is why I encourage CSS modularity and I strongly recommend taking more time to try it out. Personally, the following principles will make CSS better.

frame
If you open the OOCSS library on GitHub you can see a framework. Yes, this framework uses the concept of object-oriented, and his CSS has many excellent ready-made components. For a long time I didn't like frameworks. If you have used the framework at work, you will find it divided into two parts. In fact, you use the framework to do something, and you have to follow his rules. However I prefer to use some tiny frameworks. Of course I am not saying that I have to rebuild the wheel, but I always try to find a balance. Usually off-the-shelf solutions lead to chaos and complexity in the system. My suggestion is to build a specific thing for a certain purpose. If you try to cover something, you always think of something in the framework.

But, I highly recommend you to search for an OOCSS framework. This is a unique piece of knowledge and maybe it will fit where you need it. Such a concept was first proposed by Nicole Sullivan. If you have any intentions or ideas about OOCSS, you can
Come here to participate in the discussion.

Further reading
OOCSS
Object-Oriented CSS
An Introduction To Object Oriented CSS (OOCSS)
The Future of OOCSS: A Proposal
The flag object
CSS Performance and OOCSS
OOCSS, for Great Justice
Nicole Sullivan Talks OOCSS and Process
SMACSS
Using OrganicCSS: the best way to use CSS-

Another popular concept is SMACSS. SMACSS stands for Scalable and Modular CSS Architecture. Jonathan Snook introduced a style guide similar to this for CSS developers. For individual applications they are divided into the following categories:

Base: basic styles for a simple selector, such as clearfix
d Layout: Define the grid
Module: a group of elements combined to form a module, such as header and sidebar
State: Different states of the element. Define rules such as hide, hold, and expand to objects
Themes: more styles
I do n’t have any experience using SMACSS, so it is very popular and can actually promote you to have better ideas. This is stronger than the concept of a framework. So you don't need to follow any strict rules, classes or components.

Further reading
Scalable and Modular Architecture for CSS
SMACSS: Notes On Usage
An Introduction To SMACSS Guidelines For Writing CSS
Let "s Talk SMACSS, Man
SMACSS
Atomic Design
Using OrganicCSS: the best way to use CSS-

After knowing OOCSS and SMACSS, please allow me to find a proper metaphor. Please login to this page quickly. Here is a great atomic design concept. Its author is Brad Frost, as we all know, he is a well-known web developer dedicated to responsive design and mobile development.

The idea is very interesting. Here are some terms that we can say that the basic unit of matter is atom. Brad Frost said that our page is built with moving atoms. An atom can be:

<label> Search the site </ label>
Ranch
or

<input
type = "text"
placeholder = "enter keyword" />
Ranch
In other words, atoms are DOM elements that include some basic styles. Such as color, font size, or transition animation. Later these parts can be combined into components, such as:

<form>
<label> Search the site </ label>
<input
type = "text"
placeholder = "enter keyword" />
<input
type = "submit"
value = "search" />
</ form>
Ranch
So the form element contains several atoms. This abstraction brings flexibility, because we can use the same atom to build another molecule. This way, we can reuse the same form in different contexts:

Brad Frost did not stop. Biotopes are things that build molecules. Following the same approach, we can write the following structure and call it an organism:

<header>
<div
class = "logo">
</ div>
<nav>
<ul>
<li> <a
href = "#"> Home </a> </ li>
<li> <a
href = "#"> About </a> </ li>
<li> <a
href = "#"> Contacts </a> </ li>
</ ul>
</ nav>
<form>
<label> Search the site </ label>
<input
type = "text"
placeholder = "enter keyword" />
<input
type = "submit"
value = "search" />
</ form>
</ header>
Ranch
The second thing is the concept of templates. They are not directly related to chemical reactions, but are put into the context of the Web. Once we start combining our different creatures to build our template. Later these template forms were the pages we finally got.

You may have used a similar approach to building applications. However, the named thing brings good structure in a reasonable main form. In development, you and your teammates will have a lot of things to figure out. The separation of atoms and molecules is an important part because it improves productivity and allows you to better maintain your web applications.

Further reading
Atomic Design
The “Other” Interface: Atomic Design With Sass
Atomic Design: Some Thoughts and One Example
OrganicCSS
Using OrganicCSS: the best way to use CSS-

Two months ago, I wrote an article about Organic, a great little framework written in JavaScript. It is more like a design pattern and I personally like it very much. I even used it on several projects and everything went smoothly. If you are interested, I highly recommend reading this article.

When I read Brad Frost's article, I already had a similar concept, because I knew Organic. Brad does a great job, but I decided to learn more, or try to write a small framework based on atomic design concepts myself. I eventually chose Sass as a preprocessor and created a library of organic-css on Github.

Atoms
Let me start with the smallest part of the framework—atoms. Wikipedia is so defined that atoms are the basic unit of matter. In CSS, I think of it as a property and a property value, for example:

margin-top: 24px;
Ranch
Adding the class name directly just to write styles to add atoms, this is not what I want, if there is such a type:

body
{margin-top:
24px;
}
header
{margin-top:
24px;
}
Ranch
The preprocessor will lose its role because the result I want is this:

body, header
{margin-top:
24px;
}
Ranch
You can use the functionality of placeholders in Sass, for example:

% margin-top-24 {margin-top: 24px;} body {@extend
% margin-top-24;} header {@extend
% margin-top-24;}
So I had to use placeholder. It also means that I have to define a lot of placeholders to use it. At that moment, I decided that this framework would contain only atoms. Maybe there are some numerators and general functions, such as reset.css, grid definitions, and so on. I want to write something as a basic CSS development. Maybe I will see some patterns in the project, put it at the core, as a start, and keep it clean and simple.

Things became more consistent, and I created a mixin as an atom. As in this example:

@include define-atom ("block")
{display: block;} @include define-atom ("font-family")
{font-family: Georgia;}
Using this method, I created an atomic group, and it can be easily adapted for every project. You can click to view. I also use other frameworks as a comparison, which allows me to practice better and learn a lot from it. You can also make a mixin molecule that combines atoms together:

@mixin header {// <-molecule called "header"
@include atoms ((block, clearfix, font-family));}
Molecules
A numerator is a DOM element that needs style, but it has no child elements. Or if he has child elements, he will not be directly connected to it. For example, <img src = http: //www.webjx.com/css/ "logo.jpg" /> may be a molecule. If you have a hard time identifying these molecules on your page, just think about what is built from atoms. Some elements may also be atoms that build other molecules. Such as:

@mixin login-box {@include atoms ((block, font-size-20, margin-top-23, bold));}
We will face something very interesting. Let's say our body tag. What is he Is it a molecule or something? Of course, this requires some style, but generally contains other molecules in the atom. It should be something else. My conclusion is that CSS should be the main part, that is, if the body style requires a few atoms, then it is a molecule. This means that, theoretically, I should not attach any other molecules to it. This may seem a little unrealistic, but in most cases it will let you use different selectors, which will be a good sign of development.

Organelles (Organelles)
Once you realize that this DOM element is a molecule, then you can see it as an organelle. For example, a typical form element is a good example of an organelle that contains molecules like label, input, and textarea.

.login-form {@include label; @include input; @include textarea;}
These may be part of the box, which is tightly connected to the current application. Atoms and molecules may move between different items, and organelles are unlikely to move.

More abstractions
Many times you may want to put a few other things together so that the organelle becomes more abstract:

Atom → Molecule → Organelle → Cell → Tissue → Organ → Sys → Organism
This will face a choice question, how will you structure your CSS. I used OrganicCSS in only one project before, and so far I can say he is clear. I put different elements in their own directories and named them after them so that I can easily find them and deal with them accordingly. For example, if there is an organelle called a header, I just need to modify it to an o-header. Later, let me read the HTML tags, and I can see that the element's CSS style is in the organelle folder.

Further reading
Micro framework following atomic design.
to sum up
It was a very interesting journey. I don't know if I will use OrganicCSS in the future, but this is not the most important part. What I learn from the most important thing is. I knew I had to change our CSS development process and I did it. I think we should talk more about the framework of CSS. You can see that we have a lot of good resources. We have to find them and learn what they do and how they work. Only then can we decide whether to use them. Even better, when you see the whole picture you can create something more suitable for your needs.

Special statement: Many concepts in this article are also the first contact. I will translate this article. If there is something wrong, I hope it will not cause you misunderstanding. At the same time, I hope this translation can change the way you build CSS. Find out the best way for you or your team to use CSS. Finally, I hope that more friends can point to incorrect places in the text and share related resources (^_^)

Translator Sign Language: The entire translation is carried out according to the original line, and a little personal understanding of the technology has been added during the translation process. If there is something wrong with the translation, I would like to ask colleagues to give pointers. Thank you!

If you need to reprint, please indicate the source:

English original text: http://davidwalsh.name/startin