Jump to content
  • 1

CSS по правилам Академии HTML и прочих гуру-верстальщиков


LUC
 Share

Question

Всем привет!

Верстаю сайты более 10 лет. В основном для себя, не для коммерции. Начинал с табличной верстки, потом плавно перешел на блочную. Но никогда не обращал особого внимания на различные правила и рекомендации со стороны опытных верстальщиков. Мой подход к творчеству был предельно прост: если код проходит валидацию - хорошо. Если юзеры не жалуются на поехавшие блоки - ещё лучше! Однако, время и идет и приходится следовать современным тенденциям. После чтения различных материалов, типа "Стиль кода Академии HTML" , возник ряд вопросов, найти ответы на которые не удалось. В частности, касательно рекомендаций, которые даются в руководстве по написанию CSS. Например, следующие:
 

Цитата

 

1. Для отступов внутри правил используются два пробела.
2. После двоеточия в правилах ставится один пробел (top: 10px;).
3. Каждое объявление в правиле пишется на новой строке.
4. Перед открывающейся фигурной скобкой ставится один пробел. После скобки запись идёт с новой строки:

.selector {
color: #f5f5f5;
}

5. Закрывающая фигурная скобка пишется на новой строке и без отступа. Следующее после этого правило отделяется пустой строкой.

 

Вопрос такой: для чего нужны все эти рекомендации? Для лучшей читаемости CSS человеком или браузером? Дело в том, что я всю жизнь пишу каждое правило в одну строку. Вот примерно так:

.header {height:500px;font-size:25px}
.header-logo {position:absolute;top:25px;left:30px;z-index:10;width:300px;height:300px}
.content {padding:10px5px;margin:10px 0}

Никаких переносов строк и лишних пробелов. Мне так удобнее читать: слева направо, как книгу. На широкоэкранном мониторе каждое правило умещается на весь экран. Допустим, в CSS прописано 150 правил, в каждом по 10 свойств. Если я каждое свойство перенесу на отдельную строку, CSS растянется на 1500 строк. Кому как, а лично мне читать такой код совершенно неудобно.

Так вот, имеет ли смысл менять свои привычки и переучиваться? Влияют ли все эти дополнительные пробелы и переносы на производительность браузера в лучшую сторону? Или это лишь попытка упростить жизнь верстальщикам-фрилансерам, которым приходится ежедневно вчитываться в чужой код?

Edited by LUC
Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 1

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

Браузеру без разницы в каком виде написан код, единственно, что если не минифицировать css файл, то,  написанный с учетом приведенных рекомендаций, он будет занимать больший объем чем тот который написан так, как привыкли вы.

Даже странно что с 10-и летним опытом вы задаете такие вопросы...

  • Like 1
Link to comment
Share on other sites

  • 0

Простите что ? 

Цитата

Верстаю сайты более 10 лет.

Трудом верится.... 


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






 

Edited by Alexej
Link to comment
Share on other sites

  • 0
1 час назад, AlexZaw сказал:

Неужели вам и правда удобнее искать какое-либо правило в длинной строке, если нужно что-то изменить, чем если бы каждое правило было бы на новой строке и видно сразу?

На 24-дюймовом мониторе при разрешении 1080 пикселей по вертикали умещаются 53 строки CSS. То есть, у меня перед глазами всегда большой объем данных и взгляд охватывает одновременно около 500 свойств. Считаю, что это удобно.

Но дело не только в переносе строк. Наличие лишних пробелов мне тоже не понятно. Например, зачем между правилами ставить именно по два пробела? Зачем ставить пробел после двоеточия? Зачем нужна точка с запятой после последнего свойства? Если это улучшает производительность браузера, то имеет смысл взять рекомендации на вооружение. Если же дело только в красоте, то, видимо, вкусы у меня весьма специфичны и я этой "красоты" не понимаю. ? 

6 минут назад, Alexej сказал:

Трудом верится.... 

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

Link to comment
Share on other sites

  • 0

@LUC

Большинству реально такой стиль удобнее и читабельней. Разве что многие могут поспорить на тему табы vs пробелы, 2 или 4 пробела, и т.п. мелочи.

Теперь далее про Code Style. 

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

А так ваш код вполне может быть вашим личным Code Style, если вы работаете один и он вас устраивает.

8 hours ago, LUC said:

Зачем ставить пробел после двоеточия?

Чисто правила типографики и восприятия. Как при обычном письме

8 hours ago, LUC said:

Зачем нужна точка с запятой после последнего свойства?

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

  • Like 2
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
Answer this question...

×   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

×
×
  • 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