Структура CSS проекта без фреймворков

[rva]

Как я организую свой CSS для разработки веб-сайтов без фреймворка​

За свой 20-летний опыт веб-разработки я разработал для себя стандартный подход к CSS, которым хочу поделиться в этой статье.​

В следующем примере показан мой структурный подход, без дизайна. Так что статья не визуальный шаблон и не показывает дизайн. ​

В общем, я использую rem как единицу для всех размеров, кроме границ, которые я определяю в px. Моя система CSS состоит из следующих компонентов:

• Сброс стилей
• Переменные
• Глобальные настройки проекта
• Конкретные настройки контента
• Эффекты наведения
• Медиа-запросы

organize-structure.css

​

Сброс стилей​

Каждый браузер предоставляет предварительно отформатированный HTML, если вы не определяете стиль самостоятельно. Эта таблица стилей по умолчанию разработана по-разному в зависимости от производителя и версии браузера. Чтобы сбросить этот стиль для всех браузеров и унифицировать отображение, я использую первоначальный сброс.

organize-reset.css

Переменные​

Современные браузеры поддерживают переменные, которые я определяю в root элементе.
Для всех спецификаций абсолютного размера ширины и размеров шрифта веб-сайта, с которым я работаю rem. Для упрощения вычислений я установил font-size в корне значение 10px, что соответствует 1rem в последующем определении. Таким образом, основной текст с размером шрифта 20 пикселей будет иметь 2rem в качестве определения.
Я определяю базовые цвета черный и белый в отдельном блоке. Непосредственно под этим все цвета проекта .
В разделе переменных макета я определяю все важные переменные макета, такие как content-width, content-padding, header-heightи т. д.

organize-variables.css

Глобальные настройки проекта​

В глобальных настройках проекта я задаю базовые правила типографики и унифицирую интервалы.
Пример: с моей эстетической точки зрения расстояние вниз от и p, ul, figure элементов в области содержимого веб-сайта должно быть одинаковым.
В большинстве случаев моим сайтам не требуется более четырех размеров заголовков, чтобы упорядочить содержимое иерархически осмысленным образом. h4 также обычно промежуточный заголовок, в котором нет пробелов, но он выделен жирным шрифтом.

organize-globals.css

Конкретные настройки контента​

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

organize-specifics.css

Эффекты наведения​

Я собираю все определения ховеров в центральное место и связываю их с медиа-запросом @media(hover:hover), потому что ховеры тоже нужны только устройствам с поддержкой ховеров.

Таким образом, я отслеживаю все ховеры и могу быстро найти и настроить их.

organize-hovers.css

Медиа-запросы​

Я разрабатываю 90% приложений для настольных компьютеров и определяю все определения адаптивного дизайна в порядке убывания: рабочий стол → планшет → смартфон.

Привязав к корневому значению font-size, я могу грамотно масштабировать весь макет пропорционально.

organize-media-queries.css

Спасибо за чтение!

Я рад предложениям по оптимизации моей системы CSS.

Перевод статьи от Stephan Romhart

 

[unextazy]

спасибо, очень информативно.
хотелось бы услышать ваше мнение:
использовали ли вы tailwindcss? как по мне этот инструмент сильно упрощает верстку. зачем писать одни и те же стили и все усложнять, если уже все сделали за тебя?

 

[Denzy]

спасибо, очень информативно.
хотелось бы услышать ваше мнение:
использовали ли вы tailwindcss? как по мне этот инструмент сильно упрощает верстку. зачем писать одни и те же стили и все усложнять, если уже все сделали за тебя?

tailwindcss как и bootstrap, фреймворки. Да они ускоряют вёрстку, но кастомизацию и переопределение стилей всё равно приходится делать.

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

Несколько повторений одного ти того же медиазапроса под одно и то же разрешение

@media (max-width: 1024px) and (min-width: 640px) {
h3 {
    margin-top: 20px;
    font-size: 1.2em;
    background: #fcf6f6;
    color: #982323;
}   
}
...
@media (max-width: 1024px) and (min-width: 640px) {
    h2 {
    margin-top: 20px;
    font-size: 1.2em;
    background: #fcf6f6;
    color: #982323;
}
}
....

 

[rva]

спасибо, очень информативно.
хотелось бы услышать ваше мнение:
использовали ли вы tailwindcss? как по мне этот инструмент сильно упрощает верстку. зачем писать одни и те же стили и все усложнять, если уже все сделали за тебя?

tailwindcss я не использовал, пробовал bulma css в качестве обучающего проекта по разработке своей библиотеки для front end можно посмотреть здесь Library-Bulma. Собственно в статье используется подход основанный на отсутствии библиотек, здесь можно копья ломать до бесконечности у всех свои взгляды. Я лично думаю, что при прокачке навыков по определенному направлению хорошие результаты будут в любом случае.

 

[unextazy]

tailwindcss я не использовал, пробовал bulma css в качестве обучающего проекта по разработке своей библиотеки для front end можно посмотреть здесь Library-Bulma. Собственно в статье используется подход основанный на отсутствии библиотек, здесь можно копья ломать до бесконечности у всех свои взгляды. Я лично думаю, что при прокачке навыков по определенному направлению хорошие результаты будут в любом случае.

спасибо за ответ

 

[blackfm]

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

 

[Dark Wizard]

Мне нравятся rem, но в последнем проекте заказчик прям хотел, чтобы всё всегда было пропорционально резиновое на любой ширине экрана, пришлось использовать vw.

 

[Виталий П.]

reset морально устарел и ему на смену пришел лаконичный normolize, который не обнуляет стили и действительно приводит все к общему виду, это я не про стили, а саму идеологию/подход/технику

Вложенные селекторы это отдельный вид мазохизма (если работаете сами) и садизма (если над проектом будет работать кто-то другой)

Для упрощения вычислений я установил font-size в корне значение 10px, что соответствует 1rem в последующем определении. Таким образом, основной текст с размером шрифта 20 пикселей будет иметь 2rem в качестве определения.

В чем смысл данного перформанса? Поставьте уже 1px и пишите 20rem. Как вы на практике применяете rem кроме как статика относительно базового значения в пикселях?

В глобальных настройках проекта я задаю базовые правила типографики и унифицирую интервалы.
Пример: с моей эстетической точки зрения расстояние вниз от и p, ul, figure элементов в области содержимого веб-сайта должно быть одинаковым.
В большинстве случаев моим сайтам не требуется более четырех размеров заголовков, чтобы упорядочить содержимое иерархически осмысленным образом. h4 также обычно промежуточный заголовок, в котором нет пробелов, но он выделен жирным шрифтом.

Вы сначала сбрасываете стили, а потом начинаете их переопределять, для чего вам лишняя прослойка стилей, которая только вредит?

С учетом опыта в 20 лет, выглядит все так, будто в какой-то момент пропал интерес развиваться и пробовать что-то новое. И я сейчас не про css переменные, которые только самый ленивый не использует.

---

Мне нравятся rem, но в последнем проекте заказчик прям хотел, чтобы всё всегда было пропорционально резиновое на любой ширине экрана, пришлось использовать vw.

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