Забудьте о базовом css, используйте вместо него целую новую библиотеку

CSS

После столь долгой разработки проекта поля, отступы, фон повторялись каждый день снова и снова, так как использованиеСборка базовой библиотеки стилей-cssПосле (вместе именуемых базовой библиотекой) базового стиля снова и снова можно почти полностью избежать.

Расскажите о преимуществах ✨

  1. Каждый раз, когда вы пишете страницу, у вас должен быть стиль, и всегда используйте класс класса для подключения класса к узлу dom (если вам нужно сказать: я использую метку для прямого подключения стиля. Тогда я не могу опровергнуть тебя) Традиция состоит в том, чтобы написать класс в классе на dom, а затем написать в классе много CSS, чтобы сформировать стиль, такой как этот:
<div class="content"></div>

<style>
.content {
    width: 100px;
    font-size: 16px;
    display: flex;
    justify-content: space-around;
}
</style>

После использования базовой библиотеки просто нужно это

<div class="w-100 fs-16 flex j-around"></div>

Хорошо, одна строчка готова

  1. Если дом глубоко вложен, как это
<div class="main">
    <div class="content">
        <div classs="title">...</div>
    </div>
</div>

Если ваш продакт-менеджер попросит вас изменить стиль, этот слой очень мощный, и его очень неудобно поддерживать.

После использования базовой библиотеки каждый стиль объявляется заранее, и его нужно только комбинировать.Как и выше, он напрямую комбинируется в классе DOM, избегая проблем с вложенностью DOM.

  1. Плюсов больше, я думаю, вы поймете это после того, как попробуете использовать эту библиотеку для одного-двух проектов, и тогда вы обнаружите, что не можете бросить, даже если захотите бросить.不信回来打我

Для какого проекта подходит библиотека Assembly-CSS? 🤔️

После разработанного мной проекта, если код в html части превышает1000行или более страниц, чем10Если вы хотите написать стиль, который не является очень ненормальным макетом, я рекомендую использовать его.

Конечно, если ваши потребности не учитывают только эту библиотеку60kЕсли вы пристрастились к использованию размера файла, это также можно использовать.

Потому что если проект достигнет этого уровня и выше, то в плане предыдущего метода разработки, css файл оценивается в десятки к, а то и в сотни к, что обязательно будет содержать много повторяющихся css, поэтому после использования базы библиотеку, объявите ее один раз, пишите везде.

Его принцип заключается в том, чтобы заранее объявить базовый CSS, который можно использовать, объявить его как класс, а затем напрямую обратиться к dom через класс.

картинаmargin-left: 10pxТакой код пишется непосредственно в классе dom<div class="m-l-10"></div>Вот и все.

После беглого просмотра документации, что делать, если есть сложные требования? 🤔️

заявлено с самого началаassembly-cssПрименяется в базовом стиле, если есть сложные требования, такие как прозрачный фон, градиентный фон и сложный блок-тень, Я рекомендую пройти все.bg-black-rgba-0_5Объявите так, чтобы вы могли интуитивно понять, что это класс, который хочет представлять черный полупрозрачный фон.

Конечно, общая дизайнерская идея сборки-css реализована так: Комбинирование стилей

Сказав так много, давайте реализуем классический случай и испытаем его силу! 🐂🍺

Это макет из трех колонок, который написан непосредственно с использованием базовой библиотеки, вы можете напрямую скопировать код в демонстрационный файл и попробовать его.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/assembly-css/dist/assembly-css.css">
<section class="flex j-between">
  <div class="w-200 bg-green">left</div>
  <div class="flex-1 bg-blue">content</div>
  <div class="w-200 bg-green">right</div>
</section>

Прочитав так много контента, у вас есть предложения и идеи? 😄

Вот резюмирую, есть на самом деле зарубежныйassembly.cssБиблиотека, эта библиотека также пишет CSS, комбинируя классы классов, но она может комбинировать готовые стили UI, а дизайн сложный (это не так хорошо, как использование UI-фреймворка напрямую).

И эта библиотека объявляет самый базовый класс class, чтобы мы могли сами комбинировать нужные стили.

В общем, думаю, есть некоторые проблемы с конструктивной схемой. Например, как определить свой собственный класс, если вы хотите переписать класс этой базовой библиотеки, вы должны скопировать его в свой собственный проект. Так же есть цвета, которые заявлены в библиотеке, как же самому подобрать цвета...

Напишите в конце 🤩

У Amway так много всего, если у вас есть хорошая идея, я приветствую вас, чтобы поднять ееissues, или прямой пр.

Если вы считаете, что это хорошая и перспективная идея, я также очень приветствую вас, чтобы вы вместе со мной планировали будущее этого проекта 👋!

Категории