Interviewer: How do you organize your CSS code?

A: Write the class name first, then the style.

He died at 18.

Using this interview question, we will see how many CSS management methods there are.

Write an outline first:

  • Buddha player, copy and paste a shuttle.
  • The namespace
  • Namespace + BEM specification
  • CSS module
  • css in js

Scheme 1. Namespace + BEM specification

How it works: Force an outermost namespace around the bottom style. A.less

.componentA { .title { color: red; } .des { ... }}Copy the code

B.less

.componentB { .title { color: red; } .des { ... }}Copy the code

The style name follows the BEM specification, allowing the maintainer to distinguish nesting on the DOM from the class name. Easy maintenance, the following code:

.componentA {
    &__title {
        font-size: 14px;
    }
}
<div class="componentA">
    <h1 class="componentA__title"> Component A title</h1> </div>Copy the code

This scheme is suitable for composing component library. As a canonical BEM, it is easier for users to use. But in a large business, if we only use the BEM + namespace to control the non-overlap of styles, we are not going to be able to do that. You can’t start every requirement by looking up how many namespaces there are. Maintenance becomes difficult.

Therefore, based on this scheme, two CSS management schemes are extended

  • Solution 2: CSS in JS
  • Solution 3: CSS Modules

Solution 2: CSS in JS

Writing CSS using JS is currently popular: styled- Components. The syntax is as follows:

import React from 'react';
import styled from 'styled-components'; Style = styled. H1 'font: styled; text-align: center; color: palevioletred; `; <Title> Hello World, this is my first styled component! </Title>Copy the code

Emmm is a matter of opinion. If you like it, try it. The author does not adopt this approach, preferring the separation of JS and CSS. No practice has no right to speak, so I will not repeat it.

Scheme 3: CSS Modules

Principle: Use webPack and other building tools to automatically convert class names into parts. Detailed configuration: webpack.docschina.org/loaders/css… For example, to configure the style name rule:

{
    loader: 'css-loader',
    options: {
          importLoaders: 2,
          modules: isModules,
          localIdentName: '[name]__[local]__[hash:base64:5]'}}Copy the code

The code is as follows:

import React from 'react';
import style from './App.css';
export default () => {
 return (
   <h1 className={style.title}>
     Hello World
   </h1>
 );
};
Copy the code

In the app. CSS

.title {
   color: red;
}
Copy the code

However, this approach has many limitations, such as the following: Whenever you construct the class name, you must use the styles object. Mixing CSS modules and global CSS classes is cumbersome. References to undefined CSS modules resolve as undefined without warning.

Based on the above problem, react has a plugin called react-CSs-modules. It lets you write styleName or className directly to distinguish between local class names and global class names. And solve all the above problems.

<div styleName="lock-item" className="lock-global"> Teacher list </div>Copy the code

After the CSS is compiled, className generates the corresponding name according to the configured rules.

As you can see, className does not generate the corresponding className according to webpack configuration, styleName does. When writing styles, it is also convenient to use :global and :local to distinguish global styles. :local is injected by default, so you only need to specify global styles.

.lock-item {
   line-height: 24px;
   margin-bottom: 8px;
}

:global .lock-global {
   color: red;
}
Copy the code

Configure babel-plugin-react-css-modules as follows:

At this point, let’s summarize the above:

  1. Namespace scheme to write component libraries using the BEM specification + namespace scheme. In this way, there is a specification for third-party calls and the style name does not change every time the package is packaged.

  2. CSS in JS/CSS Module Solution CSS Modules or CSS in JS are used in large business scenarios. After all, the best way to solve a problem is to let the tools solve it. We can’t go to diff everywhere and control everyone’s style names from colliding.

Ok, after reading the above content, you can probably answer the interviewer’s soul question. Go back in time and start all over again.

  • Interviewer: How do you organize your CSS code?
  • A: Different scenes. When writing a common component library, use the BEM + namespace… 2….
  • Interviewer: So in the CSS Module, how do you deal with the introduction of third-party library styles?
  • A: CSS Modules have options to enable and disable modules. For third-party library styles, turn off the Module option. The configuration is as follows:

  • Interviewer: If you have a scenario based on ANTD that encapsulates a component style library in your own company’s style. How do I ensure loading after ANTD style?
  • A: Because csS-loader actually generates the corresponding class name, we also need to insert the HTML according to the style-loader, so we can control the order in which it is inserted. Control the insertion sequence of the CSS according to the configuration information in the document. Can control the loading sequence.

Of course, there are many alternatives to these two approaches. The CSS management scheme is not unified in the industry. Everyone is in a situation where I’m trying to convince you, you’re trying to convince me. However, anything that solves a problem is a good tool

  • Close reading using CSS Property Selectors
  • Close reading please Stop csS-in-JS behavior

Use the interview scenario to consolidate your knowledge. Learn the various ways to gracefully manage CSS. Hope to help you ~

  • Welcome to pay attention to “front-end plus”, seriously learn front-end, do a professional technical people…