Михаил, спасибище огромнейшее. Про общие и модуле после курсов было понятно и использовал модули, а вот про sass/scss ничего не знал, но у нас большинство работодателей требуют это и за 18 минут я овладел знаниями))))) просто супер!
Спасибо, Михаил! Ваши объяснения легкие и понятные, как-будто я и так все это знаю и умею. Вы учите так, что в каждом слове чувствуется уверенность в том, что делаете, и опыт. Все ясно и понятно.
Большое спасибо за это видео! За 18 мин получила больше информации, чем из множества других) видео ответило на все вопросы по стилизации в реакт, даже на те, которые я здесь и не искала)
Очень нравятся ваши видео, одни из лучших объяснений на ютубе! По SCSS - никак не пойму его использование при модульном подходе. Вложенность это удобно, но ведь это далеко не все возможности SCSS. Но идея делать импорты миксинов и прочего в модульные файлы кажется мне неправильной - ведь модульные файлы подразумевают некую независимость? А если мы будем делать импорты, то они обрастут этими зависимостями с внешними файлами
На 3:17 вы добавляете в папку с компонентом файл index.js и говорите, чтобы "комфортно это дело экспортировать". Так и не понял для чего это нужно? Файл же пустой? Я так понял.
Видео полезное спасибо,а да как я понял в jsx можно забыть про работу с css посредством native js?да и html элементы выбирать уже не получится?а что делать если хочешь прочитать или создать свои свойства в тэгах html
спасибо за видео! Не понятно, почему 'медиазапросы через sass писать гораздо удобнее'? В css они же точно так же пишутся, как и в приведённом в ролике примере.
В css разве появилась возможность писать вложенные стили? Потом мы рассмотрели базовый пример, для scss есть много подходов значительно упрощающих медиазапросы, чтобы писать не размеры конкретные, а словами mobile, tablet и т.д.
Приветствую Михаил, а подскажите такую информацию. В верстке я делал на препроцессоре sass. И у меня был файл style где импортировались все миксины, шрифты, цвета и прочие глобальные привязки, а так же блоки стилей для файлов. А как их привязать в реакте?
Я бы предложил посмотреть в сторону css-переменных. Завести их один раз на глобальном уровне, в index.css и использовать их уже по необходимости. С миксинами сложнее. Вероятно, придется их непосредственно в css-подули подключать по необходимости.
Приветствую! Могу не до конца понять вопрос, но попробую ответить. Я так понял, что речь конкретно про 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 - то нет.
Добрый день! Подскажите, пожалуйста. Например, у меня есть button className={styles.button} Я хочу поменять стили этой кнопке, когда на нее кликну . К примеру, поменяется background-color - button className={styles.buttonActive} В разметке я пишу className={условие ? styles.buttonActive : styles.button}; Но тогда получается мне нужно в стилях помимо background-color дублировать все свойства кнопки, как для активной, так и для пассивной. Как можно оптимизировать этот случай?
Вам просто нужно два css-класса передавать на элемент. Один - постоянный с базовыми стилями кнопки, второй - как модификатор, отвечающий за разные состояния.
@@mishanep понимаю, о чем вы. Но не знаю, как это выглядит синтаксически. Как передать в эту запись второй класс с модификатором, если она не принимает ничего кроме CamelCase и только один класс? button className={styles.buttonActive}
@@АрчибальтГугенов className принимает строку, в строке могут быть пробелы. По сути вы передаёте туда шаблонную строку с постоянной и динамической частью. Либо используете для удобства внешнюю библиотеку вроде classnames
На 15:50 вроде хотели показать как сбрасывать стили, но показали некий normalize, который добавляет какую-то стилизацию. А как сбросить стили в 0? P.S. Аа, normalize это усовершенствованный reset. Только все равно чет не работает, normalize.css подключается к элементу, но стили в нем перечеркнуты. Как сделать, чтоб стили ант дизайна не перекрывали normalize?
@@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; }
@@mishanep теперь проблема, если перезагрузить приложение, @import '~reset-css/reset.css' будто загружается последний и не работает(( Если его вручную удалить и поставть - опять ненужные стили сбросятся.
@@mishanep всё, реализовал как хотел в index.css стили вставляются в такой последовательности @import 'antd/dist/antd.css'; @import '~reset-css/reset.css';
Это фасад. Импорты всегда будут идти из индексного файла, а внутри мы можем менять структуру потом как хотим. Единственное место, где надо будет править импорт, index.js
Михаил, а как получить доступ к стилям, при использовании реакта с модулями, из JS? По аналогии с чистым JS - получаем доступ к элементу, потом вешаем на него слушатель события и по, например клику, ()=>{event.target.style.background = 'red'}. Как подобное сделать на реакте с модулем?
Приветствую! Здесь скорее вам какие-то булевые ключи в стейте компонента понадобятся и по событиям вы будете обновлять их. А уже от булевых ключей может зависеть набор css-классов, которые вы повесите на тот или иной элемент, либо содержимое атрибута style. Для удобства комбинирования разных css-классов, будь то модули и просто строки, удобно использовать библиотеку classnames или ее аналоги.
@@mishanep через хук useRef получилось реализовать. Недооценивал раньше его. Все его преподносят как хук для работы с инпутами. Оказывается через него можно на любой дом элемент воздействовать на прямую.
Михаил, добрый день Появился вопрос: скажите, пожалуйста, если я использую SCSS и module.scss, то можно обойтись без BEM naming в среднем по-размеру проекте? Или лучше разбивать по module с BEM naming?
Как вариант, можно создать переменную и хранить в ней css классы. Чтобы удобно было работать с классами динамически, можно посмотреть в сторону библиотеки classnames. Она автоматически формирует строку с набором классов по условиям.
Спасибо, понятно, уже попробовал - работает, удобно. За видео лайк/подписка. А как подгружать глобальные переменные в модули (например цвета) с общего css файла? В доке написано для этого использовать композицию, например: .otherClassName { composes: className from "./style.css"; } но у меня ругается на слово composes - среда подчеркивает его и пишет unknown property.
Счас я вам раскажу как устанавливать scss. Поняли? Ну если вы умеете им пользоваться то у вас все получится. Это как я вам показал как прыгать в бассейн. научились? А те кто умеет прыгать знают как в бассейн воду наливать и сделают это.
У каждой темы есть пререквизит. Если вы не умеете плавать, то и прыгать в бассейн было бы странно. Если вы работаете с React-приложением, но не умеете пользоваться npm или плохо знаете JavaScript, вероятно вы слишком рано взяли за Реакт. Если же вы не пользуетесь css-препроцессорами, то, может, оно вам и не надо, и вы просто сможете использовать css-модули после просмотра данного видео. По SASS есть целые многочасовые курсы. И изучение данного инструмента в цели этого видео не входило.
Капец музыкальная вставка напугала без предупреждения)))) Я полез проверять откуда звук идет по соседним вкладкам ))) За видео спасибо
Михаил, спасибище огромнейшее. Про общие и модуле после курсов было понятно и использовал модули, а вот про sass/scss ничего не знал, но у нас большинство работодателей требуют это и за 18 минут я овладел знаниями))))) просто супер!
Вот люблю такие видео - где не спеша и все по полочкам, но при этом без лишней воды 👍
Спасибо, Михаил! Ваши объяснения легкие и понятные, как-будто я и так все это знаю и умею. Вы учите так, что в каждом слове чувствуется уверенность в том, что делаете, и опыт. Все ясно и понятно.
Большое спасибо за это видео! За 18 мин получила больше информации, чем из множества других) видео ответило на все вопросы по стилизации в реакт, даже на те, которые я здесь и не искала)
Просто прекрасно! На столько моих вопросов ответил которые у меня были в голове, что просто восторг!
какое замечательное объяснение, спасибо большое
Именно то, что искал!
Спасибо тебе большое, бро 🔥
Спасибо. Наконец-то нашёл видео, в котором рассказали про префиксы.
Спасибо большое!
Все четко и по делу!
Спасибо. Согласен с комментариями. Очень кратко и по делу.
Спасибо! Очень здорово информация структурирована и преподнесена!
Очень полезный и понятный урок, спасибо тебе
Как всегда лаконично и понятно, огромное спасибо за такой информативный канал!)
Спасибо большое! Очень просто объяснили :)
Спасибо большое! Максимально понятно и быстро
Спасибо за видео !всегда приятно слушать вас
Миша, Спасибо за науку!
Круто🔥
круто, спасибо Миша, очень чётко, всё по полочкам, всё понятно 👍👍👍👍👍👍
Супер! Спасибо!
Прикольно, спс за видос.
супер канал, просто бомба
Круто, спасибо!
Очень нравятся ваши видео, одни из лучших объяснений на ютубе!
По SCSS - никак не пойму его использование при модульном подходе. Вложенность это удобно, но ведь это далеко не все возможности SCSS. Но идея делать импорты миксинов и прочего в модульные файлы кажется мне неправильной - ведь модульные файлы подразумевают некую независимость? А если мы будем делать импорты, то они обрастут этими зависимостями с внешними файлами
Зависит от настроек. У нас на проекте мы не импортируем миксины, но используем их. Пришлось пошаманить немного с настройками сборки.
@@mishanep оо вот где собака зарыта, спасибо! Теперь понятно, в какую сторону копать)
Спасибо, полезное видео!
На 3:17 вы добавляете в папку с компонентом файл index.js и говорите, чтобы "комфортно это дело экспортировать". Так и не понял для чего это нужно? Файл же пустой? Я так понял.
такая же фигня
оттуда происходит реэкспорт стилей, чтобы у импорта ссылка была не сильно громоздкой, если ошибаюсь - поправьте 😅
Михаил, спасибо!
У меня к сожалению less c css-modules не заработал.
Спасибо !
5/5 звезд тебе.
Отличное видео! А про styled components у Вас есть видео?
Отдельного нет. Был проект про страны, где он для стилизации использовался.
Спасибо! Посмотрю.
Видео полезное спасибо,а да как я понял в jsx можно забыть про работу с css посредством native js?да и html элементы выбирать уже не получится?а что делать если хочешь прочитать или создать свои свойства в тэгах html
Здарова Друг, а не подскажешь как правильно именовать css модули?
Михаил здравствуйте, а можно ли данный гайд использовать для приложения на next.js?
спасибо за видео! Не понятно, почему 'медиазапросы через sass писать гораздо удобнее'? В css они же точно так же пишутся, как и в приведённом в ролике примере.
В css разве появилась возможность писать вложенные стили?
Потом мы рассмотрели базовый пример, для scss есть много подходов значительно упрощающих медиазапросы, чтобы писать не размеры конкретные, а словами mobile, tablet и т.д.
а как вы решаете проблему inport-normalize - Unknown at-rule ?????
Не знаю о какой проблеме идёт речь. Не помню, чтобы встречал.
Приветствую Михаил, а подскажите такую информацию. В верстке я делал на препроцессоре sass. И у меня был файл style где импортировались все миксины, шрифты, цвета и прочие глобальные привязки, а так же блоки стилей для файлов. А как их привязать в реакте?
Я бы предложил посмотреть в сторону css-переменных. Завести их один раз на глобальном уровне, в index.css и использовать их уже по необходимости.
С миксинами сложнее. Вероятно, придется их непосредственно в css-подули подключать по необходимости.
@@mishanep спасибо большое
Отличное видео! А как при таком подходе обращаться из js к сгенерированным классам, например для анимации?
Приветствую!
Могу не до конца понять вопрос, но попробую ответить.
Я так понял, что речь конкретно про 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 - то нет.
Очень классно и просто! Все что нужно! Огромная благодарность!)
Добрый день! Подскажите, пожалуйста. Например, у меня есть button className={styles.button}
Я хочу поменять стили этой кнопке, когда на нее кликну . К примеру, поменяется background-color - button className={styles.buttonActive}
В разметке я пишу className={условие ? styles.buttonActive : styles.button};
Но тогда получается мне нужно в стилях помимо background-color дублировать все свойства кнопки, как для активной, так и для пассивной.
Как можно оптимизировать этот случай?
Вам просто нужно два css-класса передавать на элемент. Один - постоянный с базовыми стилями кнопки, второй - как модификатор, отвечающий за разные состояния.
@@mishanep понимаю, о чем вы. Но не знаю, как это выглядит синтаксически. Как передать в эту запись второй класс с модификатором, если она не принимает ничего кроме CamelCase и только один класс?
button className={styles.buttonActive}
@@АрчибальтГугенов className принимает строку, в строке могут быть пробелы. По сути вы передаёте туда шаблонную строку с постоянной и динамической частью. Либо используете для удобства внешнюю библиотеку вроде classnames
@@mishanep понял. Благодарю!
На 15:50 вроде хотели показать как сбрасывать стили, но показали некий normalize, который добавляет какую-то стилизацию. А как сбросить стили в 0? P.S. Аа, normalize это усовершенствованный reset. Только все равно чет не работает, normalize.css подключается к элементу, но стили в нем перечеркнуты. Как сделать, чтоб стили ант дизайна не перекрывали normalize?
А зачем вы хотите сбросить стили библиотеки UI элементов? Они ж для того и писались, чтобы их использовать из коробки.
@@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;
}
вроде разобрался, добавил body,
html,
#root,
.wrapper {
стили
}
@@mishanep теперь проблема, если перезагрузить приложение, @import '~reset-css/reset.css' будто загружается последний и не работает(( Если его вручную удалить и поставть - опять ненужные стили сбросятся.
@@mishanep всё, реализовал как хотел
в index.css стили вставляются в такой последовательности
@import 'antd/dist/antd.css';
@import '~reset-css/reset.css';
Еще не досмотрел, но хочется вот узнать, почему из index.js удобнее экспортировать компонент, а не из component.jsx?
Это фасад. Импорты всегда будут идти из индексного файла, а внутри мы можем менять структуру потом как хотим. Единственное место, где надо будет править импорт, index.js
@@mishanep я делал импорт из jsx файла и из index.js и не заметил разницы. Я наверное что-то упускаю, только не знаю что.
Получается БЭМ поверх modules.css уже бессмысленен (как минимум на уровне компонента), только место будут занимать наименования?
Я встречал и помесь модулей с бэм на одном из крупных проектов. Тоже не понял зачем это нужно было))
@@mishanep привычка, м. б. %)
а как вы пересохранили файл со стилями, что он не бы минифицирован ? а то у меня венорные префиксы не проставляются
Михаил, а как получить доступ к стилям, при использовании реакта с модулями, из JS? По аналогии с чистым JS - получаем доступ к элементу, потом вешаем на него слушатель события и по, например клику, ()=>{event.target.style.background = 'red'}. Как подобное сделать на реакте с модулем?
Приветствую!
Здесь скорее вам какие-то булевые ключи в стейте компонента понадобятся и по событиям вы будете обновлять их. А уже от булевых ключей может зависеть набор css-классов, которые вы повесите на тот или иной элемент, либо содержимое атрибута style.
Для удобства комбинирования разных css-классов, будь то модули и просто строки, удобно использовать библиотеку classnames или ее аналоги.
@@mishanep через хук useRef получилось реализовать. Недооценивал раньше его. Все его преподносят как хук для работы с инпутами. Оказывается через него можно на любой дом элемент воздействовать на прямую.
Если что сейчас node-sass уже устарел, так что нужен просто sass пакет
Михаил, добрый день
Появился вопрос: скажите, пожалуйста, если я использую SCSS и module.scss, то можно обойтись без BEM naming в среднем по-размеру проекте?
Или лучше разбивать по module с BEM naming?
Да, вполне можно обойтись без бэм.
@@mishanep Спасибо!
а есть ли возможность module.scss описывать вложенные классы?
например, класс active для react-router-dom
.element{
&.active{
color:red;
}
}
Если вложенный класс формируется не динамически, то вполне.
Объясни пожалуйста это финт с export { default } from './App';
ну или где почитать про это можно. Не сталкивался с такой записью никогда.
Это он экспорт. Импорт и сразу экспорт. Одной строчкой. Default делает реэкспорт того, что было экспортированно по умолчанию.
@@mishanep нятно... поиграться надо.
Здравствуйте Михаил:) подскажите как добавлять дополнительные классы? На один элемент)
Как вариант, можно создать переменную и хранить в ней css классы. Чтобы удобно было работать с классами динамически, можно посмотреть в сторону библиотеки classnames. Она автоматически формирует строку с набором классов по условиям.
@@mishanep спасибо😊
Спасибо, понятно, уже попробовал - работает, удобно. За видео лайк/подписка.
А как подгружать глобальные переменные в модули (например цвета) с общего css файла? В доке написано для этого использовать композицию, например:
.otherClassName {
composes: className from "./style.css";
}
но у меня ругается на слово composes - среда подчеркивает его и пишет unknown property.
краще звичайни scss заюзать
module.css понижує performance сайту
откуда информация?
@@true227гугли
Немного не для совсем начинающих. Неприятно гремит клавиатура и еще что-то....
В целом спасибо за видео.
С 15:35 пропадает запись до 16:04.
Спасибо, что написали. Поправлю.
14:13
+
Счас я вам раскажу как устанавливать scss. Поняли? Ну если вы умеете им пользоваться то у вас все получится. Это как я вам показал как прыгать в бассейн. научились? А те кто умеет прыгать знают как в бассейн воду наливать и сделают это.
У каждой темы есть пререквизит. Если вы не умеете плавать, то и прыгать в бассейн было бы странно. Если вы работаете с React-приложением, но не умеете пользоваться npm или плохо знаете JavaScript, вероятно вы слишком рано взяли за Реакт. Если же вы не пользуетесь css-препроцессорами, то, может, оно вам и не надо, и вы просто сможете использовать css-модули после просмотра данного видео. По SASS есть целые многочасовые курсы. И изучение данного инструмента в цели этого видео не входило.
что за там-там с барабанами на фоне всё время звучат? Инфа вроде полезная ,но мои уши...
Подскажите, пожалуйста, что это за тема explorer'а такая? Не могу понять, как загуглить