Какова цель postcss-автосбросом и postcss-начальной

Question

Какова цель:

• PostCSS Autoreset
• PostCSS Initial

документация очень скудны на обоих и не очень объясните, почему их следует использовать и какова цель.

Я пробовал авторешетку. Кажется, что вы разместите all: initial на каждом стильном стиле. Это выглядит очень расточительным, если смотреть на выход.

Как это не отличается от:

* { 
    all: initial, 
    font-family: "Roboto" 
} 

Глядя на код для автосбросом это, кажется, делает только что: https://github.com/maximkoretskiy/postcss-autoreset/blob/master/src/resetRules.es6

Я не понимаю, почему это лучше, чем при использовании *

Answer 1

Это лучше, чем *, когда вы хотите создать изолированный компонент, что означает компонент, который вы можете интегрировать в приложение или сайт других людей, например плагин или дополнение.

Answer 2

postcss-autoreset защищает ваши унаследованные свойства в CSS.

Представьте, что вы написали компонент и опубликовали его до npm. Вы использовали BEM или CSS-модули, поэтому селекторы изолированы. Но некоторый разработчик взял свой компонент на веб-страницу с:

* { 
    box-sizing: border-box; 
    line-height: 2 
} 

Из-за не по умолчанию box-sizing всех ваших размеров порваться. Потому что os нестандартный line-height текст становится больше и сломал дизайн.

Вот реальный пример такой проблемы в компоненте EmojiMart.

postcss-autoreset поставит all: initial для каждого селектора в вашем компоненте CSS:

.component { 
    all: initial; /* added by postcss-autoreset, you didn’t write it */ 
    width: 100px; 
    padding: 10px; 
} 
.component_title { 
    all: initial; /* added by postcss-autoreset, you didn’t write it */ 
    height: 20px; 
} 

В результате этот автомобиль вставленными all: initial запретить пользователям box-sizing и line-height в компоненте и ваш компонент выглядит таким же способом в веб-сайт пользователя.