Как профессионально верстать?

Question

[Vladimir96]

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

Comments

[Михаил]

Ну судя по вопросу нужно делать больше вложений

[i_m]

кто как хочет так и д#очет

[fdroid]

Профессионал - это специалист, который зарабатывает своим видом деятельности. И если вёрстка представляет из себя лапшу, но за это платят, значит вёрстка профессиональная.

Answer 1

[Евгений]

Профессионально верстать - это когда просят что то переделать в вёрстке или переставить блоки, и тебе не нужно всё переделывать, потому что блоки при переносе не изменяются и работают как надо.
Ну и ещё совет: если тебе не нравится как ты сделал прошлый проект или просто стыдно, что ты так сверстал, то значит ты растёшь как профессионал

Answer 2

[approximate solution]

Когда скачиваешь готовую верстку в ней бывает много вложений.

Это пример как делать ненужно - обычно такая верстка бывает у неучей, конструкторов сайтов.

В уроках верстки я не видел что бы учили создавать много вложений.

Всё правильно, если у вас вложений разумное количество - значит ваш код более читабельный, и легко маштабируемый.

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

Что бы верстать как профессионал, нужно просто верстать очень много, и по ходе дела разбирать свой код и анализировать ошибки. Очень часто "профессионалы" пишут такой код, что вы удивитесь насколько он безграмотный.

Для того что бы верстать очень хорошо - webmasters.teamdev.com - ознакомиться с этим ресурсом.

Comments

[profesor08]

Это пример как делать ненужно - обычно такая верстка бывает у неучей

Ну-ну...

[fdroid]

Это пример как делать ненужно - обычно такая верстка бывает у неучей, конструкторов сайтов.

Ну-ну...

Fight!)

[approximate solution]

profesor08, Большая вложенность тегов — плохо?

[approximate solution]

fdroid, Я сперва подожду аргументов. Мне интересно выслушать автора "Ну-ну", если он будет прав, то это позволит автору вопроса посмотреть на данный ответ с другого ракурса. Пока что "Ну-ну" весьма странноватый аргумент в полемике.

[profesor08]

approximate solution, если элемент адаптивный, то тебе придется придумывать разные враперы, чтоб разделять внутренности по разным блокам и как-то их перестраивать. А если надо чтоб элементы скрывались, а потом выезжали при неких действиях, то враперов станет еще больше. А если сюда добаляются всякие выпадающие менюхи, то еще больше враперов, а если добавляются заголовки, то привет еще враперам.

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

[approximate solution]

profesor08, А теперь вопрос, откуда вы знаете объем вложений и сколько врапперов использовалось в коде автора, про который он спрашивал.

Ниже -

если у вас вложений разумное количество

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

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

[Mikhail Derkach]

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

Второй момент - сама постановка вопроса, имхо, неправильная. Скачиваешь готовую верстку - это какую? Пример урока? Готовый сайт? Так а верстка может быть собрана вебпаком, галпом и т.д.

[approximate solution]

Mikhail Derkach,

говорить про большую вложенность и неучей без просмотра кода - опрометчиво.

Здесь в вами соглашусь, это уже были мои домыслы, как человека который видел большой и громоздкий код, который просил оптимизации. Но пришлось бы всё переделывать.

Скорее всего автор имел ввиду - он скачал готовый сайт(условный wget) и верстка там в корне отличается от той, что ему показывали на ютубчике, ибо дедлайны и фриланс, и галерная веб студия как правило о коде мало думает. Получаешь деньги - и свободен.

[Mikhail Derkach]

approximate solution, если он брал wget, то это, я считаю, глупо, потому что там верстка грязная. А как мы с вами знаем, реальные таски отличаются значительно от уроков на ютубчике :D

Vladimir96 а вам я посоветую то, что не советовали мне и то, что писали в этой ветке - пишите код. Пишите ПЛОХОЙ код. А об оптимизации думайте после того, как его напишите. Когда откроешь свой код спустя пару месяцев и у тебя будет мысль, что он говно, вероятнее всего, так оно и будет, а вы как раз немного выросли как профессионал.
Только с опытом вы будете сразу писать хороший код и то, вам придется его переделывать, потому что то в ТЗ забудут что-то, то правки придут.

В целом, это ошибка всех новичков, стремление к идеальному. В стремлении к идеальному вы сами себя душите, пишите код который подсмотрели, но не понимаете его. Как пример: можно использовать тег img, а можно picture. Какой правильнее? Я лично считаю, что picture. Прав ли я? Возможно, нет. Вот я знаю, когда что стоит использовать, а вам говорю - пользуй вот это. И ты используешь, но не понимаешь, почему.

[profesor08]

approximate solution,

Писать нужно так, что бы следующий человек который вошел в проект который ты разрабатывал, не схватил инсульт

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

Для примера, вот нахрена это css свойство?
box-shadow: 0 1px 0 0 hsla(0,0%,100%,0);

[Mikhail Derkach]

profesor08,

Для примера, вот нахрена это css свойство?

я надеюсь, это просто шутка

[profesor08]

Mikhail Derkach, нет, это свежачок трахнувший мозг. Из серии
transform: translateZ(0);