“This is the sixth day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Today I study the history of the front-end to talk about the evolution of the web UI development technology, this article according to the following structure:

  • Problems exposed by beginners in CSS
  • Modern popular front-end UI library introduction
  • Take a library source code as an example to analyze the advantages of this library design

Problems exposed by beginners in CSS

General beginners are familiar with the basics of CSS such as display, position, box-shadow, border, transition, animation, and @media Common HTML tags can be used to create static web pages. The first problem beginners encounter when writing a web page for the first time is that naming is hard.

When you haven’t worked with any CSS frameworks, it’s easy to create your own stylesheets that are poorly named and difficult to maintain. This time pull out the CSS code I wrote out the first time to whip the corpse. See github for the source.

Put a rendering of one of the pages

Without commenting on the UI design, can we criticize CSS

body {
    background-image: url(../images/bg1.png);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100%;
    margin: 0;
    width: 100%;
    height: 100%;
    font: 16px Arial, sans-serif;
    background-color: #fff;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative; }...#wrapper {
    min-height: 650px;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#list {
    position: fixed;
    left: 0;
    background-color: rgba(10.10.10.0.6);
    width: 300px;
    height: 100%;
    padding: 10px;
}

#list> * {font-size: 20px;
    padding: 10px 30px;
}

form {
    padding: 30px 50px;
    text-align: center;
}
Copy the code
  1. Using id selectors means losing reuse. A sensible design is to reuse CSS rules as much as possible. We should follow the principle of using class selectors in preference to never using ID selectors.
  2. The other problem is semantic.#listIn this project it is used in the sidebar navigation bar, preferably with a name that reflects the concept of the sidebar, such as.nav-asideInstead of usinglistSuch a generic name;
  3. Another thing is the abuse of fixed positioning, and the reason I’m using fixed positioning here is so that when the content on the right scrolls, it doesn’t affect the left sidebar. Fixed positioning creates a stacked context, out of the flow of the document. In order not to overlap the content on the right side with the content on the right side, you generally need to control the left margin of the content on the right side. I used flex layout to center the content on the right side and stagger it with the content on the right side. Obviously, this is very cheap, and a better design would be to use flex layout to have the sidebar and the right side of the page displayed side by side, with the width and height fixed, and the right side of the page setoverflow: auto.

Modern popular front-end UI library introduction

So, in order to write cheap style as little as possible, we should follow the industry popular writing method, the best way is to learn the mature component library source, now to introduce a few front-end UI library.

  • bootstrap
  • tailwind
  • element ui
  • naive ui
  • iview
  • antd
  • csslayout

bootstrap

Bootstrap is the first style framework I learned. It is a responsive and movement-first UI framework. Its naming system is excellent, such as. The current tailwind atomization of CSS concepts can be seen in Bootstrap. Bootstrap allows you to learn how to define a highly reusable class selector, how to use @media query to apply different styles to different viewport sizes, how to use dataset and JS to expand/hide the navigation bar multi-level menu, open and close the modal box

tailwind

Tailwind takes the concept of atomized CSS a step further by defining class selectors that are very fine-grained, with the expectation that you won’t need to write additional CSS rules. The selectors provided by combinatorial Tailwind can be adapted to most usage scenarios and are highly customizable. Working with popular component-based frameworks such as VUE and React improves the efficiency of writing custom components.

element ui

This is a UI component library for VUE. The components have a clean visual effect and integrate form validation, date selection, timeline and other practical functions. Because it is a component library built on VUE, you can learn from the element UI source code good practices for a mature framework for developing components using VUE.

iview

Like Element UI, which is a component library for the VUE technology stack, IView also offers a professional version of iView Admin Pro, an enterprise-level back-end front-end solution that requires a license.

naive ui

Is still a vUE based component library, this is vUE official recommendation, its technical documentation is quite interesting.

antd

If Element-UI, ivew and naive- UI are the best tools for VUE development, ANTD is a boon for developers using the React stack. Its position on the official website is as follows:

Antd is a React UI component library based on Ant Design system, which is mainly used to develop enterprise-level middle and back-end products.

csslayout

Csslayout is not strictly a library, but a demo collection of popular and common CSS layouts and patterns. You don’t need to add a new library to your project, just visit the CSslayout home page, where we can find out what you want from the preview images. Click in to see the CSS implementation paradigm, and you immediately know how to implement this effect. In addition, csslayout’s selector naming uses the BEM specification, which defines a component-related class by module name __ element name — modifier format. This naming convention is also worth learning from. Can be a good solution to the problem of naming really difficult.