Some suggestions for writing CSS

Javascripty has embarked on the road of Engineering, various MVM,MVVM framework has been dizzying, here is not to discuss JS. I would like to write some of my experience in the actual work of CSS, of course, many people have summed up such experience, I said certainly no which Daniel write good, I just simply put their work experience to share with you.

工欲善其事, its prerequisite

When writing CSS, you need at least one development tool, whether it's sass, or less, essentially the same, except that the syntax is a little different. If you are still in pure handwriting css, then please understand them as soon as possible and choose one of them according to your own habits and use them. Personally, I prefer sass, more in line with my writing habits. A lot of people like less, they think less grammar is more convenient.

What sass/less?

SASS (less) is an extension of CSS3, which adds rules nesting, variables, blending, selector inheritance, and so on. Convert it to standard, well-formed CSS code by using the command line tool or the Web framework plugin.

Why do I need sass/less

As a development tool, they provide many convenient writing, greatly saving the designer's time, make the development of CSS, become simple and maintainable.
They are also the cornerstone of writing modular, maintainable CSS.

How to use the

Online tutorial on Sass/less A lot of, I do not waste space to write basic grammar.
can go online search, they are similar, learned a basic can be used:

The following content I use Sass example, the content is not limited to sass,less also applies!

God says, no rules inadequate surrounding area

Yes, no rules. Inadequate surrounding area, you need to know a CSS naming convention or develop your own specifications (not recommended for customization, not conducive to teamwork);

Why do we need a naming convention?

When you write a lot of CSS, you find that there is no valid naming convention that will make you miserable. This is especially true if you are in a slightly larger project, or in a collaborative development process with others. Because when you name the CSS you will find that the name is used elsewhere, or your teammates have already used it, you have to rename it. Over time, the name of the CSS will be messy and smelly and long, a glance to see the meaning of the name can not be guessed.

BEM Naming conventions

A variety of naming norms are the same, benevolent see, here I introduce the BEM naming specification, I introduce is not necessarily suitable for you, you need to think about what naming norms for their own.

Bem is a CSS Class naming method presented by the Yandex team, designed to better create css/sass modules.

Bem means blocks, elements (element), modifiers (modifier).

Block: Can be understood as an area, a component or a block-level element, how to distinguish between the need for specific analysis according to the actual situation;

Block__element: is an element in the block above, such as navigation (Nav:block) has a tag (a:element) is an element, block and element using two underline links;

Block__element–modifier: My understanding is state or attribute. For example, in element a tag, it has active, hover, normal three states, these three states are modifier. Midifier is connected using two "–" Horizontal lines

In the example above, I use the actual code to illustrate the following:

<!--HTML structure--><nav class= "nav" >  <a href= "#" class= "Nav__item nav__item--active" > current page: Active </a>  <a href= "#" class= "Nav__item nav__item--hover" > Assuming the mouse is here to add hover class</a> the  href = "#" class= "Nav__item nav__item--normal" > Assume that you need to add a Normar state </a></nav>

Sass notation. nav{  &__item{    &--active{      <!--active Style--    }    &--hover{      <!- -Hover style--    }    &--normal{      <!--Normal style  --}}}

/* Compiled CSS */.nav{}.nav__item{}.nav__item--active{}.nav__item--hover{}.nav__item--normal{}

From the above example can be a glance at the meaning of CSS, and the compiled CSS does not have any nesting, but the structure of sass is very clear, at a glance.

Thus, the use of sass with BEM can write a readable, maintainable, modular code;

God says, I don't know you.

A readable sass must have a description, a file, and a function that requires a description.

For a sass file, you need to specify at least two points whether the sass is public or private and which part of the page

@charset "Utf-8"/** predefined function * author:xxx* time:xxxx-xx-xx*//** Clear float * use: @include clearfix (); * author:xxx* time:xxxx-xx-xx */@mixin Clearfix () {  *zoom:1;  &:before,  &:after {      content: "";      display:table;  }  &:after {      clear:both;      Overflow:hidden;}  }

God says the world must be unified

Reset

CSS reset is essential, there are many CSS reset code on the Web, Compass also has reset module, only need to @import "Compass/reset". If you feel that the code is too redundant and too much, you need to at least make sure that your CSS has a margin and padding reset so that the CSS in each browser will have the same style.

*{  margin:0;  padding:0;}

Spacing/Line spacing/margins

Font size

Color

Level

Height

......

Why do I need variables

Use a separate variables, the benefits are many, the biggest long-time is maintainability, who use who know!

Maintainability

When you are finished, give the designer acceptance, the designer said here is not good, change the color! --Nothing, I'll change the variable!

Product said, here is not good, list spacing is too big, small screen only show a little bit! --Nothing, I'll change the variable!

Come on, the product says we're going to change skin! --Nothing, I redefine a variable!

......

These examples will give you a sense of how important it is to have a variables. In fact, these are only benefits in terms of maintainability. As a front-end, we are the closest to the user's engineers, we can not just stay at the code level, more need is to stand in the perspective of user experience, and variables can let us have a set of specifications, ensure page consistency

Consistency

Fe is user-oriented and we need to be accountable to users. Designers in the design of the page, not all the pixels are very accurate, not every time the color is no error. So at this time, it is necessary to standardize, if the designer does not have norms, then we make a set of norms. For example:

On the same project, the list height of one page is 20px and the other page is 21px, so we don't have to bother to develop it directly using the list height we defined earlier.

On the same page, there are two error colors #dc4c4c and #d84a4a, and we do not need to ignore the use of uniform error color variables;

These are the details of the user experience, and a copy of the variables allows us to keep the page consistent.
This is just a slight mention of the user experience, and I'll write a "user experience that front-end engineers must focus on" to explain the user experience in detail.

Module (modular, based on sass/less)

Modularity is often heard in JS, and for CSS, modularity is equally important for legibility and maintainability. So how to do modularity?

Multiple folders

Create multiple folders, classify and store sass files. For example: variables, mixin, public style, private style into multiple folders to store;

Multiple files

The sass of the same folder can be divided into multiple files by module, function and so on, and finally imported with @import

This is a bit rough, let me give an example (the Sass file starting with an underscore will not compile a separate CSS file)

--sass  --config                //Basic variable  --mixin                 //function  --common                //Public    --header    --aside      --_ List.scss      --_nav.scss      --_base.scss  --compoment             //Component style    --dropdown    --lightbox  --page    --index//               home      --_ad.scss           //Advertising style      --_content.scss      //content information      --_info.scss         //Personal information style      --_base.scss         //index style, @import ' ad '; @import ' content '; @import ' info '    ; --write                   --preview              --_aside.scss       //preview page unique sidebar    --about  --main.scss             //Import the desired style, Eventually generate a main.css

As shown above, the directory structure, can let people at a glance sass the structure of the directory, maintenance can quickly and accurately find files.
If you are a multi-page project, you can also maximize code reuse, and you can export common styles, use the cache to increase loading speed, without repeating the same code for each page.

Note: The public style of the common folder must be a common style for other pages, and if some pages have special styles, you should extract the overlay CSS and import different private styles in the page.

Qualifying using styles based on naming conventions

For example, the preview page has a private aside style, which can be written in the preview _aside.scss:

@charset "utf-8"/** preview page Sidebar * author:xxx* time:xxxx-xx-xx*/@import ' ... /.. /common/aside/base '. preview{  . aside{//    CSS */    &__item{/      * CSS */    }}  }

It is important to note that CSS overlays can cause re-rendering and affect performance.

