SASS и CSS модули?

Question

[thehighhomie]

В общем верстал все с bootstrap + jquery и все в статический файлах и примерно месяца 2 назад решил пойти дальше.
Начал изучать nodejs, сборщики (webpack, gulp) react, sass. Все круто, все нравится, удобно + интересно развиваться, но тема с компонентной версткой меня немного ставит в ступор.

Как раз на примере реакта хочу понять как лучше всего структурировать стили для компонентов.
Вот сегодня увидел крутую штуку - css модули. Это замечательно, но есть 2 момента, которые мне не очень нравятся.
1) Как я понял все стили идут в тег head документа а это меня не устраивает.
2) Нельзя использовать препроцессоры. Конечно в css модулях есть компрессы и можно включить некоторые фичи, например вложеность и т.д., но всех крутых возможностей как например фунцкии в css модулях нет.

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

Пример на реакте:

src/components/Button/Button.jsx

import React, { Component } from 'react';

export default class Button extends Component {

	render() {
		return (
			<button type="button" className="button">
				{children}
			</button>
		);
	}

}

src/components/Button/Button.scss:

.button {
    background-color: blue;
    box-shadow: 0 0 3px rgba(0,0,0,.1);
    padding: 5px 20px;
}

src/app.scss
import './components/Button/Button.scss';

Как-то так. Но, что-то мне подсказывает, что этот способ не очень то и хороший, даже если писать по БЭМУ чтобы оградить код от поломок с переопределением и т.д. то уж как то не уклюже постоянно импортировать scss файлы из компонентов в общий файл.

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

Answer 1

[Alexey Levicky]

если webpack юзать, то не надо в отдельный файл все импротить. Но css-modules в купе с postcss делают жизнь проще.
А твой вариант вполне имеет право на жизнь. Сам долгое время так делал, потом stylus с его require решил эту проблему, но все-таки советую смотреть в сторону css-modules. А если не нравится или еще какая причина по поводу styles.someClass, то есть альтернатива react-css-modules (насколько я понял ты с реактом работаешь).
https://github.com/gajus/react-css-modules

Comments

[thehighhomie]

На сколько я знаю react-css-modules тоже в файлы не собирает стили а в документ их вставляет.
Мне понравился вариант с css-modules но опять же, стили не вариант в css файлы собрать, но может есть вариант?

Вы писали про postcss:

Но css-modules в купе с postcss делают жизнь проще

что вы имеете ввиду? как postcss поможет?

[Alexey Levicky]

thehighhomie, модули дают возможность не выдумывать дикие классы особенно как в BEM нотации, можно проработать определенную систему в нейменге классов в рамках своего проекта. PostCSS как инструмент мне нравится больше, больше "вкусняшек", так скажем, конкретно для меня. В любом случае это дело вкуса, можно работать так css-modules + sass/less/stylus. Видел даже css-modules+postcss+sass. Мне кажется что бы понять что конкретно тебе подходит нужно попробовать))

А при использовании reactjs + css-modules + webpack стили и не надо собирать руками в один файл.
Еще для расширения кругозора глянь CSS in Js, для реакта тема сейчас очень актуальная.

[thehighhomie]

Aleksey Levickyj, не гуглится такая связка css-modules+postcss+sass. можете что-то подобное подкинуть почитать?)

[Alexey Levicky]

thehighhomie, это про webpack нужно читать
https://github.com/gajus/react-css-modules#sass-sc...
https://forum.shakacode.com/t/best-practices-for-c...

[thehighhomie]

Aleksey Levickyj, хорошо, спасибо, пойду искать информацию дальше) не понятно как совместить sass с css модулями все равно...

[Alexey Levicky]

thehighhomie, почитай про webpack и модульную систему. В webpack ты настраиваешь лодеры, в файле с компонентом импортишь свой styles.sass

Это если с react-css-modules.

import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './table.css';

@CSSModules(styles)
export default class extends React.Component {
    render () {
        return <div styleName='table'>
            <div styleName='row'>
                <div styleName='cell'>A0</div>
                <div styleName='cell'>B0</div>
            </div>
        </div>;
    }
}

Если просто css-modules, то:

import React from 'react';
import styles from './table.css';

export default class Table extends React.Component {
    render () {
        return <div className={styles.table}>
            <div className={styles.row}>
                <div className={styles.cell}>A0</div>
                <div className={styles.cell}>B0</div>
            </div>
        </div>;
    }
}

[thehighhomie]

Aleksey Levickyj, но у вас не sass файл а css: table.css. куда sass файл нужно прикрутить? loader'ы я настроил

[Alexey Levicky]

thehighhomie, вместо .css подключаешь .scss/sass, webpack обработает все подключенные файлы и выплюнет сжатый css

[thehighhomie]

я уже со всем разобрался, спасибо, и возможно буду использовать react-css-modules, но у меня сейчас другая проблема, простая я думаю, посмотрите пожалуйста еще один мой вопрос:
там написал один человек и я подробней в комментарие ему ответил, посмотрите пожалуйста, я наверное сошел с ума или переучил, не понимаю что происходит...