Jump to content

Руководство по оформлению HTML/CSS кода от Google

Feel

By Feel,
in Books

 Share

Recommended Posts

s0rr0w Explorer

s0rr0w

Posted
Posted

Очень полезная статья для новичков. Думаю что и знающие верстальщики смогут почерпнуть что-то новое.

http://habrahabr.ru/post/143452/

И что они там почерпнут? Как сэкономить Гуглу деньги?

  • Like 2
Link to comment
Share on other sites
ceil100 Explorer

ceil100

Posted
Posted (edited)

Не знал, что Гугл поменял правила верстки. Получается, что я пишу невалидный код...

Не рекомендуется:

  <!DOCTYPE html>
  <html>
    <head>
      <title>Тратим байты - тратим деньги Гугла.</title>
    </head>
    <body>
      <p>Вот.</p>
    </body>
  </html>

Рекомендуется:

  <!DOCTYPE html>
  <title>Байты-деньги-Гуглу!</title>
  <p>Так-то

Edited by ceil100
Link to comment
Share on other sites
Vin Explorer

Vin

Posted
Posted

Примечание от переводчика

Хочется еще отметить, что Google ориентируется в первую очередь на большие высоконагруженные проекты, где каждый байт дорог, поэтому стоит учитывать, что если они рекомендуют начинать каждый селектор с новой строки, или использовать пробелы вместо табов, то это в первую очередь подразумевает, что код будет обязательно минифицирован и сжат до использования на сайте.

Link to comment
Share on other sites
lexxcode Explorer

lexxcode

Posted
Posted

вот чем удобно использования?

src="//....."

вместо

src="http://...."

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

Чем удобнее два пробела вместо нормального таба длинной в 4 пробела?

Когда код оформлен, даже табами но длинной в два пробела, это вырвимозг какой-то.

Что крутого, кроме экономии на спичках, в не закрытых тегах?

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

Вот этот прикид: Всегда ставьте отступы для содержимого блоков. 


@media screen, projection {

    html {
      background: #fff;
      color: #444;
    }

}

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

куда привлекательней так


@media screen, projection {
    html {
      background: #fff;
      color: #444;
    }
}

Если стили относятся к разным разделам, то между ними ставить пробелы, да полезно.

Если это относится к группе связанных каким-то образом элементов, то пробелы не ставить.


html {
    background: #fff;
    color: #444;
}

.someclass {
    background: #f00;
    color: #000;
}
.someclass-inner {
    background: #f00;
    color: #000;
}

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept