Про BEM написано хорошо, а вот сама верстка очень неаккуратная и со спорными моментами. Вот некоторые замечания:
— Возникает вопрос о xml-валидности кода и общей стандартизации: почему-то часть одиночных тегов написана с закрывающим слешем, а другая часть без. Я за то, чтобы везде писать /.
— Тег meta написан в коротком html5-стиле, а link по-старому.
— Очень прыгают стили и верстка: лишние пустые строчки, пробелы после двоеточия в css, вперемешку tab и пробелы, двойные пробелы и т.п.
— С фоном для .b-page кажется фейл: background-color не применится к этому блоку, так как идущий дальше background вернет это свойство к значению по-умолчанию. Пример на jsfiddle. Уже писал про использование общего свойства background и font в комментарии к посту Mirantus
— Очень удивило, что кнопка GO сделана div'ом и все это не находится в form.
— Излишнее количество классов для ссылок в основном меню. Также, семантически правильно считается оформлять меню в виде списка ul>li.
— Нет ни слова о проблеме с floating-элементами и в верстке это не учитывается.
Очень похоже, что верстка нигде не тестировалась, а писалась по-быстрому прямо в хабраредакторе :) Поэтому, есть большие сомнения, что в готовом виде она будет работать и выглядеть как на картинке (и это даже забыв про IE). Мне кажется, что для обучающих статей, рассчитанных на новичков, особенно важно уделять внимание деталям.
Воу, уровень занудства over 9000, я даже запутался :)
В HTML(5) действительно нельзя реально «закрыть» одиночный (void) тег. Закрывающей слеш поставить можно, но это ни на что не влияет и не делает одиночный тег самозакрытым. Но совет был дан исходя из логики xml (чтобы получить валидный документ), где постановка закрывающего слеша в открывающем теге закрывает его, а одиночных тегов нет вообще. Поэтому и написал «закрывать (логика xml) одиночные (логика html) теги».
P.S. Написал текст выше и понял, что это выглядит как бред (:
Не критика, а просто комментарии и мои предпочтения в верстке.
— DOCTYPE пишу в верхнем регистре. Для html5 не принципиально, но xml-парсер, например, выдаст ошибку.
— Если используете html5, то пишите meta, link короче. Также, лучше закрывать одиночные теги.
— ИЕ6 конечно умер, но я стараюсь минимально его поддерживать, поэтому вместо селекторов атрибута типа [type="text"] и других подобных вещей лучше добавлю лишний класс. Вообще, часто приходится отказываться от удобных решений в угоду совместимости.
— Логично было бы поместить nav и #heading в header. Также footer по схеме на картинке, должен быть внутри #wrapper:
— Нужно установить :visited-цвет ссылок меню, иначе их цвет может измениться, после перехода пользователя.
.top-menu a,
.top-menu a:visited {
color: #b2b2b2;
}
— Используя свойство background, обратите внимание, что если вы устанавливаете только, например цвет (background: red;), то сбросятся все другие фоновые установки у данного элемента (image, position и т.п.). Поэтому, если нужно установить только одно свойство, пишите лучше не background: red;, а конкретное свойство:
background-color: red;
— То же, кстати, касается font — используя его, но не перечисляя всё, вы рискуете, что часть свойств вернется к значениям по-умолчанию, независимо от того, что ранее вы установили их для этого элемента. Здесь можно увидеть, что я имею ввиду. У background то же поведение, поэтому лучше взять за правило использовать по-необходимости частные свойства, а не только общие.
— Нигде не увидел борьбы с floating-багом. Нужно либо добавлять clear-элемент после группы плавающих элементов, либо присваивать их контейнеру overflow: hidden;, либо использовать какой-то еще способ. Я бы еще и для старого IE пофиксил с помощью установки hasLayout (например zoom: 1;).
Ну и общие замечания — по излишнему использованию id, отсутствию независимости блоков и соответственно излишнее увлечение селекторами тегов. Не бойтесь использовать классы в любом количестве. Кстати тоже посоветую прочитать про БЭМ. Можно извлечь полезные мысли, хотя полностью концепция слишком громоздкая имхо.
Согласен. У меня даже папа сначала начал кнопками пользоваться, а когда прочувствовал всю прелесть тачскрина — стал листать только так. Говорит, что удобнее просто прикасаться, чем нажимать кнопки.
После отделения от полезной нагрузки ракетные ускорители удалось повторно запустить в воздухе (это необходимо для управляемого снижения и возможности дальнейшего применения), однако затем из-за действия аэродинамических сил отделившиеся части закрутило вокруг своей оси. Центробежные силы, как сообщил в своем твиттере глава компании Элон Маск, прижали топливо к стенкам баков и это сделало дальнейший управляемый полет невозможным.
Но, думаю, что эту проблему со временем решат и всё у них в итоге получится.
В процессе подготовки к возобновлению производства ракетных двигателей НК-33 специалисты уже воспроизвели около 50% технологических процессов, рассказал гендиректор Объединенной двигателестроительной корпорации (ОДК) Владислав Масалов.
Специалисты ОАО «Кузнецов» завершили очередной этап огневых стендовых испытаний ракетного двигателя НК-33. На этот раз изделие проверяли с отдельными элементами нового производства в условиях трехкратного ресурса работы.
Как заявил «Известиям» представитель Роскосмоса, «с помощью ракет семейства «Атлас» американцы выводят военную нагрузку. Прежде в России на это смотрели сквозь пальцы, а сейчас поставлен вопрос о целесообразности сотрудничества такого рода. Обсуждается вопрос о прекращении поставок РД-180 американцам после 2015 года».
Хотя в новости по ссылке речь идет о РД-180, но как бы и НК-33 не постигла та же участь — тоже ведь военную нагрузку выводить можно… Надеюсь всё же одумаются.
После вступления рассчитывал совсем на другую статью — что и как делали, какое оборудование и детали использовали, поэтапно, с фотками. Но видимо это будет в следующих постах — ждем продолжения!
На последнем МАКС'е были модели многоразовых разгонных блоков для Ангары, выглядящие точь в точь, как Байкал (модель на фото сзади). Так что над идеей работают и возможно в будущем мы увидим потомков Байкала на нашей новой ракете.
Про Китай забыли — там с 2004 года работает коммерческая линия маглева длиной 30 км.
Кстати, интересно по цене получается. Указана стоимость строительства в 10 млрд. юаней или 50 млрд. рублей за всю дорогу. При этом «значительная часть трассы проложена по заболоченной местности. Каждая опора эстакады располагается на бетонной подушке, установленной на скальном основании. В некоторых местах толщина этой подушки достигает 85 метров.»Исходя из этого, сумма в 1 трлн. рублей, который хотят потратить на «скоростную» дорогу от Москвы до Казани, выглядит не очень понятной — за эти деньги можно было бы практически весь путь сделать маглевом, учитывая, что вряд ли там везде болото как под китайским.
Ну и конечно цена билета на шанхайский маглев в 250 рублей заставляет прослезиться…
— Возникает вопрос о xml-валидности кода и общей стандартизации: почему-то часть одиночных тегов написана с закрывающим слешем, а другая часть без. Я за то, чтобы везде писать /.
— Тег
metaнаписан в коротком html5-стиле, аlinkпо-старому.— Очень прыгают стили и верстка: лишние пустые строчки, пробелы после двоеточия в css, вперемешку tab и пробелы, двойные пробелы и т.п.
— С фоном для
.b-pageкажется фейл:background-colorне применится к этому блоку, так как идущий дальшеbackgroundвернет это свойство к значению по-умолчанию. Пример на jsfiddle. Уже писал про использование общего свойства background и font в комментарии к посту Mirantus— Очень удивило, что кнопка GO сделана div'ом и все это не находится в
form.— Излишнее количество классов для ссылок в основном меню. Также, семантически правильно считается оформлять меню в виде списка
ul>li.— Нет ни слова о проблеме с floating-элементами и в верстке это не учитывается.
Очень похоже, что верстка нигде не тестировалась, а писалась по-быстрому прямо в хабраредакторе :) Поэтому, есть большие сомнения, что в готовом виде она будет работать и выглядеть как на картинке (и это даже забыв про IE). Мне кажется, что для обучающих статей, рассчитанных на новичков, особенно важно уделять внимание деталям.
В HTML(5) действительно нельзя реально «закрыть» одиночный (void) тег. Закрывающей слеш поставить можно, но это ни на что не влияет и не делает одиночный тег самозакрытым. Но совет был дан исходя из логики xml (чтобы получить валидный документ), где постановка закрывающего слеша в открывающем теге закрывает его, а одиночных тегов нет вообще. Поэтому и написал «закрывать (логика xml) одиночные (логика html) теги».
P.S. Написал текст выше и понял, что это выглядит как бред (:
— DOCTYPE пишу в верхнем регистре. Для html5 не принципиально, но xml-парсер, например, выдаст ошибку.
— Если используете html5, то пишите
meta,linkкороче. Также, лучше закрывать одиночные теги.— ИЕ6 конечно умер, но я стараюсь минимально его поддерживать, поэтому вместо селекторов атрибута типа
[type="text"]и других подобных вещей лучше добавлю лишний класс. Вообще, часто приходится отказываться от удобных решений в угоду совместимости.— Логично было бы поместить
navи#headingвheader. Такжеfooterпо схеме на картинке, должен быть внутри#wrapper:— Нужно установить
:visited-цвет ссылок меню, иначе их цвет может измениться, после перехода пользователя.— Используя свойство
background, обратите внимание, что если вы устанавливаете только, например цвет (background: red;), то сбросятся все другие фоновые установки у данного элемента (image,positionи т.п.). Поэтому, если нужно установить только одно свойство, пишите лучше неbackground: red;, а конкретное свойство:— То же, кстати, касается
font— используя его, но не перечисляя всё, вы рискуете, что часть свойств вернется к значениям по-умолчанию, независимо от того, что ранее вы установили их для этого элемента. Здесь можно увидеть, что я имею ввиду. У background то же поведение, поэтому лучше взять за правило использовать по-необходимости частные свойства, а не только общие.— Нигде не увидел борьбы с floating-багом. Нужно либо добавлять clear-элемент после группы плавающих элементов, либо присваивать их контейнеру
overflow: hidden;, либо использовать какой-то еще способ. Я бы еще и для старого IE пофиксил с помощью установки hasLayout (напримерzoom: 1;).Ну и общие замечания — по излишнему использованию id, отсутствию независимости блоков и соответственно излишнее увлечение селекторами тегов. Не бойтесь использовать классы в любом количестве. Кстати тоже посоветую прочитать про БЭМ. Можно извлечь полезные мысли, хотя полностью концепция слишком громоздкая имхо.
P.S. Комментария моего комментария приветствуются :)
Но, думаю, что эту проблему со временем решат и всё у них в итоге получится.
20 августа: Специалисты воспроизвели около 50% технологии производства НК-33
3 сентября: На ОАО «Кузнецов» завершился очередной цикл испытаний ракетного двигателя НК-33
Хотя в новости по ссылке речь идет о РД-180, но как бы и НК-33 не постигла та же участь — тоже ведь военную нагрузку выводить можно… Надеюсь всё же одумаются.
Кстати, интересно по цене получается. Указана стоимость строительства в 10 млрд. юаней или 50 млрд. рублей за всю дорогу. При этом «значительная часть трассы проложена по заболоченной местности. Каждая опора эстакады располагается на бетонной подушке, установленной на скальном основании. В некоторых местах толщина этой подушки достигает 85 метров.»Исходя из этого, сумма в 1 трлн. рублей, который хотят потратить на «скоростную» дорогу от Москвы до Казани, выглядит не очень понятной — за эти деньги можно было бы практически весь путь сделать маглевом, учитывая, что вряд ли там везде болото как под китайским.
Ну и конечно цена билета на шанхайский маглев в 250 рублей заставляет прослезиться…