Сразу же, не откладывая, я дам вам простой совет: в готовом рабочем варианте ваш код должен быть как можно дружественнее. Это подразумевает сжатие размера, объединение и уменьшение как можно большего количества элементов и как можно меньшего количества файлов. Я думаю, никто не будет спорить, что эти предложения не являются наилучшим применением на практике (даже если мы не будем внедрять их в каждом проекте).
Хорошо написанный, легко читаемый код не создает интеллектуальных игр и лабиринтов, когда его читают другие разработчики. (Изображение: Toca Boca)
Теперь, когда мы выяснили этот момент, как мы можем использовать символы пробелов в написании кода, чтобы убедиться, что наши файлы максимально читабельны и поддерживаются в хорошем состоянии? Ну, мы могли бы рассмотреть ряд вариантов, начиная с основных.
Стандартные HTML отступы
Я думаю, что большинство из нас, если не все, добавляют стандартные отступы в свой HTML:
<header> <hgroup> <h1>Section title</h1> <h2>Tagline</h2> </hgroup> <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/about/">About</a></li> <li><a href="/services/">Services</a></li> <li><a href="/contact/">Contact</a></li> </ul> </nav> </header> <div class="main"> <p>Content goes here.</p> </div>Принцип здесь следующий — когда вы что-то вставляете, то добавляете отступ, чтобы было все понятно в иерархии разметки. При простом HTML вложении, контент в разделе <head> часто пренебрегается, но при этом хорошо то, что сохраняется последовательность вложений.
Например, следующий пример кода достаточно читабельный даже при отсутствии вложенности:
<!DOCTYPE html> <html> <head> <title>Foo</title> </head> <body> <!-- content… --> </body> </html>Однако, при гораздо большем контенте в разделе <head>, вложения могли бы упростить просмотр контента:
<!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> <title>HTML5 Please - Use the new and shiny responsibly</title> <meta name="description" content="Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them - with polyfills, fallbacks or as they are."> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <link rel="shortcut icon" href="favicon.ico" /> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"> <link href="http://fonts.googleapis.com/css?family=Francois+One|Open+Sans:400italic,400,800" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <script src="js/libs/modernizr-2.0.min.js"></script> <script>if (location.host == 'h5bp.github.com') location.href = '//html5please.us/'</script> </head> <body id="gfs"> <!-- content… --> </body> </html>Это последняя часть кода взята с сайта HTML5 Please. Как вы видите, когда контент в разделе <head> начинает увеличиваться, то на первый взгляд отступы немного упрощают систематизацию. Обратите внимание, что элементы <head> и <body> имеют отступы, потому что они оба являются дочерними элементам <html>.
Конечно, некоторые разработчики применяют несколько иной метод отступов в определенных областях, но идея в основном та же; смысл в том, чтобы сделать код более удобным для чтения в среде разработки.
Основные CSS отступы
В дополнение к HTML отступам, многие разработчики (включая и меня) будут делать аналогичные отступы в любом соответствующем CSS. Последующий код будет соответствовать HTML, который показан выше в первом примере:
header { color: blue; } hgroup { color: green; } hgroup h1 { line-height: 1.5; } hgroup h2 { font-size: 15px; } nav { background: purple; } nav ul { float: left; } nav ul li { font-size: 20px; } nav ul li a, nav ul li a:visited { text-decoration: none; } .main { border: solid 1px #ccc; }Для некоторых это кажется немного излишним. Но я предпочитаю использовать их, потому что они помогают мне просматривать CSS и находить соответствующие иерархии без чтения каждого селектора. Если вы интегрируете модульные CSS принципы, поддерживающие модули, основанные на классах, а также ограниченное использование потомственных селекторов, то этот тип иерархии в вашей CSS таблице следует, несомненно, использовать с осторожностью (например, ul li).
Конечно, некая часть кода, описанного выше, имеет немного ужасный вид; я не рекомендовал бы вписывать заголовок и список стилей в подобный контекст. Но для понимания понятия отступов CSS, смотрите на это как на теоретический пример.
Дело в том, что у вас есть возможность сделать CSS отступ для того, чтобы соответствовать HTML структуре, таким образом, упрощается просмотр и легче разобраться с разметкой и всем, что к ней относится.
Конечно, так как дело касается нескольких вещей, упомянутых в этой статье, некоторые из них не применяются в случае, если вы используете CSS препроцессор (программа, выполняющая предварительную обработку данных до основного процесса обработки). Например, относительно последнего совета, возможность с вложенными селекторами для Sass значительно отличалась бы в подобной среде.
легко читаемые CSS3 таблицы
Давайте еще больше злоупотребим символами пробелов. Много новых функций CSS3 позволяют разделять ряд значений либо запятой, либо пробелом. Два простых примера это множество фоновых изображений и преобразования. Давайте посмотрим, как мы можем сделать так, чтобы их было легче читать:
.example { background: url(images/example.png) center center no-repeat, url(images/example-2.png) top left repeat; url(images/example-3.png) top right no-repeat } .example-2 { transform: scale(.8) skew(20deg, 30deg) translateZ(0); }Обратите внимание на то, что мы здесь сделали. Вместо того чтобы удерживать все значение в одной строке (которая, в некоторых случаях, может стать слишком длинной — особенно когда присутствуют градиенты и префиксы (vendor prefixes)), мы поместили каждый ряд значений с новой строки, все выровненные в одну линию с другой.
Таким образом, каждое из трех фоновых изображений находится на своей собственной строке, и каждая функция преобразования также находится на отдельной строке, выровненная по левому краю.
В общем-то, это могло бы нарушить идею иметь одно свойство в строке (при условии, конечно, что вы не задаете однострочный наборов правил). Но по сравнению с альтернативными, потенциально очень длинными строками, это хороший вариант, и он делает эти наборы правил очень легко читаемыми.
Работа с vendor prefixes
Как уже говорилось, если вы делаете предварительную обработку вашей CSS таблицы или используете -prefix-free, то этот совет вам не подойдет. Но Вы могли бы использовать си …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров