В 2019 году я создал фреймворк CSS и назвал егоRotala.css. После некоторого рефакторинга и доработок я, наконец, выпустил «игрушечный» фреймворк в 2020 году. Но это все еще прототипирование, потому что я еще не думаю, что мое решение элегантно.
с начала
Причина, по которой я создал этот фреймворк, проста: я сам хочу фреймворк CSS.
Я знаю, что потребуется много времени, чтобы построить его с нуля. Поэтому я хотел бы встать на вершину других мощных инструментов для создания такого фреймворка для ускорения разработки.
Сначала я начал прототипировать с помощью SASS. Это инструмент, который позволяет вам комбинировать множество уникальных синтаксисов, чтобы вы могли создавать дизайн с помощью CSS, как программирование.
@mixin button-icon {
margin: 0 2px;
}
.button {
padding: 2px;
@include button-icon;
}
Честно говоря, я изучил много хороших техник из других известных фреймворков, таких как Bootstrap, Bulma, Spectre и Miligram. Я позаимствовал у них несколько хороших дизайнов, особенно Spectre.css (нет ничего постыдного в том, чтобы подражать другим и изобретать велосипед).
Попробуйте снова
CSS никогда не был моей сильной стороной, поэтому я не ожидал ничего хорошего от моего первоначального прототипирования. В первый раз, когда я делал вещи, они были ломкими и "подражательными". В кадре нет «Я сделал».
Как я мог позволить себе такие плохие результаты, даже если это была просто неопытная попытка?
Без сомнения, я начал с нуля. На этот раз я собираюсь сделать отличный. Достаточно здорово, чтобы заставить меня улыбнуться.
Случайно я увидел видео о другом CSS-фреймворке, Tailwind.css, который делает все лучше. Может пора попробовать.
Tailwind.cssПозволяет вам построить свой собственный фреймворк со своими классами стилей "partial (particles, fragments)". Мне нравится такое решение, потому что это оригинальное использование шаблонов HTML.
<button class="mx-4 p-2 text-gray-600 bg-gray-300">button</button>
Все в Tailwind.css разделено, поэтому запись этих классов в элементы похожа на сборку строительных блоков.
Однако мой Rotala.css выводит таблицы стилей вместо шаблонов. Итак, я должен найти способ заставить его выплевывать некоторые файлы при сборке.
Исследования показали, что мои опасения были излишними, все стили в Tailwind.css можно скомпилировать в небольшой файл css с правильной настройкой, как и в SASS.
/* Base */
@import "tailwindcss/base";
@import "./base.pcss";
/* Components */
@import "tailwindcss/components";
@import "./components.pcss";
использоватьpostcss-cliупростить компиляцию
$ postcss docs/main.pcss -o docs/assets/css/rotala.css
...
Как видно из команды сборки, я полностью отказался от SASS и перешел на Postcss. В SASS нет ничего плохого, но я просто хочу, чтобы мой фреймворк использовал только одну технологию, чтобы избежать некоторых сложностей.
создать исходную папку
Перезапуская все снова и снова, я наконец нашел шаблон, который поддерживает мою кодовую базу в хорошем состоянии.
Структура исходной папки выглядит следующим образом:
rotala/
docs/
style/
CHANGELOG.md
README.md
package.json
postcss.config.js
docs/Папки используются для хранения статических файлов, которые могут помочь продемонстрировать вывод. Это также альтернатива Github Pages и может легко помочь с публикацией статических страниц без дополнительных параметров маршрутизации.
docs/
assets/
base/
components/
index.html
main.pcss
style/Содержит все исходные стили. Первоначально я сделал около 20 компонентов, потому что считал, что они необходимы для создания основных частей современного веб-сайта. Эти стили во многом основаны на Spectre.css и Bulma (я фанат этих фреймворков).
style/
base/
components/
Accordion/
Typography/
Badge/
Breadcrumb/
Tooltip/
Button/
Checkbox/
Divider/
Drawer/
Table Group/
Form Group/
Input/
Tab/
Avatar/
Link/
Menu/
Modal/
Notification/
Pagination/
Popover/
Radio/
Select/
base.pcss
components.pcss
main.pcss
prefix.pcss
Сделать разницу
Когда вы читаете эту строку, вы можете спросить: поскольку вы скопировали дизайн многих других фреймворков, чем он отличается от других фреймворков?
У меня был тот же вопрос в голове, я намеревался создать свой собственный CSS-фреймворк.
Переизобретение чужой работы не похоже на дух «создать для себя». Это означает, что этот маленький фреймворк всегда будет моей игрушкой и не будет иметь никакой ценности для других разработчиков.
На самом деле, я также хочу, чтобы другие извлекли выгоду из того, что я строю. Но я устал от воссоздания всего с нуля, есть ли простой способ вернуть этот безжизненный проект к жизни, добавив некоторые заканчивающие штрихи?
Трудно сделать «разные», особенно когда у вас нет хорошего вдохновения, когда.
Если я сделаю шаг назад и рассмотрю плюсы и минусы Tailwind.css, смогу ли я создать новую функцию на основе наследия Tailwind.css и его «минусов»? Я думаю, что ответ должен бытьYES.
<div class="md:flex bg-white rounded-lg p-6">
<img class="h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6" src="avatar.jpg" />
<div class="text-center md:text-left">
<h2 class="text-lg">Erin Lindford</h2>
<div class="text-purple-500">Customer Support</div>
<div class="text-gray-600">erinlindford@example.com</div>
<div class="text-gray-600">(555) 765-4321</div>
</div>
</div>
Преимущества Tailwind.css:
- нетрадиционный стиль
- Низкоуровневый служебный класс
- Дизайн можно настроить
- Система плагинов
- На основе экосистемы Postcss
Недостатки Tailwind.css:
- Шаблоны могут быть слишком «переполненными»
- Размер файла «большой», и его необходимо очистить во время сборки.
- Утилиты имеют меньшую семантику
Несмотря на то, что у Tailwind.css есть некоторые недостатки, я думаю, что эти недостатки более чем компенсируются достоинствами. Итак, в моей структуре мне нужно придумать план, чтобы справиться с этими недостатками.
Должен сказать, что второй и третий недостатки уже являются частью «фичи» Tailwind.css и я не могу от нее избавиться. Но первый «переполненный шаблон» кажется легко сбалансировать. Благодаря мощи Tailwind.css я также могу писать стили следующим образом:
.container {
@apply bg-white rounded-lg p-6;
@screen md {
@apply flex;
}
}
Я считаю, что такое использование удара выглядит намного лучше, не так ли?
Если я хочу немного изменить.container, я также могу украсить его напрямую, используя «Стили шаблона».
<div class="container font-bold mx-2">
...
</div>
Я знаю и понимаю, что я не первый, кто так думает, но, по крайней мере, это может быть приятной особенностью, которая отличает мой фреймворк от других.
Основные функции
Поскольку я хотел сделать diff для своего фреймворка, я придумал для этого основную функцию:Нет дизайна и расширяемости.
Во-первых, Tailwind.css не имеет дизайна, что дает нашим разработчикам полный контроль над стилем. Я буду следить за этим и убедиться, что все мои компоненты — это просто скелеты с очень простыми стилями. Компоненты имеют поля шрифта, цвет текста, цвет фона, отступы и т. д., если это необходимо.
.button {
@apply appearance-none;
@apply select-none;
@apply align-middle;
@apply font-medium;
@apply text-center;
@apply text-base;
@apply no-underline;
@apply leading-normal;
@apply whitespace-no-wrap;
@apply inline-block;
@apply cursor-pointer;
@apply rounded-sm;
@apply py-1 px-3;
}
Таким образом, все компоненты можно изменить до нужной формы, просто добавив новые переопределения стиля. Это следует исходной практике того, как мы должны обрабатывать стили CSS.
Предположим, мы стилизуем «кнопку-скелет».
Из этого:
к этому:
<button class="button text-gray-700 bg-gray-300 hover:bg-gray-500 transition-colors duration-150">
Background Gray
</button>
Проще говоря:Класс + Утилиты = ваши модные компоненты.
В шаблоне он выглядит слишком перегруженным, поэтому лучше использовать его так:расширятьтокДобрый.
.button {
@apply text-gray-700;
@apply bg-gray-300;
@apply transition-colors
@apply duration-150;
&:hover {
@apply bg-gray-500;
}
}
Суммировать
Оставшиеся задачи будут заключаться в реализации всех остальных компонентов, которые я хочу иметь в фреймворке. Создание каждого компонента занимает меньше времени, чем раньше, потому что я определяю, как использовать компонент «скелет» в качестве основной функциональности.
Теперь все необходимые компоненты можно использовать для создания веб-сайта. Минусов еще много, но я считаю, что создать с нуля что-то, в чем я не силен, для меня достижение.
В любом случае, я продолжу развивать фреймворк, и надеюсь, вам тоже будет интересна моя небольшая работа здесь.
оригинал:pita-eave.com/posts/CSS-Пост…
Автор: Янзе Дай
Перевод: Официальный аккаунт "Full-Stack Front-End Developer"