Создавать стили с помощью CSS — это здорово, но улучшать код и применять некоторые хитрости еще лучше. В этой статье я расскажу о некоторых советах и рекомендациях по CSS, которые вы можете применить, поделиться ими с товарищами по команде и улучшить свои проекты.
Избегайте оператора @import для шрифтов
Использование правила @import позволяет нам импортировать одну таблицу стилей в другую, но в некоторых случаях это утверждение неверно. Например, если нам нужно импортировать тот же класс на одну страницу с другой страницы, этот метод подойдет, но в случае со шрифтами это неправильный путь. Когда мы импортируем из CDN, этот импорт занимает много времени, чтобы попасть на наш веб-сайт, а затем использовать
<link rel="stylesheet" href="cdn.com/font/font1.css?family=shield:wght@300;400;600&display=swap" />
Оптимизируйте размеры файлов
Когда вы заканчиваете проект, слишком большой размер ваших файлов — плохая практика, перегруженность веб-сайта должна снизить ваши шансы удержать пользователя на странице. Вам нужно позаботиться об уменьшении каждого отдельного файла, такого как CSS, JS, изображения, видео и т. д. Вот несколько инструментов, которые вы можете использовать для уменьшения файлов:
Избегайте чрезмерной анимации
Анимация. Конечно, дайте мне 15 анимаций, когда страница завершится, чтобы загрузить и увидеть баннер, скользящий справа, эффект отскока для слов в заголовке, да, это так здорово создавать анимацию.
Это было моим первым намерением во втором проекте, когда я изучал анимацию. Но это было ужасно. Серьезно, все мои усилия по созданию хороших анимаций пошли прахом, когда сайт закончил загрузку за 2 минуты до этого, и некоторые анимации мешали пользователю. Каждая страница должна иметь анимацию, но в более низком масштабе, простые анимации, такие как состояние наведения на кнопку для отправки или когда вы наводите курсор на карточку и показываете больше информации. Помните, меньше значит больше.
Инструменты для вашего CSS
Очевидно, что советы должны включать некоторые инструменты для улучшения нашей работы и ускорения доставки всего. Я дам вам список некоторых веб-сайтов, которые я посещаю, когда начинаю новый проект или редизайн проекта.
- Coolors: этот веб-сайт невероятен, мне очень нравится, как вы можете комбинировать цвета, просто нажав
- Fontshare: вы должны использовать Google Fonts в качестве основного шрифта CDN, но на этом веб-сайте есть большой список новых шрифтов, которые вы можете использовать бесплатно.
- Loading.io: Если вы пытаетесь сделать код загрузки анимации, не ищите больше, вот лучший инструмент для этого.
- Animate.css: если у вас нет всех идей для создания хорошей анимации, просто проверьте эту библиотеку для своего проекта и установите ее наилучшим образом.
- Справочник по CSS: если вы забыли псевдоклассы, как я, это лучший способ запомнить
трюки
Когда следует использовать проценты вместо абсолютных чисел?
Адаптивный дизайн — главный герой сайта. Вы должны понимать, когда следует использовать проценты или области просмотра, а когда использовать rem, px или em.
Я вам скажу, что это очень просто: для изображений, фона и столбцов вы должны использовать проценты или ширину области просмотра, чтобы реагировать на ширину элемента и px для высоты, но обычно высота должна быть автоматической только в если дизайн имеет точный дизайн, как обычно бывает в карточках, и в некоторых разделах вы должны установить максимальную высоту с px, rem или em, но обычно px.
А для текстовых тегов, таких как H1, H2, H3, small, p и т. д., вы можете использовать px или rem. Очень просто.
Подсказки
Иногда нам нужно обернуть некоторую информацию об описании, всплывающей подсказке или чем-то подобном, и здесь появляется всплывающая подсказка. Обычно мы используем библиотеку стилей, такую как Tailwind или Bootstrap, но вы можете сделать ее с помощью нескольких строк CSS и HTML и создайте собственный стиль для своего проекта.
Во-первых, мы определяем наш HTML
<div class="container">
<div class="group">
<h2>Tooltip</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta animi corporis ducimus, unde quae iste! Quo facilis labore sint! Explicabo repudiandae ad beatae ab eos officiis deleniti quisquam at consequatur.</p>
<span class="tooltip">
<i class="fa fa-exclamation-circle"></i>
<div class="tooltip-box">
<p>This is a tooltip for the text or product</p>
</div>
</span>
</div>
</div>
В этом случае я буду использовать Fontawesome для значка, так что вы можете использовать для этого CDN. Как вы можете видеть на примере, я создаю контейнер и внутри него я добавил div с классом group , но важным элементом здесь является span с всплывающей подсказкой класса. Но давайте сначала посмотрим на CSS.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #3c19c7;
min-height: 100vh;
font-family: 'Rubik', sans-serif;
}
В первую очередь нам нужно сбросить стили из браузера
.container {
width: 95%;
max-width: 1200px;
margin: 0 auto;
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
.group {
max-width: 400px;
background-color: #fff;
border-radius: 12px;
box-shadow: 1px 2px 8px 4px rgba(32, 12, 113,.2);
padding: 12px 20px;
position: relative;
}
Контейнер должен иметь установленную максимальную ширину, чтобы сохранить порядок примера, а группа представляет собой обычный раздел карты, но с другим именем.
.tooltip {
cursor: pointer;
}
.tooltip-box {
display: none;
position: absolute;
background-color: #b3cb27;
box-shadow: 1px 2px 8px 6px rgba(149, 149, 149, 0.2);
border-radius: 4px;
transition: all .4s ease;
padding: 6px 10px;
top: 100%;
left: -50%;
}
.tooltip-box::after {
content: '';
position: absolute;
width: 12px;
height: 12px;
transform: rotate(135deg);
background-color: #b3cb27;
top: -6px;
right: 65px;
}
Теперь вы бы сказали: «Да ладно, это несколько строк? Я предпочитаю использовать библиотеку для этой простой всплывающей подсказки», и вы были правы, но если вы начинаете программировать и создаете какие-то новые классные вещи или, возможно, практикуете некоторые приемы CSS, это для вас, но позвольте мне сказать вам кое-что, лучше знать вас может сделать эту нестандартную вещь, чем использовать библиотеку, и это может быть головной болью, чтобы изменить простой фон или изменить позиционирование. Иногда хорошо использовать чужой код, но если вы можете сделать простую вещь и сэкономить время позже, просто сделайте это.
Очевидно, код можно улучшить, но он будет работать на вас и кое-что изменит.
Тень окна CSS
Простой трюк с тенями: никогда не используйте черный цвет в качестве основного цвета для теней. И наоборот, для света это не использование белого цвета для всех, это зависит от фона, с которым вы должны работать. Например:
В данном случае я не использовал черный или темный цвет, я взял фоновый цвет и немного изменил его на более темный цвет, применил непрозрачность и готово. Вы создаете качественный раздел для своего проекта.
Используйте переменные
Научитесь использовать переменные, и вы сэкономите время. Я никогда не использовал переменные, пока не взялся за большой проект, и CSS был в беспорядке. Поэтому мне потребовалось время, чтобы решить проблемы, но использование переменных для цветов, радиуса границы и других вещей, которые вы будете использовать каждый раз, будет лучшим.
:root {
--border-radius: 12px;
}
.group {
max-width: 400px;
background-color: #fff;
border-radius: var(--border-radius);
box-shadow: 1px 2px 8px 4px rgba(32, 12, 113,.2);
padding: 12px 20px;
position: relative;
}
::до и ::после содержимого
Как вы можете видеть в примерах до того, как я использовал псевдоэлемент::after, чтобы создать маленький гвоздь для всплывающей подсказки. Использование этих псевдоэлементов может дать вам варианты дизайна не только для таких простых вещей, как эта, но и для добавления продвинутой анимации для элементов. Скрыть и показать ::before и::after это отличный инструмент.
Вот несколько советов из части приемов CSS, которыми я хочу поделиться с вами в ближайшие недели. Все еще практикуюсь и делаю новые вещи с CSS.
