Бесплатная верстка крафта оружия

[RamonIl]

Верстка крафта оружия для @RandomchikTT
Кому не сложно разобрать код, хотел бы услышать ревью своего кода

 

[Mikhayloff]

о, мой старый дизайн, как неожиданно и приятно)

 

[Amazingevich]

@UchihaMadara о великий, тебя призывают для ревью
Быстрее делать, хоть кто-то тебя сам об этом попросил

 

[Mikhayloff]

@UchihaMadara о великий, тебя призывают для ревью
Быстрее делать, хоть кто-то тебя сам об этом попросил

не буль братан)

 

[UchihaMadara]

@UchihaMadara о великий, тебя призывают для ревью
Быстрее делать, хоть кто-то тебя сам об этом попросил

Залью ближе к вечеру

 

[delmx]

1.
1.1. Для чего хэдеру фикс ширина? Задай 100%
1.2. Задай классы #craft-weapon header div и внутренним спанам(#craft-weapon header div > span:nth-child(1) тебе самому не лень такое писать?).
1.2.1. Ненужный спан, display flex для того чтобы дать margin-bottom и еще непонятный align-items: center. Замени span на p, убери display: flex и align-items: center = лишние 4 строки

2.
2.1. Опять лень задать классы элементам ):

3.
3.1.. Если задал фикс. высоту, то сделай на крайний случай скролл. Удалим пару элементов и они разъезжаются из-за ненужного display: flex. Почему просто не задать потомкам отступ снизу?

4.
4.1. Флекс ради флекса? На кой черт он тут нужен? Ну и кнопку можно было бы сделать через button
4.2. name-section: зачем margin-top? Зачем флекс? Фикс ширина(для примера поставил Revolver 6667) и в итоге будет на 3 строчки.
4.3. descript-section: зачем флекс? Зачем фикс ширина? Задай одну фикс ширину родителю '.info-slot'

5.
5.1. Опять флекс. Зачем фикс. ширина и высота? Если их будет больше 10000? position: absolute, но двигаем через margin.

Основное это ненужные флексы и очень длинный доступ к элементам в css( = дать классы и проблема решиться)

 

[UchihaMadara]

*Бог дал человеку flex
Животное: убери flex

 

[RamonIl]

1.Посмотреть вложение 2915
1.1. Для чего хэдеру фикс ширина? Задай 100%
1.2. Задай классы #craft-weapon header div и внутренним спанам(#craft-weapon header div > span:nth-child(1) тебе самому не лень такое писать?).
1.2.1. Ненужный спан, display flex для того чтобы дать margin-bottom и еще непонятный align-items: center. Замени span на p, убери display: flex и align-items: center = лишние 4 строки

2. Посмотреть вложение 2916
2.1. Опять лень задать классы элементам ):

3. Посмотреть вложение 2918
3.1.. Если задал фикс. высоту, то сделай на крайний случай скролл. Удалим пару элементов и они разъезжаются из-за ненужного display: flex. Почему просто не задать потомкам отступ снизу?

4. Посмотреть вложение 2919
4.1. Флекс ради флекса? На кой черт он тут нужен? Ну и кнопку можно было бы сделать через button
4.2. name-section: зачем margin-top? Зачем флекс? Фикс ширина(для примера поставил Revolver 6667) и в итоге будет на 3 строчки.
4.3. descript-section: зачем флекс? Зачем фикс ширина? Задай одну фикс ширину родителю '.info-slot'

5. Посмотреть вложение 2921
5.1. Опять флекс. Зачем фикс. ширина и высота? Если их будет больше 10000? Посмотреть вложение 2922 position: absolute, но двигаем через margin.

Основное это ненужные флексы и очень длинный доступ к элементам в css( = дать классы и проблема решиться)

Спасибо.
Немного разберу вместе с тобой

Задай классы #craft-weapon header div и внутренним спанам(#craft-weapon header div > span:nth-child(1) тебе самому не лень такое писать?).

Я работаю с SCSS и мне не приходится писать такой длинный код

Если задал фикс. высоту, то сделай на крайний случай скролл. Удалим пару элементов и они разъезжаются из-за ненужного display: flex. Почему просто не задать потомкам отступ снизу?

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

2.1. Опять лень задать классы элементам ):

Тут как по мне классы вообще не нужны, я же обращаюсь ко всем блокам div, которые там находятся. Классы были бы излишними в этом случае

По поводу flex ради флекса, если будет описание чуть меньше/больше, то будет съезжать кнопка, если конечно им не добавить фиксированую высоту, но это опять лишние строки - о которых ты так-же говорил.

Спасибо за разбор, все учту.

 

[delmx]

*Бог дал человеку flex
Животное: убери flex

Люди: читают спецификации
Чучело: * { display: flex; align-items: center }

 

[UchihaMadara]

Люди: читают спецификации
Чучело: * { display: flex; align-items: center }

Люди читают, да.
А что ты, цепной пёс, можешь там читать? Гайды на World of tanks?

 

[delmx]

Я работаю с SCSS и мне не приходится писать такой длинный код

div > span:nth-child(1) или какой-то .el-text внутри div'a - что короче и понятнее?

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

Ок, в будущем захочу добавить в крафт еще гранаты, бронежилеты - все будет в кучу

Тут как по мне классы вообще не нужны, я же обращаюсь ко всем блокам div, которые там находятся. Классы были бы излишними в этом случае

с таким подохом далеко не уедешь

По поводу flex ради флекса, если будет описание чуть меньше/больше, то будет съезжать кнопка, если конечно им не добавить фиксированую высоту, но это опять лишние строки - о которых ты так-же говорил.

Тут не лишне, а скорее обязательно. Удобно ли так читать? Скорее всего нет, заголовок и описание должны быть сверху, а кнопка снизу. Если текста сликом много, то обрезать. (пример: )

 

[RamonIl]

div > span:nth-child(1) или какой-то .el-text внутри div'a - что короче и понятнее?

Ок, в будущем захочу добавить в крафт еще гранаты, бронежилеты - все будет в кучу

с таким подохом далеко не уедешь

Тут не лишне, а скорее обязательно. Удобно ли так читать? Посмотреть вложение 2923 Скорее всего нет, заголовок и описание должны быть сверху, а кнопка снизу. Если текста сликом много, то обрезать. (пример: Посмотреть вложение 2924)

с таким подохом далеко не уедешь

Имелось ввиду именно в этом случае. Для чего мне всем задавать классы, если у всех 4-х блоков одинаковые стили?