Рецепты

В этом разделе рассмотрим, как по-максимуму использовать возможности EffCSS.

Композиция мейкеров

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

Example

import { TStyleSheetMaker } from 'effcss';
import { type TFirstMaker, firstMaker } from 'firstMakerLib';
import { type TSecondMaker, secondMaker } from 'secondMakerLib';

export type TCompositeMaker = TFirstMaker & TSecondMaker;

export const compositeMaker: TStyleSheetMaker = (utils) => {
    return {
        ...firstMaker(utils),
        ...secondMaker(utils)
    };
};

Фабрика мейкеров

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

Example

import { TStyleSheetMaker } from 'effcss';

export type TMakerCreator = (params: {
    sizes: {
        s: number;
        m: number;
        l: number;
    };
    max: number;
    min: number;
}) => TStyleSheetMaker;

export const DEF_PARAMS = {
    sizes: {
        s: 2.5,
        m: 5,
        l: 7.5
    },
    min: 0,
    max: 10
};

export const createMaker: TMakerCreator = (params = DEF_PARAMS) => (utils) => {
    const {
        sizes,
        max,
        min
    } = params;
    return {
        // css
    };
};

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

Example

import { type TConfiguredMaker, createMaker } from './maker';
export type TConfiguredMaker;
export const maker = createMaker({
    sizes: {
        s: 1,
        m: 4,
        l: 10
    },
    min: 0,
    max: 12
});

Изменение мейкеров

Иногда ваши стили должны быть рассчитаны заново, но при этом сами селекторы должны остаться прежними. Например, вы предоставляете пользователю возможность настроить размеры, цвета своего компонента в интерактивном режиме. Хотя в EffCSS для каждой таблицы стилей предполагается лишь единственный вызов функции StyleSheet maker, вы можете добиться повторного вычисления, использя метод remake. Этот метод позволяет даже использовать разные мейкеры, если у вас есть ссылка на оригинал.

Example

import { TStyleSheetMaker } from 'effcss';

const original: TStyleSheetMaker = () => ({
    // css
});
const substitute: TStyleSheetMaker = () => ({
    // css
});
const [originalBEM] = consumer.use(original); // используем original
const substituteBEM = consumer.remake(substitute, original); // теперь substitute создает селекторы original
console.log(originalBEM('block.elem.mod').toString() === substituteBEM('block.elem.mod').toString()); // true - идентичные селекторы

WARNING

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

Несколько вариантов значений CSS свойства

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

Example

import { TStyleSheetMaker } from 'effcss';

const maker: TStyleSheetMaker = () => {
    return {
        '.cls': {
            textDecoration: ['underline', 'underline dotted'] // .cls{text-decoration:underline;text-decoration:underline dotted;}
        }
    };
};

Использование подготовленных CSS-стилей (^4.5.0)

Иногда у вас уже есть строка с готовым CSS - вы можете вернуть ее из мейкера, чтобы избежать ненужных конвертаций и преобразований.

Example

import { TStyleSheetMaker } from 'effcss';

const css = '.cls{text-decoration:underline;}';

const maker: TStyleSheetMaker = () => {
    return css;
};

Atomic CSS

Зачастую ваши стили проще с помощью атомарных правил. В этом случае тип таблицы можно описать с помощью дженерика TMonoElement:

Example

import type { TMonoElement, TStyleSheetMaker } from 'effcss';

export type TMaker = TMonoElement<{
    w: 's' | 'm' | 'l';
    h: 's' | 'm' | 'l';
    bg: 'primary' | 'secondary';
}>;

Обратите внимание, что формат таблицы стилей позволяет использовать атомарные правила наряду с БЭМ-правилами - вы можете явно указать их в дефолтном элементе дефолтного блока:

Example

import type { TStyleSheetMaker } from 'effcss';

export type TMaker = {
    '': {
        '': {
            w: 's' | 'm' | 'l';
            h: 's' | 'm' | 'l';
            bg: 'primary' | 'secondary';
        };
    };
    block: {
        elem: {
            mod: 'val1' | 'val2';
        };
    };
};