Как может быть меньше изображений в заголовке?

блог：https://www.mintimate.cn Mintimate’s Блог, просто чтобы поделиться с вами

Рамка страницы

Фреймворк внешнего интерфейса страниц развивается очень быстро. В эпоху, когда передняя и задняя части не были разделены, мы часто упоминали архитектуру MVC. Однако в чистом мире внешнего интерфейса HTML, CSS и JavaScript также можно рассматривать как аналогичную многоуровневую структуру, которая образует структурный уровень, уровень стиля и уровень взаимодействия. Аналогия следующая:

• Структурный уровень: HTML отвечает за определение структуры и содержания страницы.
• Уровень стиля: CSS отвечает за определение стиля и внешнего вида страницы. CSS определяет стиль элементов страницы с помощью селекторов и атрибутов.
• Уровень взаимодействия: JavaScript отвечает за взаимодействие и поведение страницы, взаимодействие с пользователями посредством обработки событий, операций DOM и т. д., а также за управление поведением страницы.

«Три мушкетера» совместными усилиями построили большой дом на переднем конце страницы:

HTML+CSS+JS

Конечно, написать CSS и JavaScript с нуля для каждого проекта явно нереально, да и не способствует унификации стиля и стиля системы, да и дальнейшее сопровождение тоже будет «ненужным».

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

• Bootstrap: https://getbootstrap.com/

Конечно, сейчас и в 2023 году я рекомендую попробовать использовать:

• TailwindCSS: https://tailwindcss.com/docs/installation

TailwindeCSS

Прежде всего, следует отметить ⚠️: Tailwind CSS не использует для написания традиционные правила CSS, а использует метод «сначала утилита», основанный на классах.

Utility-first

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

Думайте о CSS как о наборе многократно используемых «инструментов» или модулей стилизации.,Каждый класс соответствует только определенному эффекту стиля.,Можно настроить одновременно,например：Я определяю текущую страницуbg-blue-500Соответствующий цвет можно настроить как yellow,Подобно тому, как когда кого-то отдаешь,Отправьте две корзины с фруктами,Хочу положить зеленые яблоки в корзину с фруктами🍏,Другой хочет положить красные яблоки 🍎.

TailwindCSS Star

По этой причине TailwindCSS необходимо скомпилировать:

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

Это гарантирует, что Tailwind CSS можно гибко настраивать, а эффективность вывода также высока.

История версий

TailwindCSS поддерживает атомарные операции с момента своего выпуска. Конечно, TailwindCSS также постоянно развивается. Среди них: V2.0, V3.0 и теперь V3.3 — относительно большие версии.

TailwindCSS 2.0

См. адрес выпуска журнала обновлений.：https://tailwindcss.com/blog/tailwindcss-v2

Дело в следующем:

• поддерживать@applyПредставьте другие атомарные стили, чтобы создать свой собственныйCSSстиль；
• Поддерживает темный режим, а также больше цветов и настроек;
• Браузер IE больше не поддерживается

其实最重要的是поддерживать@applyпостроить свой собственныйCSSстиль：

// Семантически создать стиль кнопки
.btn {
  @apply bg-indigo-500 hover:bg-indigo-600 focus:ring-2 focus:ring-indigo-200 focus:ring-opacity-50;
}

Также есть поддержка темных меток:

<div class="bg-white dark:bg-black">
  <h1 class="text-gray-900 dark:text-white">Dark mode</h1>
  <p class="text-gray-500 dark:text-gray-300">
    Это позволяет нам переключать стили в зависимости от того, содержит ли HTML верхнего уровня наш темный логотип.
  </p>
</div>

TailwindCSS 3.0

См. адрес выпуска журнала обновлений.：https://tailwindcss.com/blog/tailwindcss-v3

3.0, наиболее важные особенности:

• Механизм Just-in-Time включен по умолчанию

После запуска скорость запуска проекта значительно увеличивается.

Краткое описание преимуществ

Собственно, преимущества и особенности,Уже упоминалось выше,Вот небольшой подведение итогов:

1. Унифицируйте стили страниц для повышения скорости разработки;
2. Адаптивный дизайн, легко адаптируемый под мобильные устройства;
3. Сборка и упаковка, кастомизация слотов.

Атомизация против семантики

Как упоминалось ранее, TailwindCSS — это типичный атомарный CSS (Atomic). По сравнению с традиционным семантическим CSS (Semantic), он все же имеет некоторые характеристики и различия.

Возьмите официальный сайт в качестве примера и разработайте подсказку для сообщения:

информация

Если вы используете семантическую разработку, код может выглядеть так:

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

Однако, если вы используете TailwindCSS, это должно выглядеть так:

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

Использование семантических имен классов CSS имеет несколько основных преимуществ:

• Код более читабелен。Имена классов, такие какp-6、max-w-sm等一目了然地表达了стиль效果,Вы даже можете представить конечный эффект🤔.
• CSS более модульный. Различные классы можно использовать в сочетании, чтобы избежать дублирования стилей.
• Легче в обслуживании. Интуитивно понятные имена классов и модульный CSS облегчают понимание и изменение стилей другими разработчиками.
• Большая возможность повторного использования. Модульные классы можно повторно использовать на страницах и в компонентах.
• Разделение передней и задней части. HTML и CSS разделены, а стили контролируются классами для облегчения внутреннего рендеринга.

Практика развития

Все только что упомянутые примеры взяты с официального сайта. Здесь я приведу пример, который я разработал. Например: недавно я написал окно подсказки, которое выглядит так:

Окно подсказки

Конечно, чтобы соответствовать дизайну страницы, используется и яркий цветовой режим:

световой режим

В настоящее время мы используем TailWindCSS для обработки атомизации. Как нам его спроектировать?

• Прежде всего, всей коробке необходимо белое дно, задняя периферия — закругленные углы, а внутренний список отображает подсказку;
• Во-вторых, используйте подчеркивание, чтобы выделить внутренние ключевые моменты, а цвет должен дополнять тему;
• Наконец, в темном режиме вам нужно изменить цвет шрифта;

Благодаря приведенному выше анализу,Мы можем легко связать ключевые слова：bg-white dark:bg-gray-800 rounded-3xl shadow-md,а такжеlist-disc、text-sky-500 dark:text-sky-300 decoration-indigo-400 underline underline-offset-4；конечно,Все это после обращения к документу TailwindCSS и его изучения.,Только тогда я узнал:

Официальная документация TailwindCSS

Ничего не говорите об изучении TailwindCSS. Чтобы перейти от семантического CSS к атомарному CSS, вам нужно прочитать официальные документы и изучить систему дизайна. Какие из основных библиотек компонентов интерфейсной платформы в наши дни вообще не требуют обучения?

После этого еще раз проанализируйте: необходимо разместить на макете контейнера,Поэтому нам нужно использоватьgirdМакет：

Сетка

Окончательный код:

<div class="md:flex">
  <div class="p-5">
    <div
        class="uppercase tracking-wide text-2xl text-indigo-500 dark:text-indigo-200 font-semibold"
    >
      Дополнительные операции
    </div>
    <div
        class="mt-2 text-slate-500 dark:text-slate-400 w-100">
      <p class="text-lg font-medium">
        <ul class="list-disc">
          <li>вы можете установить одинUser-AgentПереключить плагин,и установите Edge Android,Используйте это для тестирования мобильного поиска；</li>
          <li>Браузер запретит странице открывать несколько страниц.,ты<span
              class="decoration-sky-400 text-pink-500 dark:text-pink-300">Вам нужно открыть несколько вкладок, чтобы запустить этот сайт</span>；
          </li>
          <li>На этом сайте может быть реклама,ты可以<span
              class="text-sky-500 dark:text-sky-300 decoration-indigo-400"
          >Нажмите на рекламу, чтобы проверить дополнительные возможности вашего браузера.『забавный😁』</span>ヾ(≧≦)〃
          </li>
        </ul>
      </p>
    </div>
  </div>
</div>

Эффект тоже хороший, посмотрите эффект на мобильном терминале:

Мобильный эффект

Фактически, TailwindCSS также широко используется в различных библиотеках пользовательского интерфейса.

Библиотека пользовательского интерфейса компонентов

Здесь я представлю еще одну Библиотеку пользовательского интерфейса компонентов,Удобно использовать TailwindCSS прямо из коробки. давным-давно,Начните использовать Vue3 для личных проектов,Но текущие компоненты Vue3,Большая часть из них все еще находится на стадии Альфа.

Например: элемент, который очень популярен на этапе Vue2. Пользовательский интерфейс, сейчас я думаю, что Element PlusОн еще не достиг того уровня2.0Это так полезно, когда。И мне очень некомфортно в этом месте：labelбудет использоваться в качестве значения,ноlabelСамо слово не имеет никакого значения！

Позже использовалсяArco Design: https://arco.design/：

Arco Design

Очень хорошая библиотека пользовательского интерфейса и спецификации дизайна, но недавно я использовал Nuxt3; DesginВсе еще адаптируемся,Так что на этот раз я все еще рекомендую то, что рекомендовал раньше.：NuxtUI: https://ui.nuxt.com/

Nuxt UI

В основном компоненты разрабатываются на основе TailwindCSS, например настройка цвета темы:

export default defineAppConfig({
  ui: {
    primary: 'green',
    gray: 'cool'
  }
})

Если вы хотите начать работу с TailwindCSS непосредственно из пользовательского интерфейса компонента, то использование NuxtUI — хороший выбор.

Подвести итог

Tailwind CSS значительно упрощает написание стилей, предоставляя большое количество предустановленных классов стилей.

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

В этой статье представлен систематический обзор эволюции от семантики к атомизации и того, как начать использовать Tailwind CSS. Он имеет большое значение для разработчиков, которые хотят принять новую парадигму написания CSS. Конечно, вас ждет еще больше контента, или, если у вас есть возможность, вам будут предоставлены другие учебные пособия.

я участвуюНа втором этапе специального тренировочного лагеря Tencent Technology Creation 2023 года будут отмечены призовые эссе, которые разделят призовой фонд в 10 000 юаней и часы с клавиатурой.