Черты профессиональной верстки и немного кода.

[ByKraB]

Приветствую всех посетителей форума.Собственно, сабж:

Уже около года более-менее постоянно занимаюсь версткой(CSS+HTML+jQuery).Фриланс, разовая работа,помощь друзьям.Учился всему сам.

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

Заметил, что на качественных сайтах верстка, скажем так, "усложнена"(не знаю какое слово подобрать ) Чтобы было понятнее, приведу кусок кода, взятый из формы.

<div class="inputText" style="width:150px;">
 <i>
  <b>
   <input type="text" name="phone" id="phone_number" value="">
  </b>
 </i>
</div>
<!--Стили -->
.inputText > i {
  display: block;
  border: 1px solid #A7A7A7;
  zoom: 1;
  padding: 2px 2px;
  font-style: normal;
  background: #EEE;
}
.inputText > i > b {
  display: block;
  font-style: normal;
  font-weight: normal;
}

.inputText input {
  border: 0;
  display: block;
  width: 100%;
  background: transparent;
  line-height: 17px;
  margin: 0;
}

Зачем в данном случае input вложили в <b> и <i>, притом что стили текста и толщина выставлены в normal ? Почему бы не прописать border сразу для input-а?

Данный код привел просто для примера. Больше интересует, что отличает профессионального верстальщика от просто верстальщика?

Надеюсь, написал не очень запутанно)

Edited July 29, 2012 by ByKraB

[ceil100]

А зачем темы-то клонировать?

насчет профессиональной верстки-это, типа, шутка такая?

Edited July 29, 2012 by ceil100

[tius]

Больше интересует, что отличает профессионального верстальщика от просто верстальщика?

У хорошего верстальщика сайт отображается и работает во всех браузерах одинаково.

У хорошего верстальщика верстка в точности повторяет заданный макет.

У хорошего верстальщика нет злоупотреблений хаками в файлах со стилями.

У хорошего верстальщика есть универсальные стили, а не нагромождение одного и того же, но для разных элементов.

У хорошего верстальщика все оптимизировано и радует клиента отсутствием глюков.

И тд

[ByKraB]

А зачем темы-то клонировать?

насчет профессиональной верстки-это, типа, шутка такая?

С темами что-то заглючило.Сам не знаю.

насчет профессиональной верстки-это, типа, шутка такая?

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

Мне казалось, что в верстке такая же ситуация.

Больше интересует, что отличает профессионального верстальщика от просто верстальщика?

У хорошего верстальщика сайт отображается и работает во всех браузерах одинаково.

У хорошего верстальщика верстка в точности повторяет заданный макет.

У хорошего верстальщика нет злоупотреблений хаками в файлах со стилями.

У хорошего верстальщика есть универсальные стили, а не нагромождение одного и того же, но для разных элементов.

У хорошего верстальщика все оптимизировано и радует клиента отсутствием глюков.

И тд

А как же семантическая верстка? Внешний вид будет одинаковый, но качество кода совсем другое.

[tius]

Внешний вид редко бывает рабочим и одинаковым в различных браузерах при кривой верстке.

[ByKraB]

Внешний вид редко бывает рабочим и одинаковым в различных браузерах при кривой верстке.

Верстка может быть ровной, но не семантической.

[tius]

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

[ByKraB]

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

Это просто валидный код.

Что значит правильная?

Т.е по вашему получается, что уровень всех верстальщиков одинаковый? Или верстальщик или нет?

[tius]

Не приписывайте мне мыслей, которых я не выражаю.

Верстальщики есть разные. Верстка одних — семантически правильная и, как правило, везде рабочая. Верстка других расползается в ИЕ, к примеру, потому что теги и стили к ним используются черте как. Третьи — вообще "я не специалист, но занимаюсь".

Видимо, под своим вопросом "что отличает профессионального верстальщика от просто верстальщика?" вы подразумевали что-то иное, чем описано мной выше.

Так вот, ответ на вопрос в двух словах: знания, опыт.

[ByKraB]

Не приписывайте мне мыслей, которых я не выражаю.

Верстальщики есть разные. Верстка одних — семантически правильная и, как правило, везде рабочая. Верстка других расползается в ИЕ, к примеру, потому что теги и стили к ним используются черте как. Третьи — вообще "я не специалист, но занимаюсь".

Видимо, под своим вопросом "что отличает профессионального верстальщика от просто верстальщика?" вы подразумевали что-то иное, чем описано мной выше.

Так вот, ответ на вопрос в двух словах: знания, опыт.

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

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

Понятно, что все это приходит с опытом, но хотелось бы услышать что-то более конкретное.

[tius]

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

>Вы скорее пишите что отличает плохую верстку от хорошей.

>Мне более интересно, что отличает просто хорошую верстку от очень хорошей

То же самое. Идеалов не существует.

[ByKraB]

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

>Вы скорее пишите что отличает плохую верстку от хорошей.

>Мне более интересно, что отличает просто хорошую верстку от очень хорошей

То же самое. Идеалов не существует.

ну ладно. может быть услышим другие мнения.

[Great Rash]

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

В идеальной верстке каждый блок должен быть независим. Он должен быть таким, чтобы его можно было выдрать из одной страницы и впихнуть на другую копипастой. Тогда с ним будет удобно работать всем: и программистам и другим верстальщикам. В этом плане принципы, описанные в БЭМ лучше всего.

Зачем в данном случае input вложили в <b> и <i>, притом что стили текста и толщина выставлены в normal ? Почему бы не прописать border сразу для input-а?

Вероятно для стилизации инпута. Бордер для инпута прописывать плохо потому что его размеры отличаются в различных браузерах. Так же инпут удобно вкладывать в другой блок если нужны нестандартные размеры отступов или 100% ширина.