From the very beginning of the internet, when people started creating websites, its purpose was simply to transmit content and perform a certain function. Then it is important that the website performs its function well, but in terms of the interface, not pay much attention to.

Look at the interface of Google and Facebook when it first appeared

"Honours change manners" is not wrong, when people can create websites capable of performing complex functions, the "important" thing now is how to increase the interaction between the website and the user, especially the visual part, is still optimized, the ability to maintain and expand later.

In the usual way, each website will be calculated in units of pages (page), that is when we talk to customers about creating a website for them, the content of the story will revolve around the problem:

• This website has how many pages
• On each page there are how many components are displayed

After the design drawing is accepted, the back-end will be the one to "process" it first by building markup for the pages, then the front-end will take over and style it to match what the design loves. bridge.

But things have changed since the concept of "Style guide" was born

At this point, the unit for determining the time to complete a website has been changed to "component", because in fact, each page is a combination of many components together and sometimes multiple pages can be used. the same component. It is redundant if you have to do these components over and over for each page.

Imagine the component is a fashion item, it can be a white shirt, a Rolex watch, a pair of jeans ... every page is created like you choose the right outfit by combining items. fashion items together. For example when going to a party: you could use a white shirt, combined with casual pants; You can also wear shorts and a white shirt when going to a seminar.

You can completely break down components into smaller components to facilitate management and use of nested in different cases, the lowest level mentioned is the HTML element level, for example: a tag, heading from H1 to H6, the elements of the form: button, textbox ...,

In short, the style-guide is the place where front-end developers can show customers how everything on their website looks: from HTMl elements, to header, footer, components and pages without any back-end contribution, the markup used at all times is entirely determined by the front-end dev. The client absolutely has all the necessary things to test the website's interface, when there is a design change, the front-end person simply changes back in style-guide and the customer can check directly. Back-end dev's job is simply to focus on building the data structure and calling the data through the api to pass in the template that the front-end has defined!

Hopefully after this article, you will somehow grasp the concept of Style-guide, please read the next article titled "Style-guide, how is programming oriented?" to understand more details on this fascinating subject!