Душа интервьюера спрашивает: как вы организуете и управляете своим кодом CSS?
A: Сначала напишите имя класса, затем стиль.
Умер в возрасте 18 лет.
С этим вопросом интервью давайте поймем, что существует несколько способов управления CSS.
Сначала напишите план:
- Игроки природы будды, скопируйте и вставьте шаттл.
- Пространства имен
- Пространство имен + спецификация БЭМ
- CSS module
- css in js
Сценарий 1. Пространство имен + спецификация БЭМ
Принцип: Принудительно добавьте самое внешнее пространство имен, чтобы обернуть нижний стиль. Меньше
.componentA {
.title {
color: red;
}
.des {
...
}
}
B.less
.componentB {
.title {
color: red;
}
.des {
...
}
}
Имя стиля соответствует спецификации BEM, позволяя сопровождающим идентифицировать вложенность в dom по имени класса. Для удобства обслуживания следующий код:
.componentA {
&__title {
font-size: 14px;
}
}
<div class="componentA">
<h1 class="componentA__title">组件A的title</h1>
</div>
Эта схема подходит для написания библиотеки компонентов. Как канонический БЭМ, его проще использовать пользователям. Но если в огромном бизнесе, если мы будем использовать пространство имен БЭМ+ только для управления стилями, чтобы они не перекрывались, это будет немного не в порядке.Вы не можете проверить, сколько пространств имен у вас есть в настоящее время, каждый раз, когда вы запускаете требование. Уход становится затруднительным.
Поэтому на основе этой схемы были расширены две схемы управления УСБ.
- Вариант 2: CSS в JS
- Вариант 3: CSS-модули
Вариант 2. CSS в JS
Используйте язык js для написания css, в настоящее время наиболее популярный: styled-components. Синтаксис следующий:
import React from 'react';
import styled from 'styled-components';
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
<Title>
Hello World, this is my first styled component!
</Title>
эммм, доброжелательный видит благожелательность, а мудрый видит мудрость. Если вам нравится этот способ, вы можете попробовать его. Автор не принял эту схему, предпочитая ощущение изоляции между js и css. Без практики нет права говорить, поэтому не буду вдаваться в подробности.
Вариант 3. CSS-модули
Принцип: используйте инструменты сборки, такие как webpack, для автоматического преобразования имен классов в локальные. Подробная конфигурация:Webpack.doc — это China.org/loaders/CSS…Например, чтобы настроить правила имени стиля:
{
loader: 'css-loader',
options: {
importLoaders: 2,
modules: isModules,
localIdentName: '[name]__[local]__[hash:base64:5]'
}
}
код показывает, как показано ниже:
import React from 'react';
import style from './App.css';
export default () => {
return (
<h1 className={style.title}>
Hello World
</h1>
);
};
в app.css
.title {
color: red;
}
Однако этот метод имеет множество ограничений, а именно: Всякий раз, когда вы создаете имя класса, вы должны использовать объект стилей. Смешивание модулей CSS и глобальных классов CSS обременительно. Ссылки на неопределенные модули CSS разрешаются в неопределенные без предупреждения.
Основываясь на приведенном выше вопросе, у реакции есть плагинreact-css-modules, Это позволяет вам писать styleName или className напрямую, чтобы различать, является ли это именем локального класса или именем глобального класса.И все вышеперечисленные проблемы решены.
<div styleName="lock-item" className="lock-global">
老师列表
</div>
Скомпилированный CSS, classname генерирует соответствующее имя в соответствии с настроенными правилами.
Как видите, className не будет генерировать соответствующее имя класса в соответствии с конфигурацией webpack, а styleName будет. При написании стилей также удобно использовать :global и :local, чтобы различать глобальные стили. :local вводится по умолчанию, поэтому вам нужно только отметить глобальные стили.
.lock-item {
line-height: 24px;
margin-bottom: 8px;
}
:global .lock-global {
color: red;
}
Настроено в модулях babel-plugin-react-css следующим образом:
На данный момент мы резюмируем вышеизложенное:
-
схема пространства имен Библиотека компонентов написана с использованием схемы спецификации БЭМ + пространства имен, таким образом, когда третья сторона вызывает, есть спецификация, о которой можно говорить, и имя стиля не будет меняться с каждой упаковкой.
-
css в решении модуля js/css Используйте модули css или css в js в сценариях крупного бизнеса. В конце концов, позволить инструментам решать проблему — это самое тщательное решение проблемы. Мы не можем различать все места, чтобы названия стилей у всех не конфликтовали.
Что ж, прочитав вышеизложенный контент, вы, наверное, сможете ответить на вопрос о душе интервьюера: вернитесь в прошлое и повторите еще раз.
- Интервьюер: Как вы организуете свой код CSS?
- Ответ: подсценарии 1. При написании общей библиотеки компонентов использовать БЭМ + namespace …… 2. ……
- Интервьюер: Как вы работаете с импортированными стилями из сторонних библиотек в модуле css?
- Ответ: В модуле css есть опции для включения и отключения модулей.Для стилей сторонних библиотек просто отключите опцию модуля.Конфигурация следующая:
- Интервьюер: Если есть сцена, основанная на antd, она инкапсулирует библиотеку стилей компонентов собственного фирменного стиля, как сделать так, чтобы она загружалась после стиля antd?
- Ответ: Поскольку css-loader на самом деле только анализирует и генерирует соответствующее имя класса, и, наконец, мы должны вставить его в html в соответствии со стилем-загрузчиком, то мы можем контролировать порядок его вставки.Согласно информации о конфигурации документа, управлять порядком вставки css. Вы можете управлять порядком последовательной загрузки.
Конечно, кроме двух вышеперечисленных способов, есть множество решений. Что касается схемы управления CSS, то отрасль не была единой. Все находятся в ситуации, когда я пытаюсь убедить вас, а вы пытаетесь убедить меня. Однако, пока он может решить проблему, это хороший инструмент~
- Интенсивное чтение "Использование селекторов свойств CSS"
- Интенсивное чтение «Пожалуйста, остановите поведение css-in-js»
Используйте сцену интервью, чтобы закрепить свои знания. Систематически изучайте различные способы изящного управления CSS. Надеюсь, это поможет вам~
- Добро пожаловать, чтобы обратить внимание на «Front-end Plus», серьезно изучить интерфейс и стать профессиональным техником...