Till_Its_Gone

Пользователь

Регистрация: 14.04.2020

Сообщения: 562

Рейтинг: -2

Нарушения: 100

Till_Its_Gone

Регистрация: 14.04.2020

Сообщения: 562

Рейтинг: -2

Нарушения: 100

dorisᅠ сказал(а):


В связке с этой штукой https://styled-system.com/ очень даже неплохо получается


Нажмите, чтобы раскрыть...


а вторая штука что дает? Я чет не очень понял

dorisᅠ

Пользователь

Регистрация: 20.07.2015

Сообщения: 89

Рейтинг: 88

dorisᅠ

Регистрация: 20.07.2015

Сообщения: 89

Рейтинг: 88

Till_Its_Gone сказал(а):


а вторая штука что дает? Я чет не очень понял


Нажмите, чтобы раскрыть...



Вместо того чтобы создавать styled константу:




const Box = styled.div`


display: flex;


flex-direction: column;
margin-right: 16px;


`;

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








Можно еще всякие твиксы с ним проделать, например чтобы он принимал проп row или col, и тогда пример выше можно будет заменить на











UPD: черт, сайт стирает теги которые я пишу xd



sinkari

Пользователь

Регистрация: 19.05.2020

Сообщения: 551

Рейтинг: 600

sinkari

Регистрация: 19.05.2020

Сообщения: 551

Рейтинг: 600

dorisᅠ сказал(а):



Вместо того чтобы создавать styled константу:




const Box = styled.div`


display: flex;


flex-direction: column;
margin-right: 16px;


`;

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




q4mH1fU.png





Можно еще всякие твиксы с ним проделать, например чтобы он принимал проп row или col, и тогда пример выше можно будет заменить на






V1nmfak.png






UPD: черт, сайт стирает теги которые я пишу xd




Нажмите, чтобы раскрыть...


То есть это используется в больших проектах, чтобы упростить структуру кода?

Insecure

Пользователь

Регистрация: 28.05.2016

Сообщения: 3703

Рейтинг: 757

Insecure

Регистрация: 28.05.2016

Сообщения: 3703

Рейтинг: 757

img

sinkari сказал(а):


Всем приветpepeshapka.png


В этой теме буду отмечать свой прогресс в освоении профессии фронтенд-разработчикаpepecool.png




Задача: в сентябре 2020 попасть на стажировку в одну из IT-компаний моего регионаRussia.png?1568474843


Что я уже знаю

как сверстать простую страничку, как адаптировать эту страничку под экраны с разным разрешением.

знаю js на уровне function iBan(){alert("You are banned");}


2020

май


Вопросы местным фронтенд-аксакалам

Используете ли вы в своей работе БЭМ методологию? Аналогичный вопрос про css гриды.


Нажмите, чтобы раскрыть...


Ну шо товарищ, рассказывай как успехи, с какими сложностями сталкивался?

dorisᅠ

Пользователь

Регистрация: 20.07.2015

Сообщения: 89

Рейтинг: 88

dorisᅠ

Регистрация: 20.07.2015

Сообщения: 89

Рейтинг: 88

sinkari сказал(а):


То есть это используется в больших проектах, чтобы упростить структуру кода?


Нажмите, чтобы раскрыть...


Да, так значительно удобнее, чем каждый раз создовать новую константу.

Просто делаешь в одном месте компонент Box, импортиртируешь его где угодно, и юзаешь с разными свойствами.

Там так же можно компонент Text сделать, который будет принимать в себя fontSize, textAlign, fontWeight и другие свойства связанные с текстом.

sinkari

Пользователь

Регистрация: 19.05.2020

Сообщения: 551

Рейтинг: 600

sinkari

Регистрация: 19.05.2020

Сообщения: 551

Рейтинг: 600

Insecure сказал(а):


Ну шо товарищ, рассказывай как успехи, с какими сложностями сталкивался?


Нажмите, чтобы раскрыть...


Сложности пока что банальные - в голове каша, стараюсь структурировать как могу, конспектирую, но мне кажется, инфа уляжется только со временем.



Шрек 2

Пользователь

Регистрация: 24.03.2018

Сообщения: 4170

Рейтинг: 2264

Шрек 2

Регистрация: 24.03.2018

Сообщения: 4170

Рейтинг: 2264

sinkari сказал(а):


Задача: в сентябре 2020 попасть на стажировку в одну из IT-компаний моего регионаRussia.png?1568474843


Нажмите, чтобы раскрыть...


За 4 месяца стажером? За это время можно джуном стать. Удачи


sinkari сказал(а):


Используете ли вы в своей работе БЭМ методологию?


Нажмите, чтобы раскрыть...


Не очень ее люблю, только если еще на проекте есть люди, которые ее юзают


sinkari сказал(а):


Аналогичный вопрос про css гриды.


Нажмите, чтобы раскрыть...


Раз в месяц, все остальное делаю на флексах

ke1evra

Пользователь

Регистрация: 25.12.2012

Сообщения: 1438

Рейтинг: 1296

ke1evra

Регистрация: 25.12.2012

Сообщения: 1438

Рейтинг: 1296

img

sinkari сказал(а):


Сложности пока что банальные - в голове каша, стараюсь структурировать как могу, конспектирую, но мне кажется, инфа уляжется только со временем.




Нажмите, чтобы раскрыть...


Каша это нормально, и она всегда будет.


Инфа уляжется только с опытом, просто нужно помнить, где что подсмотреть.


Посмотрел эту БЭМ методологию, тихо поржал... Суть методологии - код должен быть понятным, а названия логичными, исходя из предназначения. В общем всё по здравому смыслу. Один минус - расписано на 100500 букаф, всё, как любят в наших учебных заведениях - налить водички побольше для создания "мощности", а в идеале ещё и взять оплату за целый курс на несколько месяцев, который объясняется за пару часов.

Ramdesu

Пользователь

Регистрация: 05.07.2018

Сообщения: 718

Рейтинг: 402

Ramdesu

Регистрация: 05.07.2018

Сообщения: 718

Рейтинг: 402

Till_Its_Gone сказал(а):


что насчет этой штуки?
https://styled-components.com/


Нажмите, чтобы раскрыть...


А, если ты спросил, как я отношусь к нему и тебе интересно мое мнение, то мне нравится) удобная штука

Till_Its_Gone

Пользователь

Регистрация: 14.04.2020

Сообщения: 562

Рейтинг: -2

Нарушения: 100

Till_Its_Gone

Регистрация: 14.04.2020

Сообщения: 562

Рейтинг: -2

Нарушения: 100

Ramdesu сказал(а):


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


Нажмите, чтобы раскрыть...


я не особо чето понял, я просто спросил про либу) мне до ваших бэмов до лампы

Ramdesu

Пользователь

Регистрация: 05.07.2018

Сообщения: 718

Рейтинг: 402

Ramdesu

Регистрация: 05.07.2018

Сообщения: 718

Рейтинг: 402

Till_Its_Gone сказал(а):


я не особо чето понял, я просто спросил про либу) мне до ваших бэмов до лампы


Нажмите, чтобы раскрыть...


Дополнил сверху)

dorisᅠ

Пользователь

Регистрация: 20.07.2015

Сообщения: 89

Рейтинг: 88

dorisᅠ

Регистрация: 20.07.2015

Сообщения: 89

Рейтинг: 88

Ramdesu сказал(а):


В стайлед компонентах можно же точно так же пропс прокинуть, разве нет? Либу еще не смотрел


Нажмите, чтобы раскрыть...


Нет

Ramdesu

Пользователь

Регистрация: 05.07.2018

Сообщения: 718

Рейтинг: 402

Ramdesu

Регистрация: 05.07.2018

Сообщения: 718

Рейтинг: 402

dorisᅠ сказал(а):


Нет


Нажмите, чтобы раскрыть...


Ну как нет, если да? В стайледах можно пропы прокидывать и эти пропы потом можно использовать внутри темплейтной строки, в которой стили определяются. Или же если там просто ВСЕ css свойства и они автоматически применяются без определения их в темплейтной строке, то имхо это слегка туповато, потому что сначала мы пытаемся уйти от аттрибутов со стилями в HTML в пользу CSS, а потом мы уходим от CSS в пользу аттрибутов в JSX =/

dorisᅠ

Пользователь

Регистрация: 20.07.2015

Сообщения: 89

Рейтинг: 88

dorisᅠ

Регистрация: 20.07.2015

Сообщения: 89

Рейтинг: 88

Ramdesu сказал(а):


Ну как нет, если да? В стайледах можно пропы прокидывать и эти пропы потом можно использовать внутри темплейтной строки, в которой стили определяются. Или же если там просто ВСЕ css свойства и они автоматически применяются без определения их в темплейтной строке, то имхо это слегка туповато, потому что сначала мы пытаемся уйти от аттрибутов со стилями в HTML в пользу CSS, а потом мы уходим от CSS в пользу аттрибутов в JSX =/


Нажмите, чтобы раскрыть...



Офк ты можешь в styled компонент прокидывать проп, но только для того чтобы его использовать в самих стилях, например

const Box = styled.div`


${props => props.active && css`
color: green;
`}


`;

aQuere

Пользователь

Регистрация: 19.07.2016

Сообщения: 4825

Рейтинг: 1140

aQuere

Регистрация: 19.07.2016

Сообщения: 4825

Рейтинг: 1140

sinkari сказал(а):


Сложности пока что банальные - в голове каша, стараюсь структурировать как могу, конспектирую, но мне кажется, инфа уляжется только со временем.




Нажмите, чтобы раскрыть...


Офк уляжется. Мозгу нужно время для адаптации

Ixfus

Пользователь

Регистрация: 20.07.2013

Сообщения: 3055

Рейтинг: 877

Ixfus

Регистрация: 20.07.2013

Сообщения: 3055

Рейтинг: 877

Ramdesu сказал(а):


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




Нажмите, чтобы раскрыть...


БЭМ в основном не про нейминг, а именно про структуру из независимых блоков.

Ramdesu

Пользователь

Регистрация: 05.07.2018

Сообщения: 718

Рейтинг: 402

Ramdesu

Регистрация: 05.07.2018

Сообщения: 718

Рейтинг: 402

Ixfus сказал(а):


БЭМ в основном не про нейминг, а именно про структуру из независимых блоков


Нажмите, чтобы раскрыть...


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

Meepka

Пользователь

Регистрация: 08.10.2012

Сообщения: 1944

Рейтинг: 484

Meepka

Регистрация: 08.10.2012

Сообщения: 1944

Рейтинг: 484

Ixfus сказал(а):


БЭМ и гриды прекрасны. Если есть карточки – грид незаменим.
В микропроектах БЭМ не окупается (если делать лендинг или сайт из пары страниц)


Нажмите, чтобы раскрыть...


Гриды - фигня полная, нет смысла их использовать вообще.
Не используешь БЭМ даже на 5 строка кода - можешь ливать с профессии.



Ixfus

Пользователь

Регистрация: 20.07.2013

Сообщения: 3055

Рейтинг: 877

Ixfus

Регистрация: 20.07.2013

Сообщения: 3055

Рейтинг: 877

Meepka сказал(а):


Мне даже интересно увидеть твой код, как ты там вообще без БЭМ обходишься.






Гриды - фигня полная, нет смысла их использовать вообще.
Не используешь БЭМ даже на 5 строка кода - можешь ливать с профессии.




Нажмите, чтобы раскрыть...


Хотелось бы увидеть реализацию блока дефолтных карточек с адаптивом (без миллиона медиазапросов) или нетривиальной сетки без гридов.

Meepka

Пользователь

Регистрация: 08.10.2012

Сообщения: 1944

Рейтинг: 484

Meepka

Регистрация: 08.10.2012

Сообщения: 1944

Рейтинг: 484

Ixfus сказал(а):


Хотелось бы увидеть реализацию блока дефолтных карточек с адаптивом (без миллиона медиазапросов) или нетривиальной сетки без гридов.


Нажмите, чтобы раскрыть...


Ну вот ты сделай на гридах и скажи - "вот реализуй такое на флексах". Ибо так я тебе покажу, а ты скажешь да ты не правильно понял и тд. Знаем таких.

mallfite

Пользователь

Регистрация: 19.05.2020

Сообщения: 418

Рейтинг: 182

mallfite

Регистрация: 19.05.2020

Сообщения: 418

Рейтинг: 182

img

Meepka сказал(а):


Ну вот ты сделай на гридах и скажи - "вот реализуй такое на флексах". Ибо так я тебе покажу, а ты скажешь да ты не правильно понял и тд. Знаем таких.


Нажмите, чтобы раскрыть...


grid-template-areas и твой флекс нервно курит в сторонке =)

Ixfus

Пользователь

Регистрация: 20.07.2013

Сообщения: 3055

Рейтинг: 877

Ixfus

Регистрация: 20.07.2013

Сообщения: 3055

Рейтинг: 877

Meepka сказал(а):


Ну вот ты сделай на гридах и скажи - "вот реализуй такое на флексах". Ибо так я тебе покажу, а ты скажешь да ты не правильно понял и тд. Знаем таких.


Нажмите, чтобы раскрыть...


И без пафоса "единственно-правильности", пожалуйста.




что-нибудь такое https://codepen.io/Ixxy/pen/OJyGRqP


или эти примеры из MDN https://developer.mozilla.org/ru/docs/Web/CSS/grid-template-areas




И меня интересует не сама возможность реализации, а аналогичная по ресурсам и количеству костылей.

Meepka

Пользователь

Регистрация: 08.10.2012

Сообщения: 1944

Рейтинг: 484

Meepka

Регистрация: 08.10.2012

Сообщения: 1944

Рейтинг: 484

Ixfus сказал(а):


И без пафоса "единственно-правильности", пожалуйста.




что-нибудь такое https://codepen.io/Ixxy/pen/OJyGRqP


или эти примеры из MDN https://developer.mozilla.org/ru/docs/Web/CSS/grid-template-areas




И меня интересует не сама возможность реализации, а аналогичная по ресурсам и количеству костылей.


Нажмите, чтобы раскрыть...


https://codepen.io/grimmino/pen/bGVJwPp?editors=1100

Siller__

Пользователь

Регистрация: 31.10.2014

Сообщения: 1484

Рейтинг: 468

Siller__

Регистрация: 31.10.2014

Сообщения: 1484

Рейтинг: 468

Meepka сказал(а):
Нажмите, чтобы раскрыть...


избыточная вложенность(upd) которая доджится гридами

Meepka

Пользователь

Регистрация: 08.10.2012

Сообщения: 1944

Рейтинг: 484

Meepka

Регистрация: 08.10.2012

Сообщения: 1944

Рейтинг: 484

Siller__ сказал(а):


избыточная вложенность


Нажмите, чтобы раскрыть...


Смешная шутка. Оценил.