CSS Trends

Such as BEM, OOCSS, Css in JS, JS in Css, Utility First, Atomic Css, etc

  • BEM (block-element-modifier) : a CSS class naming method that uses link symbols to distinguish meanings.
  • Object-oriented CSS (OOCSS) : The object-oriented CSS abstracts CSS classes to achieve high reuse. Html-like table tags, such as Table, Caption, thead, Tbody, tfoot, etc., form a naming convention abstracted by function.
  • Css in JS: By coupling JS and Css, it is easier to trace back and avoid contamination by locking the scope, making it easier to use JS variables, modules, tree-shaking, etc.
  • Js in CSS: Implements the USE of JAVASCRIPT scripts in the CSS using the CSS Houdini.
  • Utility first: abstract a large number of tool classes, declarative concept to reduce the writing of CSS based on the way to manage the use of CSS tools, standardized, unified management, high reuse.
  • Atomic CSS: The extreme Version of Utility First provides lower granularity in addition to Utility classes, which can solve the problem of Utility First not being able to cover scenarios.

Atomic CSS is the essence of the concept

Through a large number of classes and CSS mapping, the CSS management into the CSS class management, only need to manipulate the CSS class, you can get related benefits, such as tree-sharking, CSS preload, customization, responsive design, etc..

CSS atomization related framework and design thinking

ACSS

  • Based on the idea of atomization, provides a large number of class utility functions, the following is a demo of some features used

    // Color
<div class="Bgc(#0280ae.5) C(#fff) P(20px)">
    Lorem ipsum
</div>


// Variables
'custom': {
    'brandColor': '#0280ae',
    'columnWidth': '20px'
}
<div class="Pos(a) Bgc(brandColor) W(columnWidth) H(90px)"></div>
<div class="C(brandColor) BdB Bdc(brandColor) Mstart(columnWidth) P(10px)">
     Lorem ipsum
</div>


// Responsive web design (RWD)
'breakPoints': {
    'sm': '@media screen and (min-width:700px)'
}   
<div class="Bgc(#0280ae.5) H(90px) D(ib)--sm W(25%)--sm"></div><! -- --><div class="Bgc(#0280ae) H(90px) D(ib)--sm W(25%)--sm"></div><! -- --><div class="Bgc(#0280ae.5) H(90px) D(ib)--sm W(25%)--sm"></div><! -- --><div class="Bgc(#0280ae) H(90px) D(ib)--sm W(25%)--sm"></div>
Copy the code

TailWind CSS(community and personal recommendations)

Recommended reasons
1. The design idea is based on the extension of the tool class, which solves the shortcomings of the tool concept. 2. Major editors have complete plug-ins to reduce the cost of useCopy the code
Take a quick look at some Daemos

  • responsive

    Default configured device resolution scheme

    Breakpoint prefix Minimum width CSS
    sm 640px @media (min-width: 640px) { ... }
    md 768px @media (min-width: 768px) { ... }
    lg 1024px @media (min-width: 1024px) { ... }
    xl 1280px @media (min-width: 1280px) { ... }
    2xl 1536px @media (min-width: 1536px) { ... } 
    <! -- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="w-16 md:w-32 lg:w-48" src="...">
Copy the code

  • The theme color

    <div class="bg-white dark:bg-gray-800">
  <h1 class="text-gray-900 dark:text-white">Dark mode is here!</h1>
  <p class="text-gray-600 dark:text-gray-300">
    Lorem ipsum...
  </p>
</div>
Copy the code

  • Interactive state

    Common ones are covered, such as hover, focus, active, etc

    <form>
  <input class="border border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent ...">
  <button class="bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50 ...">
    Sign up
  </button>
</form>
Copy the code

    In addition to the basics, there is some built-in support, such as Checked, which, when turned on, makes a radio or check box apply styles

    <input type="checkbox" class="appearance-none checked:bg-blue-600 checked:border-transparent ...">

Copy the code

  • Basic style

    Base styles can be customized to meet visual unity issues.

    @tailwind base; @tailwind components; @tailwind utilities; @layer base { h1 { @apply text-2xl; } h2 { @apply text-xl; }}Copy the code

  • Functional class

    In fact, this framework and most of the same, are to maintain a “single principle”, “combination of applications” a few points, the design of functional classes, but more introduction, interested in the community can refer to open source framework. Because if they land on the team, they’re going to have to be redesigned.

    <! -- Using utilities -->
<button class="py-2 px-4 font-semibold rounded-lg shadow-md text-white bg-green-500 hover:bg-green-700">
  Click me
</button>

<! -- Extracting classes using @apply -->
<button class="btn btn-green">
  Button
</button>

<style>
  .btn {
    @apply py-2 px-4 font-semibold rounded-lg shadow-md;
  }
  .btn-green {
    @apply text-white bg-green-500 hover:bg-green-700;
  }
</style>
Copy the code

  • Functions and instructions

    Because the idea of atomization is a refinement idea, there are a lot of classes, so if you manage those classes and make them efficient for developers to use. The answer is to create a set of functions and instructions that encapsulate the details of relevant operations to improve developer efficiency and ease of use.

    • Tailwind – Introduces encapsulated classes
    @tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind screens;
Copy the code
    • Apply-inline function classes, used in combination.
    .btn {
  @apply font-bold py-2 px-4 rounded;
}
.btn-blue {
  @apply bg-blue-500 hover:bg-blue-700 text-white;
}
Copy the code
    • @layout – Sets the encapsulated classes
    @tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @applytext-xl; }}@layer components {
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4rounded; }}Copy the code
    • IPhone – variants will follow
    @variants focus, hover {
  .rotate-0 {
    transform: rotate(0deg);
  }
  .rotate-90 {
    transform: rotate(90deg); }}/* output */
.rotate-0 {
  transform: rotate(0deg);
}
.rotate-90 {
  transform: rotate(90deg);
}

.focus\:rotate-0:focus {
  transform: rotate(0deg);
}
.focus\:rotate-90:focus {
  transform: rotate(90deg);
}

.hover\:rotate-0:hover {
  transform: rotate(0deg);
}
.hover\:rotate-90:hover {
  transform: rotate(90deg);
}
Copy the code
    • @responsive – A statement
    @responsive {
  .bg-gradient-brand {
    background-image: linear-gradient(blue, green); }}/* output */
.bg-gradient-brand {
  background-image: linear-gradient(blue, green);
}

/ *... * /

@media (min-width: 640px) {
  .sm\:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
  / *... * /
}

@media  (min-width: 768px) {
  .md\:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
  / *... * /
}

@media (min-width: 1024px) {
  .lg\:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
  / *... * /
}

@media (min-width: 1280px) {
  .xl\:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
  / *... * /
}
Copy the code
    • @screen – Media queries that reference breakpoints
    /* normal responsive screen css */
@media (min-width: 640px) {
  / *... * /
}

@screen sm {
  / *... * /
}
Copy the code
    • Theme () – Gets the theme configuration value
    .content-area {
  height: calc(100vh - theme('spacing.12'));
}
.content-new-area {
  height: calc(100vh - theme('spacing [2.5]'));
}
.btn-blue {
  background-color: theme('colors.blue.500');
}
Copy the code

CSS atomization framework use cases

In fact, atomization has been proposed for a long time, about 18 years ago, but there is a lack of practical endorsement from large companies, so the community is not enthusiastic about it. Due to the inherent lack of CSS design in React, more CSS concepts and practices will benefit react projects, such as CSS in JS and Utility First.

*2020.04.27 – Facebook reconstructs the case using Atomic CSS

The Facebook team incorporated CSS-in-JS based on the concept of Atomic CSS and then reengineered the Facebook project to reduce CSS size by 80% (413KB -> 74KB). With the endorsement of international major manufacturers, Atomic Css is once again in the public eye. If you have played vite, you will find community templates, many of which are standard TailwindCss.

Based on this case, some optimization was selected for analysis and interpretation.

Analysis and optimization:

  1. Volume optimization, reduced by 80%
    • Cause 1: Class-based management makes the CSS highly reusable. Discard unused CSS by tree-sharking the class.
    • Reason 2: The mapping between classes and CSS is fine enough that it is optimal to load only one base CSS.
  2. Reactive is more controllable
    • Utility First based on the concept of tool unity, constraints global responsive specification.
  3. Multiterminal reuse
    • For mobile terminals, rem units are generally used, through internal conversion only, you can make a set of CSS configuration, suitable for multiple terminals.
  4. Theme color, dark mode
    • Global changes can be made very quickly by directly modifying the mapping of the class.
  5. Improve project quality and reduce risk of failure
    • Because the style is set by class, as long as you delete or modify the HTML template, the class will change together, avoid HTML modification, forget to modify CSS, resulting in visual accidents.

Analyze the pros and cons

features advantages disadvantages
Based on the concept of instrumentalization Based on the concept of instrumentalization, maintenance iterations and style increments are gradually slowed down at the end of the project. It costs a lot to start with, so you have to know what kind of tools there are to learn how to use them, right
Constrained global specification Make the overall visual design consistent, provide multi-end adaptation ability, reduce the later maintenance cost. By limiting personalized customization styles, fancy styles increase style redundancy, force out tools, and increase development costs.
CSS class Reduce the risk of maintaining styles and templates at the same time, and solve the problem of naming difficult development. Class name increase, subjective visual ugly
Clear useless styles Reduce packing volume Unable to use dynamic concatenation class names
A large number of base classes are provided Can be composed to meet business scenarios, avoiding the need to write a large number of utility classes Because of excessive subdivision, Chrome checks the style and is more troublesome. (DevTools can do this)

TailwindCSS basic implementation ideas

The paper

  • TailwindCSS is essentially a plugin for Postcss (Postcss is a tool for CSS transformation)
  • Since it is a Postcss plugin, the underlying layer depends on Postcss, so how many versions of Postcss your project supports will directly affect the larger version of your tailwindcss. As of June 2021, there are three versions of V0, V1 and V2 at present. I recommend V2 because of its flexibility and expansibility.

Implementation approach

Around a few major features, look at the implementation, to avoid boredom, the features of a simple feed, do not read the source code.

  • According to the need to pack

    1. With the help of PurgeCSS string matching, through a regular / [^ < > “‘ ` \ s] * [^ < >” ` \ s:] / g screening

    2. Remove unused utility classes generated by yourself and styles introduced through syntactic sugar, such as @Layout

    3. By leveraging PurgeCSS capabilities, and thus exposing PurgeCSS directly, developers can manipulate the matching mechanism directly by learning PurgeCSS.

  • Custom Configuration

    1. Source directory, a stubs folder, there are three files, one is defaultConfig respectively. The stub. Js, defaultPostCssConfig. The stub. Js, simpleConfig. Stub. Js

      export const defaultConfigStubFile = path.resolve(__dirname, '.. /stubs/defaultConfig.stub.js')
export const simpleConfigStubFile = path.resolve(__dirname, '.. /stubs/simpleConfig.stub.js')
export const defaultPostCssConfigStubFile = path.resolve(
  __dirname,
  '.. /stubs/defaultPostCssConfig.stub.js'
)
Copy the code

    2. All relevant configuration is stored uniformly and then fully exposed to the caller.

  • Utility Class (Utility-first)

    1. Categorize by style functionality

    2. Then, using its function and instruction ability, the combined output corresponds to the class map

    3. The compiler does the corresponding output conversion

    4. Source directory SRC /plugins

  • Syntax sugar for instructions and functions

    Here you write rules for instructions and functions, and then you compile them with PostCSS for checksum processing.

other

  • If you are interested in Postcss plug-in writing, you can see the source code, the whole directory structure is very clear, and the entry file writing, is very standard Postcss plug-in style, after learning can improve a certain coding quality.
  • For open source code, it is mainly purposeful to see. The first step is to find modules through commit and directory structure, and then sort out the general process by analyzing dependencies and naming related functions, and then review problems and refine corresponding details.

conclusion

From macro to micro form, gradually understand the learning concept and framework, concept is very metaphysical, there is no way to ensure that everyone agrees with, it is a kind of expansion of thinking, is also good. If you’ve got something wrong, please point it out. Peace and Love, with warmest greetings.