preface

In fact, I have wanted to write something for a long time. Since my sophomore year, I have been in a pit for more than 4 years. When you enter the front end, you are still a cutout. What is a cutout? Back then, when the front and back ends were unseparated, jquery was still 1.x, and PHP was still the most popular language, all you had to do was restore the design to a static page and leave the replacement in the appropriate place, and then you could hand it over to the back end to handle the release. It was really quite happy, without so much fuss.

At that time, many front-end UI libraries were popular in the market, such as the most famous One, Bootstrap. At that time, I came into contact with a project of Bootstrap with a large number of redundant class names, so I had a mental shadow of Bootstrap all the time (IT was a headache to face a large number of CSS classes without knowing what the meaning was).

ideaSluckyUI

Write an easy to remember, easy to use, easy to develop and other characteristics of the efficient UI library, which the UI library is subdivided into style library and component library, hoping to decouple the style layer so that it can be more flexible in the face of complex requirements.

The UI library incorporates good examples, such as bootstrap naming and optimization, and good ideas and practices.

This UI library is called SluckyUI, a reference to Small-Lucky, and hopefully will make you feel a little lucky.

To the extent desired

Style should be decoupled from JS as far as possible. Js is not used where style can be used to solve the problem, so that style writing is no longer a burden. At the same time, it has a certain cross-platform nature, which reduces the burden of frame switching and enables developers to focus on business logic.

For example, a button can be controlled by style directly, so it is ok to integrate the style of common parts, not necessarily as a component.

Identify the style library specification

The style aspect will be managed using SASS

The namespace

Namespaces are an important foundation of a style library, best known for BEM naming. However, using BEM naming is not enough to satisfy all the requirements. In the end, you will find that the HTML is full of strings that are difficult to remember, which will pose a great challenge for subsequent maintenance. Our naming needs to meet the requirements of easy to remember, concise, easy to use, specification, we will use the style class into the following general categories.

Basic styles – Ability to visually express desired styles

The basic style of this type is the style we usually use the most, where the layout needs to be used, attribute and value are very important, without either, otherwise it will seriously affect the readability, so the use of this shorthand for attribute and value naming way.

.pt16{
    padding-top:16px;
}

.ta-c{
    text-align:center;
}

.d-f{ display: flex; }...Copy the code

Functional styles – Special constructs or some hack styles

This style encapsulates a function as a class, but when the function cannot be named in the basic style, it is best to use the corresponding function name.

Ellip {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } // the slider appears. Limit-screen {max-height: 700px; overflow-y: scroll; }Copy the code

State styles – Styles that refer to component states, such as success, failure, and default states

The state style consists of attributes/modules + states, and our focus is something & Status

{color:green; color:green; } .c-fail{ color:red; } .bg-warn{ background-color:yellow; } // For multi-state situations, refer to the BEM rule. Color - warning state - black {... } .c-hint-b{ color:# 666;}. Color - Success status - green {... } .c-success-g{ color:green; }Copy the code

Module style

For highly customized modules, use the BEM name

Checkbox-box-normalize {// For example, the custom checkbox-style module (sass for convenience).checkbox-box-normalize {... & .checkbox-hook { ... } & input { ... } & label { ... }}Copy the code

Combination style

One or more of the above styles, but this is rare, for example, the function style class. Square, we usually have several different sizes of square, so we can name these heterogeneous classes according to the size, like. Square36,. Square72,. Square96, etc

Identify the component library specification

This is only a rough summary, which will be covered in the Re From Scratch Efficient React+Redux Project Architecture. Our UI library will focus on display layer components for now.

Display component

Display layer components, which are most reusable and least coupled to the business. Receive the data provided by the data component and focus only on the UI and interaction.

Data component

Data layer components, which are closely associated with business, have low reusability in projects, but have good reusability among projects. For example, common login business can be packaged into a component for use in different projects.

Highorder component

Higher-level components, which map data layer components to display layer components, act as connections.

At the end

Within the scope of the norms of thought can be constantly added to the building. Components and documentation that have been cleaned up have been updated on SluckyUI, and there may be some better implementations or modifications that need to be made, which will be updated and maintained over time.

Here is the plan for this series

  • Re from scratch UI library authoring life specification
  • Re from scratch UI library writing buttons for Life
  • Re writing forms for Life from scratch UI Library
  • Re from scratch UI library writing life table
  • Re from scratch UI library writing life loading progress bar
  • Re from scratch UI library writing Life pages
  • Re from scratch UI library to write life’s menu navigation bar
  • Re from scratch UI library writing life messages popover
  • Re writing life step Manager from scratch UI library
  • Re writing Life’s Bread Crumbs from scratch UI Library
  • “Re from scratch webpack4 practical to full practice”
  • Efficient React+Redux Project Architecture from Scratch
  • Re back-end learning configuration for Ubuntu+Ngnix+Nodejs+Mysql environment from scratch