О проекте You-need-to-know-css

Как веб-разработчику, CSS является одной из ключевых технологий, которую я всегда считал хорошо освоенной. Однако после прочтения книги Lea Verou "CSS揭秘", я понял, что мой уровень знаний был довольно поверхностным. В этой книге автор рассматривает множество практических и элегантных решений для типичных проблем веб-дизайна с различных углов зрения. Я настоятельно рекомендую эту книгу всем, кто работает в области фронтенда или интересуется этим направлением.

Для удобства использования своих находок и часто используемых CSS-стилей, я создал этот документ, назвав его You-need-to-know-css. Прошу вас не критиковать слишком строго 🙏. На данный момент документ содержит 43 CSS-стиля (обновление продолжается...). Есть ещё много недочётов, поэтому буду рад любым замечаниям и предложениям. Если вы найдёте это полезным, присоединяйтесь к улучшению этого руководства .

Определение CSS в MDN:

?> Слоистый стиль (Cascading Style Sheets, CSS) — это язык стилей, который используется для описания внешнего вида HTML или XML документов (включая такие XML-ветви как SVG и XHTML). CSS определяет, как должны отображаться элементы на экране, бумаге, аудиоустройстве и других медиа.

Мое личное определение CSS:?> Это язык, который призван обеспечивать пользователям приятное визуальное восприятие, и заслуживающий постоянного изучения каждым веб-разработчиком.## Принципы

Уменьшение повторения кода, поддержание DRY (Don't Repeat Yourself)

/* плохо-плохо-плохо~ */

tips {
    color: #f4f0ea;
    border: 1px solid #f4f0ea;
}
tips:before {
    border-left-color: #f4f0ea;
}

/* хорошо-хорошо-хорошо~ */

tips {
    color: #f4f0ea;
    border: 1px solid currentColor;
}
tips:before {
    border-left-color: inherit;
}

Разумное использование сокращённой записи

/* плохо-плохо-плохо~ */

div {
    border-width: 2px 2px 2px 0;
}

/* хорошо-хорошо-хорошо~ */

div {
    border-width: 2px;
    border-left-width: 0;
}

Приемлемые переходные эффекты

/* плохо-плохо-плохо~ */

input:not(:focus) + .popTips {
    display: none;
}

input:focus + .popTips {
    display: block;
}

/* хорошо-хорошо-хорошо~ */

input:not(:focus) + .popTips {
    transform: scale(0);
    transition: transform .25s cubic-bezier(.25, .1, .25, .1);
}

input:focus + .popTips {
    transform: scale(1);
    transition: transform 0.4s cubic-bezier(.29, .15, .5, 1.46);
}

Цветовая палитра

Для обеспечения согласованности примеров в документах все цветовые схемы примеров основаны на дизайнерских нормах NetEase Yanxuan.

!> Примеры стилей в документах не содержат префиксы для совместимости браузеров. Рекомендуется использовать такие современные браузеры как Chrome и Firefox. В рабочих средах следует применять Autoprefixer для обеспечения совместимости.