CSS-модули, SASS/SCSS и сброс стилей в React-приложении

[@konstantinvolkov2629]

Капец музыкальная вставка напугала без предупреждения)))) Я полез проверять откуда звук идет по соседним вкладкам ))) За видео спасибо

[@never.m1nd]

Вот люблю такие видео - где не спеша и все по полочкам, но при этом без лишней воды 👍

[@РоманСивец-т5м]

Михаил, спасибище огромнейшее. Про общие и модуле после курсов было понятно и использовал модули, а вот про sass/scss ничего не знал, но у нас большинство работодателей требуют это и за 18 минут я овладел знаниями))))) просто супер!

[@ВадимСергеев-р2э]

Спасибо, Михаил! Ваши объяснения легкие и понятные, как-будто я и так все это знаю и умею. Вы учите так, что в каждом слове чувствуется уверенность в том, что делаете, и опыт. Все ясно и понятно.

[@lerrrrka]

Большое спасибо за это видео! За 18 мин получила больше информации, чем из множества других) видео ответило на все вопросы по стилизации в реакт, даже на те, которые я здесь и не искала)

[@CatWoman-sr4pk]

какое замечательное объяснение, спасибо большое

[@dexterholland4430]

Именно то, что искал! Спасибо тебе большое, бро 🔥

[@samolevich]

Спасибо. Наконец-то нашёл видео, в котором рассказали про префиксы.

[@demid088web]

Спасибо большое! Все четко и по делу!

[@vld3237]

Очень полезный и понятный урок, спасибо тебе

[@erzhan225]

Спасибо. Согласен с комментариями. Очень кратко и по делу.

[@MrGreen-zs7on]

Как всегда лаконично и понятно, огромное спасибо за такой информативный канал!)

[@МатвейМанько-ь6ч]

Спасибо! Очень здорово информация структурирована и преподнесена!

[@petrovpetrov6095]

Спасибо за видео !всегда приятно слушать вас

[@mrbolshakov12]

Спасибо большое! Максимально понятно и быстро

[@anafro_ru]

Спасибо большое! Очень просто объяснили :)

[@yakut54]

Миша, Спасибо за науку!

[@СергейПетров-б4щ4ч]

Супер! Спасибо!

[@anurovinfo]

Круто🔥

[@gregdmitriev2784]

круто, спасибо Миша, очень чётко, всё по полочкам, всё понятно 👍👍👍👍👍👍

[@sergey_zatsepin]

Прикольно, спс за видос.

[@oleg_andrianov]

Круто, спасибо!

[@Pink_Piglin]

Спасибо ! 5/5 звезд тебе.

[@sammylain]

Очень нравятся ваши видео, одни из лучших объяснений на ютубе! По SCSS - никак не пойму его использование при модульном подходе. Вложенность это удобно, но ведь это далеко не все возможности SCSS. Но идея делать импорты миксинов и прочего в модульные файлы кажется мне неправильной - ведь модульные файлы подразумевают некую независимость? А если мы будем делать импорты, то они обрастут этими зависимостями с внешними файлами

[@mishanep]

Зависит от настроек. У нас на проекте мы не импортируем миксины, но используем их. Пришлось пошаманить немного с настройками сборки.

[@sammylain]

@@mishanep оо вот где собака зарыта, спасибо! Теперь понятно, в какую сторону копать)

[@АртемАниськин-н6г]

Если что сейчас node-sass уже устарел, так что нужен просто sass пакет

[@romanroman5820]

Михаил, спасибо! У меня к сожалению less c css-modules не заработал.

[@remis9966]

Видео полезное спасибо,а да как я понял в jsx можно забыть про работу с css посредством native js?да и html элементы выбирать уже не получится?а что делать если хочешь прочитать или создать свои свойства в тэгах html

[@velikorossnationalist4259]

Отличное видео! А про styled components у Вас есть видео?

[@mishanep]

Отдельного нет. Был проект про страны, где он для стилизации использовался.

[@velikorossnationalist4259]

Спасибо! Посмотрю.

[@write-code]

На 3:17 вы добавляете в папку с компонентом файл index.js и говорите, чтобы "комфортно это дело экспортировать". Так и не понял для чего это нужно? Файл же пустой? Я так понял.

[@true227]

такая же фигня

[@artgurianov]

Отличное видео! А как при таком подходе обращаться из js к сгенерированным классам, например для анимации?

[@mishanep]

Приветствую! Могу не до конца понять вопрос, но попробую ответить. Я так понял, что речь конкретно про css-модули и про то, как динамически добавлять/снимать css-классы средствами js. Для этих целей удобно использовать дополнительную библиотечку, вроде classnames. Будет получаться примерно следующее. import {useState} from 'react'; import cn from 'classnames'; import classes from './MyComponent.module.css'; const MyComponent = () => { const [isActive, setActive] = useState(false); const main = cn({ [classes.active]: isActive, }); return ( ) } В данном случае переменная main будет представлять собой строку с набором css-классов по условию. Если ключ имеет значение true, то он будет включен в строку с набором css-классов, если false - то нет.

[@serhioramires3166]

Немного не для совсем начинающих. Неприятно гремит клавиатура и еще что-то.... В целом спасибо за видео.

[@volselongames4505]

Здарова Друг, а не подскажешь как правильно именовать css модули?

[@evgeniy3370]

Михаил здравствуйте, а можно ли данный гайд использовать для приложения на next.js?

[@bark205]

а как вы решаете проблему inport-normalize - Unknown at-rule ?????

[@mishanep]

Не знаю о какой проблеме идёт речь. Не помню, чтобы встречал.

[@andreybalatsan9336]

Приветствую Михаил, а подскажите такую информацию. В верстке я делал на препроцессоре sass. И у меня был файл style где импортировались все миксины, шрифты, цвета и прочие глобальные привязки, а так же блоки стилей для файлов. А как их привязать в реакте?

[@mishanep]

Я бы предложил посмотреть в сторону css-переменных. Завести их один раз на глобальном уровне, в index.css и использовать их уже по необходимости. С миксинами сложнее. Вероятно, придется их непосредственно в css-подули подключать по необходимости.

[@andreybalatsan9336]

@@mishanep спасибо большое

[@Pipal96]

Просто прекрасно! На столько моих вопросов ответил которые у меня были в голове, что просто восторг!

[@ЕленаКазакова-о1э4и]

спасибо за видео! Не понятно, почему 'медиазапросы через sass писать гораздо удобнее'? В css они же точно так же пишутся, как и в приведённом в ролике примере.

[@mishanep]

В css разве появилась возможность писать вложенные стили? Потом мы рассмотрели базовый пример, для scss есть много подходов значительно упрощающих медиазапросы, чтобы писать не размеры конкретные, а словами mobile, tablet и т.д.

[@BuenosAeros]

а как вы пересохранили файл со стилями, что он не бы минифицирован ? а то у меня венорные префиксы не проставляются

[@oleg_andrianov]

Еще не досмотрел, но хочется вот узнать, почему из index.js удобнее экспортировать компонент, а не из component.jsx?

[@mishanep]

Это фасад. Импорты всегда будут идти из индексного файла, а внутри мы можем менять структуру потом как хотим. Единственное место, где надо будет править импорт, index.js

[@oleg_andrianov]

@@mishanep я делал импорт из jsx файла и из index.js и не заметил разницы. Я наверное что-то упускаю, только не знаю что.

[@2d6ru]

Получается БЭМ поверх modules.css уже бессмысленен (как минимум на уровне компонента), только место будут занимать наименования?

[@mishanep]

Я встречал и помесь модулей с бэм на одном из крупных проектов. Тоже не понял зачем это нужно было))

[@2d6ru]

@@mishanep привычка, м. б. %)

[@vitya.obolonsky]

module.css понижує performance сайту

[@true227]

откуда информация?

[@vitya.obolonsky]

@@true227гугли

[@ramankarseka7362]

а есть ли возможность module.scss описывать вложенные классы? например, класс active для react-router-dom .element{ &.active{ color:red; } }

[@mishanep]

Если вложенный класс формируется не динамически, то вполне.

[@TheTurbobarbitura]

Михаил, а как получить доступ к стилям, при использовании реакта с модулями, из JS? По аналогии с чистым JS - получаем доступ к элементу, потом вешаем на него слушатель события и по, например клику, ()=>{event.target.style.background = 'red'}. Как подобное сделать на реакте с модулем?

[@mishanep]

Приветствую! Здесь скорее вам какие-то булевые ключи в стейте компонента понадобятся и по событиям вы будете обновлять их. А уже от булевых ключей может зависеть набор css-классов, которые вы повесите на тот или иной элемент, либо содержимое атрибута style. Для удобства комбинирования разных css-классов, будь то модули и просто строки, удобно использовать библиотеку classnames или ее аналоги.

[@TheTurbobarbitura]

@@mishanep через хук useRef получилось реализовать. Недооценивал раньше его. Все его преподносят как хук для работы с инпутами. Оказывается через него можно на любой дом элемент воздействовать на прямую.

[@PoRoKLusT]

Спасибо, понятно, уже попробовал - работает, удобно. За видео лайк/подписка. А как подгружать глобальные переменные в модули (например цвета) с общего css файла? В доке написано для этого использовать композицию, например: .otherClassName { composes: className from "./style.css"; } но у меня ругается на слово composes - среда подчеркивает его и пишет unknown property.

[@vitya.obolonsky]

краще звичайни scss заюзать

[@batm1x]

На 15:50 вроде хотели показать как сбрасывать стили, но показали некий normalize, который добавляет какую-то стилизацию. А как сбросить стили в 0? P.S. Аа, normalize это усовершенствованный reset. Только все равно чет не работает, normalize.css подключается к элементу, но стили в нем перечеркнуты. Как сделать, чтоб стили ант дизайна не перекрывали normalize?

[@mishanep]

А зачем вы хотите сбросить стили библиотеки UI элементов? Они ж для того и писались, чтобы их использовать из коробки.

[@batm1x]

@@mishanep уточню, что хотел, почти получилось. В index.css я сначала сбросил стили, подключив reset.css, затем поставил стили из ант. Ниже прописал стиль body, чтоб оставить шрифт, но body стили все равно перечеркнуты на элеменатх, соответственно стиль дефолтный после сброса. Что я делаю не так? @import '~reset-css/reset.css'; @import 'antd/dist/antd.css'; body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 14px; }

[@batm1x]

вроде разобрался, добавил body, html, #root, .wrapper { стили }

[@batm1x]

@@mishanep теперь проблема, если перезагрузить приложение, @import '~reset-css/reset.css' будто загружается последний и не работает(( Если его вручную удалить и поставть - опять ненужные стили сбросятся.

[@batm1x]

@@mishanep всё, реализовал как хотел в index.css стили вставляются в такой последовательности @import 'antd/dist/antd.css'; @import '~reset-css/reset.css';

[@АрчибальтГугенов]

Добрый день! Подскажите, пожалуйста. Например, у меня есть button className={styles.button} Я хочу поменять стили этой кнопке, когда на нее кликну . К примеру, поменяется background-color - button className={styles.buttonActive} В разметке я пишу className={условие ? styles.buttonActive : styles.button}; Но тогда получается мне нужно в стилях помимо background-color дублировать все свойства кнопки, как для активной, так и для пассивной. Как можно оптимизировать этот случай?

[@mishanep]

Вам просто нужно два css-класса передавать на элемент. Один - постоянный с базовыми стилями кнопки, второй - как модификатор, отвечающий за разные состояния.

[@АрчибальтГугенов]

@@mishanep понимаю, о чем вы. Но не знаю, как это выглядит синтаксически. Как передать в эту запись второй класс с модификатором, если она не принимает ничего кроме CamelCase и только один класс? button className={styles.buttonActive}

[@mishanep]

@@АрчибальтГугенов className принимает строку, в строке могут быть пробелы. По сути вы передаёте туда шаблонную строку с постоянной и динамической частью. Либо используете для удобства внешнюю библиотеку вроде classnames

[@АрчибальтГугенов]

@@mishanep понял. Благодарю!

[@yakut54]

Объясни пожалуйста это финт с export { default } from './App'; ну или где почитать про это можно. Не сталкивался с такой записью никогда.

[@mishanep]

Это он экспорт. Импорт и сразу экспорт. Одной строчкой. Default делает реэкспорт того, что было экспортированно по умолчанию.

[@yakut54]

@@mishanep нятно... поиграться надо.

[@madinmt]

Здравствуйте Михаил:) подскажите как добавлять дополнительные классы? На один элемент)

[@mishanep]

Как вариант, можно создать переменную и хранить в ней css классы. Чтобы удобно было работать с классами динамически, можно посмотреть в сторону библиотеки classnames. Она автоматически формирует строку с набором классов по условиям.

[@madinmt]

@@mishanep спасибо😊

[@_kie]

С 15:35 пропадает запись до 16:04.

[@mishanep]

Спасибо, что написали. Поправлю.

[@komdiv4906]

Счас я вам раскажу как устанавливать scss. Поняли? Ну если вы умеете им пользоваться то у вас все получится. Это как я вам показал как прыгать в бассейн. научились? А те кто умеет прыгать знают как в бассейн воду наливать и сделают это.

[@mishanep]

У каждой темы есть пререквизит. Если вы не умеете плавать, то и прыгать в бассейн было бы странно. Если вы работаете с React-приложением, но не умеете пользоваться npm или плохо знаете JavaScript, вероятно вы слишком рано взяли за Реакт. Если же вы не пользуетесь css-препроцессорами, то, может, оно вам и не надо, и вы просто сможете использовать css-модули после просмотра данного видео. По SASS есть целые многочасовые курсы. И изучение данного инструмента в цели этого видео не входило.

[@ВалентинЗырянов-з4ч]

14:13

[@graa999]

что за там-там с барабанами на фоне всё время звучат? Инфа вроде полезная ,но мои уши...

[@xxxhonda]

Подскажите, пожалуйста, что это за тема explorer'а такая? Не могу понять, как загуглить

[@RK-yk3hj]

супер канал, просто бомба

[@mivalb7979]

Спасибо, полезное видео!

[@Алексей-т2х8й]

+

[@vladimirplyukhin5234]

Михаил, добрый день Появился вопрос: скажите, пожалуйста, если я использую SCSS и module.scss, то можно обойтись без BEM naming в среднем по-размеру проекте? Или лучше разбивать по module с BEM naming?

[@mishanep]

Да, вполне можно обойтись без бэм.

[@vladimirplyukhin5234]

@@mishanep Спасибо!

[@littlegrownbeats]

Очень классно и просто! Все что нужно! Огромная благодарность!)