Методология ECSS

Enduring CSS (выносливый CSS) или eCSS это: «Руководство к написанию стилей для больших, быстро меняющихся, долгоживущих веб-проектов.» — Сайт eCSS

Меня действительно заинтересовала эта CSS-методология с точки зрения первоначальной проблемы, которую затронул автор Ben Frain. И эта проблема – работа с CSS в масштабе.

Центральная концепция eCSS – изоляция. Изоляция значит, что все компоненты представляют собой изолированную единицу кода без зависимостей, контекста. Эту единицу можно использовать повторно и удалять без риска утечки стилей.

В основном это достигается за счет

инкапсуляции всего кода, не только CSS, а всех технологий, необходимых для постройки всех компонентов в своих общих папках;

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

использования строгой системы именования.

Второй пункт дает нам понять, что повторение свойств и значений для eCSS не проблема. В этом плане eCSS радикально отходит от таких методологий, как БЭМ и SMACSS, которые расширяют и абстрагируются от существующих компонентов, тем самым избегая или пытаясь как можно сильнее избежать повторения кода.

Значит ли это, что eCSS утяжеляет файлы стилей? Не обязательно. После нескольких тестов по сжатию файлов Ben Frain пришел к выводу, что из-за того, что gzip невероятно эффективно сжимает повторяющиеся строки, разница в весе файла между eCSS и другими методологиями крошечная.

Преимущества eCSS

Что вы получите, если примете методологию eCSS и закроете глаза на повторения:

изоляция всех визуальных шаблонов облегчает обслуживание CSS-кода;

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

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

Заключение

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

Попробуйте и выясните, что вам подойдет. Также можно попробовать совместить БЭМ и SMACSS, или даже выработать свою методологию на основе определенных проблем, которые вам необходимо решить.

А какие у вас золотые правила по написанию организованного и обслуживаемого CSS-кода? Как думаете, методологии могут облегчить задачу? Пишите в комментариях.

Источник: https://webformyself.com/css-metodologii-css-bem-smacss-ecss/