Красивое оформление HTML/CSS кода
Зачем красиво оформлять HTML/CSS код в процессе верстки сайта и так ли это важно? Ведь заказчик не видит изнаночную сторону сайта?
С красиво оформленной и структурированной разметкой легко работать, как самому верстальщику, так и коллегам по работе. Можно быстрее находить нужные участки кода для внесения дополнений или изменений, одним словом улучшает читаемость кода.
Красивое оформление HTML
Давайте перечислим основные правила, которые следует соблюдать при написании HTML разметки.
Правила оформления HTML кода
1) Соблюдение отступов для вложенных элементов.
Каждый вложенный элемент, отделяем четырьмя (или двумя) пробелами от его родителя, относительно левого края редактора кода. Тег div является вложенным элементом относительно тега section.
<section>
<div>
</div>
</section>
В свою очередь теги h1 и p, являются вложенными элементами в тег div и выравниваются относительно этого тега div, не создавая лесенки.
<section>
<div>
<h1>Заголовок</h1>
<p>Красиво оформленный код понравиться как заказчику, так и работодателю.</p>
</div>
</section>
Это правило не распространяется на строчные теги (i, u, a, b, span) внутри абзаца. Например, тег span не нужно начинать с новой строки и ставить перед ним пробелы.
<p>Соблюдайте вами же установленные <span>правила написания кода</span>.</p>
2) Выравнивание тегов по одной линии.
Теги не должны хаотично плясать туда-сюда на странице редактора. Так писать не нужно.
<ul>
<li>..</li>
<li>..</li>
<li>..</li>
</ul>
<h2>..</h2>
<p>..</p>
3) Написание комментариев
Когда в разметке, идет подряд много закрывающих тегов div, то ставьте комментарий (название класса) рядом с закрывающим тегом div. Тогда вам не придется гадать, какой именно класс закрывает div.
<div class="wrap">
<div class="head">
<div class="title">
.....
</div><!-- .title -->
</div><!-- .head -->
</div><!-- .wrap -->
Начало каждой секции/блока начинаем с короткого комментария с названием данной секции. При скролле сайта, мы сразу видим, какие блоки есть на сайте.
<!-- Footer -->
<footer>
<div class="center"></div>
</footer>
Красивое оформление CSS
Где ставить пробелы?
Между названием селектора и открывающей фигурной скобкой.
.wrapper {
Между свойством и значением после двоеточия внутри селектора.
width: 400px;
После запятой ставить пробел.
font-family: 'PT Sans Narrow', sans-serif;
Правила в селекторе пишем на одном уровне с четырьмя (или двумя) пробелами относительно названия этого селектора.
.header {
padding-top: 20px;
font-size: 15px;
background-color: #333333;
}
Каждый новый селектор отделять одной строкой.
.nav {
min-width: 200px;
}
.nav_link {
margin: 0;
padding: 0;
list-style: none;
}
Писать комментарии перед началом стилей каждого блока.
/* Section */
.section {
padding: 30px 0;
}
.section_title {
margin-bottom: 20px;
padding-bottom: 0;
}
.section_img {
background-color: #f8f8f8;
}
В начале большого CSS файла писать содержание, это нужно для быстрой навигации через поиск.
/*
1. Header
2. Slider
3. Gallery
4. Footer
*/
Как не нужно писать стили
Не пишите свойства в одну строку. В таком стиле оформления кода очень тяжело ориентироваться.
.page {height: 500px; background-color: #444;}
Заключение
Следует придерживаться определенного стиля написания кода, писать везде одинаково. Чистый и красивый код говорит об уровне профессионализма верстальщика и отношения его к работе.
-
Создано 10.05.2019 10:51:27
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.