CSS трюки

Списки и счетчики

Счетчики CSS позволяют вам настраивать внешний вид контента в зависимости от его расположения в документе.

<ul class="list">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

li {
    font-size: 40px;
    margin-bottom: 20px;
    counter-increment: li;
}

.list li::before {
    content: counter(li);
    margin-right: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-block;
    background-color: #f3b70f;
    color: white;
    text-align: center;
    line-height: 50px;
}

#frontend #css

CSS трюки

Псевдоэлемент ::selection

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

p::selection {
  color: white;
  background-color: green;
}

#frontend #css

CSS трюки

Значение атрибута: attr()

С помощью функции attr() можно извлекать значение атрибута выбранного элемента и использовать это значение в таблице стилей. Функция работает и с псевдоэлементами:

<h2 class="title" data-count="01">Section</h2>
<h2 class="title" data-count="02">Section</h2>
<h2 class="title" data-count="03">Section</h2>

.title {
    font-size: 35px;
    letter-spacing: 3px;
}

.title::before {
    content: attr(data-count);
    font-size: 1.2em;
    color: steelblue;
    margin-right: 10px;
}

Функцию attr() можно использовать с любым свойством CSS, но поддержка свойств, отличных от content, является экспериментальной.

#frontend #css

Что такое Tailwind Vue?

Tailwind Vue является интеграцией Tailwind CSS в приложения Vue.js.

Vue.js - прогрессивный фреймворк JavaScript для создания пользовательских интерфейсов. В сочетании с Tailwind CSS он позволяет разработчикам быстро создавать визуально привлекательные и интерактивные приложения, сохраняя при этом чистую кодовую базу.

В Tailwind Vue, можно использовать подход Tailwind, ориентированный на утилиты, вместе с реактивной природой Vue.js. Это эффективное и мощное сочетанием для современной веб-разработки.

Основные преимущества использования Tailwind Vue

1. Скорость разработки: с помощью служебных классов разработчики могут стилизовать компоненты непосредственно в разметке, ускоряя процесс разработки.

2. Настройка:
Tailwind предоставляет большие возможности настройки, позволяя легко расширять стандартную тему в соответствии с требованиями проекта.

3.Адаптивный дизайн:
Tailwind помогает легко реализовывать адаптивный дизайн, используя контрольные точки, ориентированные на мобильные устройства.

4. Минимальное раздувание CSS:
благодаря использованию PurgeCSS проекты Tailwind Vue могут сохранять небольшой размер конечного пакета CSS.

#frontend #css #tailwind #tailwindvue

Начало работы с Tailwind Vue

1. Создайте новый проект Vue.js (используя Vue CLI)

vue create my-tailwind-vue-app

2. Перейдите в папку Вашего проекта

cd my-tailwind-vue-app

3. Установите Tailwind CSS

npm install -D tailwindcss postcss autoprefixer

4. Создайте файлы конфигурации Tailwind и PostCSS

npx tailwindcss init -p

5. Добавьте Tailwind в свой CSS , включивследующие строки в src/assets/styles.scss или в любой другой основной файл CSS

@tailwind base;
@tailwind components;
@tailwind utilities;
#frontend #css #tailwind #tailwindvue

#frontend #css #tailwind #tailwindvue

Что нужно знать о Tailwind Vue

1. Настройка конфигурации Tailwind
Tailwind позволяет выполнять обширную настройку через файл tailwind.config.js, в котором можно настроить темы, размер экрана и многое другое.

2. Режим JIT
включите режим Just-In-Time (JIT) для быстрых итераций дизайна и меньшего рабочего объема CSS, настроив tailwind.config.js:

module.exports = {
  mode: 'jit',
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  // other configurations
}

3. PurgeCSS
обязательно настройте PurgeCSS в настройках Tailwind, чтобы удалить неработающие классы CSS в рабочей среде и сохранить небольшой объем финальной таблицы стилей.

4. Плагины
У Tailwind CSS есть богатая экосистема плагинов, способных улучшить разработку, предоставляя дополнительные функции: формы, типографику и утилиты соотношения сторон.

5. Библиотеки компонентов
рассмотрите возможность интеграции библиотек компонентов, таких как Tailwind UI, чтобы ускорить разработку, используя готовые компоненты на основе Tailwind CSS.

#frontend #css #tailwind #tailwindvue

Можно ли использовать Tailwind CSS с другими фреймворками?
Tailwind CSS можно интегрировать с другими фреймворками: Vue.js, React, Angular

Tailwind CSS дружелюбен к мобильным устройствам?
Tailwind CSS разработан с учетом принципов mobile-first, это упрощает реализацию адаптивного дизайна.

Можно ли создавать пользовательские компоненты с помощью Tailwind CSS?
Можно создавать пользовательские компоненты с помощью служебных классов Tailwind, сохраняя единообразие дизайна во всем приложении Vue.js.

#frontend #css #tailwind #tailwindvue

Как оптимизировать CSS?

Удаляйте неиспользуемый CSS

Вы когда-нибудь проверяли, какой объем кода CSS на самом деле использует Ваш сайт?

Такие инструменты, как PurgeCSS и UnCSS, позвол неиспользуемые правила CSS, анализируя ваш HTML. Это особенно полезно, если вы используете большие фреймворки, такие как Bootstrap или Tailwind.

#frontend #css

Мы все говорим:

Это займет всего пару часов

... а через неделю все еще отлаживаем приложение...

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

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

#dev

Иллюзия контроля

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

"Ой, постойте, API изменился"
"Ой, постойте, что-то случилось со средой разработки".
"Ой, постойти, я не понял логику этой функции"

Даже опытные разработчики попадают в ловушку, недооценивая неизвестные факторы

Взгляните на закон Хофштадтера :

Всегда требуется больше времени, чем вы ожидаете, даже если вы принимаете во внимание закон Хофштадтера

Невозмжно победить, не планируя поражение

#dev

Почему JavaScript лучше чем TypeScript?

Простая настройка

Одно из самых больших преимуществ JavaScript заключается в том, что он изначально работает в браузере и Node.js без компиляции. Можно добавить тег <script> или запустить node script.js, и все готово. Не нужно настраивать tsconfig.json, не требуется готовить сборку, не нужно ждать завершения компиляции.

Процесс с нулевой настройкой позволяет запускать быстрые демонстрации и проверять гипотезы.

#frontend #js

Почему JavaScript лучше чем TypeScript?

Гибкая типизация

Динамические типы JavaScript позволяют сохранять любое значение в переменной без предварительных объявлений. Можно переключаться между числами, строками, объектами или массивами на лету. Эта текучесть особенно удобна при работе с полезными нагрузками JSON.

let data = { id: 1, name: 'Alice' };
data = [1, 2, 3];

Обработка необработанных данных из API проста благодаря JavaScript Object Notation (JSON) . Вам не придется часто писать шаблонные определения типов или сложные интерфейсы.

#frontend #js