Улучшаем читабельность CSS-кода с помощью «стилевых гидов»

    В W3Cast #3 Денис ( CurlyBrace) затронул тему использования styleguides, а у меня как раз уже была статья по этой теме. Поэтому я решил поделиться ей, чтобы показать наглядные примеры, демонстрирующих возможности «стилевых гидов».
    «Стилевые гиды» — это свод правил и соглашений, предоставляющих разработчикам информацию о структуре кода и принятых правилах оформления. Чаще всего используется группой разработчиков, при совместном участии в проекте или же для самодисциплины при разработке кода.
    Если проект большой, то он обрастает многочисленными файлами CSS с различными цветовыми схемами, типографикой и другими стилевыми установками. Чтобы избежать путаницы в структуре кода и не забыть что да как, нужно разрабатывать структурированный код, который впоследствии будет проще использовать, править и частично использовать в других проектах.

    Лучший способ организации понятного кода — использование комментариев. Разработчики придумали весьма творческие способы использования комментариев и форматирования текста, чтобы улучшить понимание кода. Существует множество различных приемов, которые могут комбинироваться исходя из ваших предпочтений, но мы пока рассмотрим только несколько из них. Внимание! Если вы видите данное изображение, то данная статья была несогласованно скопирована с ресурса http://blog.obout.ru/ С политикой копирования материалов с сайта http://blog.obout.ru можно ознакомиться на странице http://blog.obout.ru/copyright

    «Разделяй и властвуй»


    Для начала проанализируйте структуру своего макета и выделите наиболее важные компоненты в CSS-коде. В большинстве случаев полезно рассортировать по принадлежности к классам или CSS-селекторам. Перед тем как начать «кодинг», объедините элементы в группы. Например, вы можете выделить глобальные стили («тело», параграфы, списки и т.д.), структуру, заголовки, текстовые стили, навигацию, формы, комментарии и отдельные элементы.
    Выберите специальные метки (например, «звёздочку» — «*» или минус — «-») для того чтобы выделять важные элементы. Например ими можно выделять заголовки отдельх групп элементов. Очень немаловажно, чтобы метки бросались в глаза при беглом просмотре кода.
    Однако такой подход может оказаться не очень эффективным для больших проектов, где главная стилевая таблица является достаточно большой. В таком случае стили можно разделить на несколько файлов, каждый из которых будет содержать единственную группу. Для этого в основном файле стилей достаточно импортировать групповые стили. А на странице достаточно включать только основной файл.
    <code class="css">
    /*
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    [Master StyleSheet]
    
    Project:	Obout.ru
    Version:	1.1
    Last change:	05/06/08 [fixed Float bug, Alex]
    Assigned to:	Alexandr (ALex), Vasy Pupkin (VP)
    Primary use:	OBOUT.RU
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    */
    @import "reset.css";
    @import "layout.css";
    @import "colors.css";
    @import "typography.css";
    @import "flash.css";
    /* @import "debugging.css"; */
    </code>
    


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

    Создание оглавления


    Для описания структуры своего кода, можно сделать небольшое оглавление в начале стилевого файла. Этот прием поможет сделать краткий обзор структуры расположения элементов с использованием идентификаторов (ID) и классов (class) используемых в качестве отдельных веток структурного дерева страницы. Тутже можно использовать специальные ключевые слова для более быстрого поиска нужной секции в коде.
    Например так:
    <code class="css">
    /*
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    [Layout]
    
    * body
    	+ Header / #header
    	+ Content / #content
    		- Left column / #leftcolumn
    		- Right column / #rightcolumn
    		- Sidebar / #sidebar
    			- RSS / #rss
    			- Search / #search
    			- Boxes / .box
    			- Sideblog / #sideblog
    	+ Footer / #footer
    
    Navigation	  #navbar
    Advertisements	  .ads
    Content header	  h2
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    */
    </code>
    

    или же такой вариант которого я придерживаюсь:
    <code class="css">
    /*
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    [Table of contents]
    
    1. Body
    	2. Header / #header
    		2.1. Navigation / #navbar
    	3. Content / #content
    		3.1. Left column / #leftcolumn
    		3.2. Right column / #rightcolumn
    		3.3. Sidebar / #sidebar
    			3.3.1. RSS / #rss
    			3.3.2. Search / #search
    			3.3.3. Boxes / .box
    			3.3.4. Sideblog / #sideblog
    			3.3.5. Advertisements / .ads
    	4. Footer / #footer
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    */
    </code>
    

    Он позволяет осуществлять поиск по индексам и даёт схематическое представление о структуре страницы.
    Есть ещё более простой способ который не использует вложенности, а использует обычный нумерованный список. Чтобы найти блок в стилевой таблице достаточно использовать файловый поиск и ввести цифру или название блока. Такой способ очень лёгок, быстр и эффективен.
    <code class="css">
    /*
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    [Table of contents]
    
    1. Body
    2. Header / #header
    3. Navigation / #navbar
    4. Content / #content
    5. Left column / #leftcolumn
    6. Right column / #rightcolumn
    7. Sidebar / #sidebar
    8. RSS / #rss
    9. Search / #search
    10. Boxes / .box
    11. Sideblog / #sideblog
    12. Advertisements / .ads
    13. Footer / #footer
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    */
    <!-- здесь много CSS-кода -->
    
    /*
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    [8. RSS / #rss]
    */
    #rss { ... }
    #rss img { ... }
    /*
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    */
    </code>
    

    Использование оглавления облегчит понимание и чтение вашего CSS-кода другим разработчикам. Его можно распечатать, чтобы оно было постоянно перед глазами, когда вы читаете код. Для работы в команде, использование оглавления станет хорошим преимуществом и сэкономит значительную часть вашего времени и времени ваших коллег.

    Предустановка цветовой схемы и типографики


    Пока у нас нет возможности устанавливать в CSS константы, мы вынуждены искать быстрые способы для обозначения неизменных свойств. В веб-разработке к константам можно отнести цвета и типографию, используемые в документе, которые представляют из себя фиксированиные значения и используемые неоднократно в документе.
    Одним из способов замены отсутствия констант заключается в том, чтобы создать определения некоторых констант, которые будут использоваться. Опять же это поможет избежать путаницы при копировании из одного свойства в другое. Если же решить изменить какое либо свойство в таблице стилей, достаточно опять же воспользоваться инструментами поиска и замены вашего редактора.
    <code class="css">
    /*
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    # [Color codes]
    
    # Dark grey (text): #333333
    # Dark Blue (headings, links) #000066
    # Mid Blue (header) #333399
    # Light blue (top navigation) #CCCCFF
    # Mid grey: #666666
    #
    */
    </code>
    

    В качестве альтернативы можно также описать цветовые коды, используемые в вашем макете. Для каждого цвета можно установить секции, которые его используют или же наоборот, для секций установить используемые цвета.
    <code class="css">
    /*
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    [Color codes]
    
    Background:	#ffffff (white)
    Content:	#1e1e1e (light black)
    Header h1:	#9caa3b (green)
    Header h2:	#ee4117 (red)
    Footer:		#b5cede (dark black)
    
    a (standard):	#0040b6 (dark blue)
    a (visited):	#5999de (light blue)
    a (active):	#cc0000 (pink)
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    */
    </code>
    

    Такой же подход может быть использован для обозначения типографики.Внимание! Если вы видите данное изображение, то данная статья была несогласованно скопирована с ресурса http://blog.obout.ru/ С политикой копирования материалов с сайта http://blog.obout.ru можно ознакомиться на странице http://blog.obout.ru/copyright
    <code class="css">
    /*
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    [Typography]
    
    Body copy:		1.2em/1.6em Verdana, Helvetica, Arial, Geneva, sans-serif;
    Headers:		2.7em/1.3em Helvetica, Arial, "Lucida Sans Unicode", Verdana, sans-serif;
    Input, textarea:	1.1em Helvetica, Verdana, Geneva, Arial, sans-serif;
    Sidebar heading:	1.5em Helvetica, Trebuchet MS, Arial, sans-serif;
    
    Notes:	decreasing heading by 0.4em with every subsequent heading level
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    */
    </code>
    

    Сортировка CSS свойств


    Есть ещё несколько приемов для написания более структуированного и интуитивно понятного CSS-кода. Существует множество способов сортировки, придуманных разработчиками. Некоторые разработчики предпочитают размещать сначала цвета и шрифты; другие предпочитают сначала размещать более важные свойства, например, связанных с позиционированием элемента. Некоторые элементы также часто сортируют согласно структурному расположению или топологической схемы. К этому подходу можно отнести группировку селекторов тегов:
    <code class="css">
        body,
    	h1, h2, h3,
    	p, ul, li,
    	form {
    		border: 0;
    		margin: 0;
    		padding: 0;
    	}
    </code>
    

    Некоторые разработчики предпочитают сортирование свойства в алфавитном порядке:
    <code class="css">
    body {
    	background: #fdfdfd;
    	color: #333;
    	font-size: 1em;
    	line-height: 1.4;
    	margin: 0;
    	padding: 0;
    }
    </code>
    

    Используйте свой стиль форматирования везде и ваши коллеги будут благодарны вам за ваш труд — они тоже будут придерживаться данного стиля форматирования.

    Вложенность — ваш друг!


    Использование табулировани селекторов сделает понимание кода более простым. Чем более «глубокий» элемент — тем большее количество табов ставится перед ним. Определите «родительский» элемент и отделите «дочерние» нужным количеством «табов»:
    <code class="css">
    #main-column { display: inline; float: left; width: 30em; }
    		#main-column h1 { font-family: Georgia, "Times New Roman"; margin-bottom: 20px; }
    		#main-column p { color: #333; }
    </code>
    

    Есть ещё один интересный подход киспользованию «табов» и комментариев. Иногда при внесении изменений результат оказывается не таким как вы ожидали. А что если изменений было сделано много и все их не запомнить? Вот тут то и может нам пригодиться выделение недавних изменений в вашем CSS-коде. Внесенные изменения можно помечать дополнительным отступом, который будет выделять свойство от других в этом же селекторе. Или же можно использовать некоторые ключевые слова в комментариях. Например @new, которое можно лекго найти и откатить внесенные изменения назад, до тех пор пока не найдете проблему.
    <code class="css">
    #sidebar ul li a {
         display: block;
         background-color: #ccc;
              border-bottom: 1px solid #999; /* @new */
         margin: 3px 0 3px 0;
              padding: 3px; /* @new */
    }
    </code>
    


    Заключение


    «Стилевые гиды» CSS могут быть полезны, если их использовать надлежащим образом. Не используйте «стилевые гиды», если они не позволяют вам получить лучшее понимание кода и лучшей структурированности кода. Ваша цель — достичь лучшей понимаемости/удобочитаемости кода.
    PS. Не забывайте, что финальная версия ( или как говорят «продакшен») не должна содержать комментариев «стилевого гида», чтобы не нагружать пользователей передачей лишьнего объема данных. А у разработчика всё-таки должна быть полная версия и после завершения разработки.
    Вольный перевод© по мотивам Improving Code Readability With CSS Styleguides
    PPS. Спасибо всем кто поднял карму, перенёс в тематический блог.
    UPD.В комментариях vithar поделился своим CSS Code Style.
    Предлагаю и остальным включаться и делиться своими наработками.

    UPD. В комментариях уже профодил аналогию с phpdoc и вот наткнулся на начало реализации общего стандарта cssdoc — аналог phpdoc но уже для css. Развитие проекта поможет выработать более или менее единые стандарты при разработке css.
    Поделиться публикацией

    Похожие публикации

    Комментарии 69
      0
      Стилевые гиды, стилевые гиды - комментраии плять и ничто больше.
      • НЛО прилетело и опубликовало эту надпись здесь
          0
          В портале как раз таки из-за комментариев css-ка столько и будет весить. Кста, в тему - очень помогают всяческие компрессоры; имеешь читабельный оригинал, а подключаешь мин или пак.

          В портале не одна css-ка, и доводить ее до истерики в 50Кб это уже слишком, проще разбить их на функциональные блоки и инклудить между собой...

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

          Но все равно спасибо автору, коечто всеже возьму на заметку...
            0
            В той версии которая будет загружаться пользователями по хорошему не должно быть комментариев, но у разработчика обязательно должна оставаться версия с полным документированием.
            • НЛО прилетело и опубликовало эту надпись здесь
              • НЛО прилетело и опубликовало эту надпись здесь
                  0
                  Файрбаг чуть не захлебнулся с нее. Вы поглядите на нее подробнее.) Комментарии там вполне себе присутсвуют..
                  • НЛО прилетело и опубликовало эту надпись здесь
                      0
                      Ага. Это просто ответ на вопрос. Если они есть - компрессором каким либо не пользовались. То что их мало это уже другой разговор.. К разработчикам собственно. =)
              0
              Ога, док-блоки тоже просто коментарии...их тоже не надо использовать.

              Вообще, плохо, что нет стандарта, чтобы можно было им легко пользоваться в различных ИДЕ.
              +2
              Я не стал бы вносить в комментарии техническую информацию о последнем редактировании, авторе и тд. С этим прекрасно справляется SVN.

              Кстати, почему Cascading wtf Sheets внутри acronym?
                +2
                Парсер лохе! Он styles так заменяет, это проблема разработчиков.
                  0
                  Да ладно! )) А если Style, без "s"?
                    0
                    На самом деле там Style написано, ты как администратор вроде бы можешь посмотреть исходный код.
                      0
                      Ну я не хотел лазить просто так, без повода... Вобще конечно цирк ))
                  0
                  Я тоже использую SVN и в принципе соглашусь, что эту информацию можно оставить на совесть SVN.
                  +1
                  Напишу скоро свой styleguide, выложу на всеобщее обозрение. Спасибо за статью. Предлагаю перенести в Каскадные Таблицы Стилей.
                    0
                    Каждый должен писать так, как ему удобно. Если ты работаешь один с кодом, значит пиши так, как считаешь нужым - это и будет удобно.
                      0
                      Ну что ж за идиоты понижают карму и не пишут за что. Руки бы вам отстрелить за такое :)
                        0
                        Не стоит ругаться если вам понижают карму. Зло порождает зло. Карма не цель, а средство. Удачи.

                        Отсыпал вам кармы на всякий случай.
                        +1
                        Во-первых очень редко бывает так, что работаешь с кодом только ты один. Не факт что через год заказчик вернется к тебе и разбираться в этом "удобстве" придется кому-то еще.

                        Во-вторых нужно руководствоваться не только удобством но и логикой, что собственно и определяет значение слова "styleguide", ведь вас никто не заставляет использовать чужие правила.

                        Напишите свои и придерживайтесь их. Дисциплина написания кода - основа успеха.
                        0
                        //Есть ещё более простой способ для который не использует вложенности

                        что-то аж прям как ножом по сердцу, поправьте пожалуйста.
                          0
                          Спасибо, исправил. Как додумался вставить «для» не представляю :)
                            0
                            Бывает:)
                              0
                              One think for developing bla bla bla - одна штука которая помогает разрабатывать блаблабла. "ДЛЯ" взялось отсюда:)
                            0
                            Я бы перевел styleguide как "соглашения по оформлению кода".
                            • НЛО прилетело и опубликовало эту надпись здесь
                                0
                                Спасибо за статью. Вдохновили меня на наведение порядка в стилях текущего проекта.

                                Интересный пример "стилевого гида", немного не то, но ,по-моему, тоже полезно.
                                  +2
                                  Для меня сомнительна полезность комментариев вида:

                                  > 2. Header / #header
                                  > 3. Navigation / #navbar
                                  > 4. Content / #content
                                  > 5. Left column / #leftcolumn
                                  > 6. Right column / #rightcolumn

                                  Это же просто дублирование информации.
                                    0
                                    Это всего лишь пример, можете придумать собственную конструкцию.
                                    Здесь, например, Header обозначает группу к которой относятся элементы. Чтобы найти эту группу в файле просто жмём ctrl-F и вбиваем название группы и автоматически перемещаемся к этому блоку в файле.
                                      0
                                      А что мешает вбить название #header в поиске и так же переместиться к нему? Всё дело в том, что в вашем CSS и так есть все нужные группирующие ID, разбивка на блоки помогает только визуальной навигации, как та же древовидность.
                                      0
                                      мало того! зачем содержание - не понимаю. все-равно нужно будет нажать ctrl+F и искать по ключевому слову (ну, класс, айдишник, свет...).
                                      Считаю достаточным разбивать все по группам + визуальные разделители между группами.
                                        0
                                        Например, даёт представление о структуре.
                                      0
                                      Обычные камменты как и к разным функция в пхп том же, но все равно спасибо
                                        0
                                        Да, это всего лишь свод правил и соглашений как http://phpdoc.org/
                                          0
                                          ну впринцыпе да)
                                        +1
                                        Стилевые гиды — эт конечно сильно. Как Промтом переводили.

                                        Стайл гайды, просто «гайды», код-стайл — это ещё куда ни шло. Но лучше — оформление кода. Звучит менее круто, зато по-русски и не возникает сомнений о чём речь, ведь «стайл гайд» — это ещё и пресловутые «принципы использования фирменного стиля», разработкой которых стало модно заниматься.
                                          0
                                          Я решил использовать такое определение. В начале статьи я условился, что понимать под этим понятием в данном контексте.
                                            0
                                            Я отлично вас понял, но мне кажется, что данное определение достаточно косо.
                                            Но, опять же — имхо. Приятно всё-таки говорить по-русски, вы не находите?
                                              0
                                              Не хотел бы дискутировать на тему личных предпочтений. Как вы сказали, у каждого своё имхо.
                                              Суть же не в том как называются методы, а в том, в чём заключается их сущность и способы их использования?
                                                0
                                                Претензия была исключительно по поводу названия. И, да, я считаю, что это важно — называть вещи доступно пониманию, избегая любых смысловых ошибок и противоречий.
                                          +2
                                          И всё равно полезного очень мало, особенно про самое важное — написание самих правил. Древовидность и порядок следования — это только верхушка айсберга. Пойду дописывать продолжение «CSS-менеджмента»… там как раз об этом.
                                            0
                                            Угодить всем невозможно. Кому-то больше, кому-то меньше.
                                            +2
                                            Хотелось бы услышать что-то более полезное, чем "пишите побольше комментариев и структурируйте их". Извините, но это и ежу понятно, но от этого проще не становится. Если в компании существует отдел верстки, то конечно они могут себе позволить потратить 50% времени на написание комментариев, чтоб потом не объяснять коллегам что там и как, и самому не тратить много времени на рефакторинг. Но если у компании есть штат верстальщиков (или хотя бы один), то ему платят деньги, чтоб код был качественным и читаемым, и написание комментариев входит в его обязанности.

                                            Лично я бы хотел здесь услышать советы для непрофессиональных верстальщиков - для веб-разработчиков, которым ко всему прочему приходится писать CSS, и они хотели бы сделать его удобным, простым и подвластным рефакторингу. Хотелось бы услышать о том как лучше называть классы, как их создавать, чтоб максимально использовать наследование, и пр. С нормальными названиями, и четкой структурой огромного колличества комментариев можно избежать.
                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                0
                                                Гуру пока на отдыхе или спят :)
                                                0
                                                На этих выходных напишу )
                                                +1
                                                для всех этих табов желателен большой, 24-х дюймовый (хотя бы) монитор.
                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                    0
                                                    вы пошутили про 15"?
                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                        0
                                                        если вы только начинаете, то простительно использовать то, что есть. было дело я и 14" работал.
                                                        в ином случае, задумайтесь о покупке нового моника. 17"-19" вполне доступны по ценам сейчас. зачем травмировать себя?
                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                    0
                                                    как то настораживает следующее:

                                                    "... но мы пока рассмотрим только несколько из них. ..... (и далее в коде или когда выключено отображение графики ..... "Внимание! Если вы видите данное изображение, то данная статья была несогласованно скопирована с ресурса http://blog.obout.ru/ С политикой копирования материалов с сайта http://blog.obout.ru можно ознакомиться на странице http://blog.obout.ru/copyright" ......."

                                                    И копирайтов что-то не заметил...
                                                      0
                                                      Извиняюсь за неудобство, не мог предположить что кто-то ещё отключает картинки. Как я заметил, вы пока ещё на хабре ничего не публиковали, поэтому не понимаете некоторую специфику публикации здесь статей. Дело в том, что хабрахабр очень хороший источник для различных автоматических агрегаторов и копипастеров, которые категорически отказываются идти на компромис. Я думаю другие авторы публикующие свои статьи из своего блога отнесутся пониманием. Поэтому я решил провести небольшой эксперимент с применением некоторой защиты, которую администрация не может предложить пока. Как вижу один побочный результат к сожалению есть.
                                                      Не люблю заниматься самопиаром и размещать ссылки на свой сайт, никогда этого не делал, но видимо придётся.
                                                        0
                                                        Дофига кто отключает. В смысле, в Москве - может и не отключают, а в России отключает подавляющее большинство. Нет там приличного анлима, иногда вообще никакого нет.
                                                          0
                                                          Да, вы правы. Я не публиковался. Не потому, что не хочу. Опыта мало. В основном читаю и набираюсь уму разуму. ;)
                                                          Сорри, не заметил "blog.obout.ru", что это ваш блог.
                                                        0
                                                        размер ксс вырастет втрое

                                                        лучше сделать отдельный файлик с описанием, раз на то пошло,
                                                        или деверский пусть будет с комментариями, а тот что в релизе, без коментариев и в одну строку ;)
                                                          0
                                                          Вы наверное читали через строку или не дочитали до PS. Там как раз этот момент затронут ;)
                                                          0
                                                          меня интересует страдает ли скорость от ниже указанной формы? Или лучше всё в одном файле?

                                                          style.css
                                                          @import "reset.css";
                                                          @import "layout.css";
                                                          @import "colors.css";
                                                          @import "typography.css";
                                                          @import "flash.css";
                                                          /* @import "debugging.css"; */

                                                          или всё в одном: style.css
                                                            0
                                                            быстрее загрузится когда 1 файл.
                                                            мы проверяли в последнем проекте.
                                                            у нас окола 30 CSS файлов.
                                                            когда собрали все во едино, получили прирост по загрузке стилей ощутимый.
                                                            то же самое и про JS файлы.

                                                            я, преимущественно, создаю один основной файл с набором стилей
                                                            и три файла под: IE, IE6, IE7 :D

                                                            мне этого хватает с головой для обычного сайта/портала.

                                                            что же по сабжу - интересная статья.
                                                            есть моменты в которых не вижу смысла (это имхо!)
                                                            но есть некоторые решения которые думаю буду использовать.

                                                            спасибо автору.
                                                              0
                                                              Можно обойтись двумя файлами, причем каждый браузер будет грузить только один файл.
                                                              0
                                                              При большем количестве подключенных файлов возрастает количество запросов к серверу и, как следствие, скорость.
                                                              В финальной версии (той которая будет уже на рабочем сервере) лучше грамотно объединять все модули в один файл. ИМХО, а в процессе разработки можно и использовать импортирование.
                                                                0
                                                                Мы так и делаем, причём CSS файлов у нас не единицы, а десятки и даже сотни.
                                                              +1
                                                              У нас такой CSS Code Style: http://vitaly.harisov.name/css-code-styl…
                                                                0
                                                                Очень интересна показалась организация построения css файлов, которую описал в своем учебнике Сагалаев Иван.
                                                                Да и сам учебник, думаю, что для начинающих будет полезен.
                                                                  0
                                                                  btw, табы - зло.

                                                                  Лучше пусть будет X пробелов.
                                                                    0
                                                                    Давно сформировал для себя собственный styleguide, однако теперь буду использовать ещё и “вложения” табами. :)

                                                                    Спасибо!

                                                                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                                    Самое читаемое