Главная → Программирование → by

Улучшение читабельности кода с помощью CSS Styleguides

После последних проектов будет завершена, вы, весьма вероятно, забыл структуры project’ макет с, при всех его многочисленных классов, цветовые схемы и типа установки.
Чтобы понять ваши годы кода после you’ ве написал вам нужно использовать разумно структурирование кода.Последний может значительно снизить сложность, улучшить управление кодом и, следовательно, упростить ремонтопригодность.Однако, как вы можете достичь разумным structuring?Ну, есть несколько вариантов.Например, вы можете использовать комментарии — В конце концов, всегда есть место для полезных советов, заметок, ну и комментарии вы можете использовать потом, после того, как проект был deployed.

Действительно, разработчики придумали весьма творческие способы использования комментариев и форматирования текста для улучшения ремонтопригодности CSS-кодом.Такие творческие способы, как правило, объединены в CSS styleguides — куски CSS-кодом, которые должны предоставить разработчикам полезно взглянуть на структуру кода и справочной информации, связанных с it.

Эта статья представляет 5 методы кодирования, которые могут значительно улучшить управление и упрощения сопровождения вашего code.Вы можете применять их в CSS, но и любой другой стиль или язык программирования вы используете.Вы можете просматривать ссылки, перечисленные в статье — они containt дополнительной информации о том, как можно достичь хорошо организованным и хорошо структурированным code.

Вы также можете быть заинтересованы в articles

1.Разделяй и властвуй ваша code

Сначала рассмотрим структуру вашего макета и определить наиболее важные модули в вашем CSS-кодом.В большинстве случаев it’ S полезно выбрать порядок CSS-селекторов в соответствии с порядком делителей (div’ ы) и классы в макете.Перед началом кодирования, группа общие элементы в отдельных разделах и название каждой группе.Например, вы можете выбрать глобальных стилей (тело, абзацы, списки и т.д.), Layout, заголовки, стили текста, навигации, формы, комментарии и Extras.

Чтобы ясно отдельных фрагментов кода, выделите необходимый флаги или поразительное comments (более *-символы вы в коде, тем более поразительным разделу).В таблице стилей они будут служить в качестве заголовка для каждой группы.Перед применением предпочтительным флаг в код, убедитесь, что вы можете immediately признаем отдельных блоков при сканировании черезcode.

Однако, этот подход может быть не достаточно для больших проектов, где один модуль слишком большой.Если это так, то вам, возможно, придется разделить свой код в нескольких файлах для поддержания обзор одной группы фрагментов кода.В таких ситуациях мастер stylesheet используется для импорта групп.Использование мастер-стилей можно создавать ненужные запросы к серверу, но подход создает чистый и элегантный код, который легко использовать повторно, легко понять и легко поддерживать.И вы также должны включать в себя только мастер-файл в вашем documents.

/*------------------------------------------------------------------
[Master Stylesheet]

Project:	Smashing Magazine
Version:	1.1
Last change:	05/02/08 [fixed Float bug, vf]
Assigned to:	Vitaly Friedman (vf), Sven Lennartz (sl)
Primary use:	Magazine 
-------------------------------------------------------------------*/
@import "reset.css";
@import "layout.css";
@import "colors.css";
@import "typography.css";
@import "flash.css";
/* @import "debugging.css"; */

Для больших проектов или большой команды разработчиков это также полезно иметь краткая обновленная log и некоторую дополнительную информацию о проекте — например,Вы можете поместить информацию о том, кто это CSS-файлу присваивается и каково его основное применение. (например, Smashing Magazine, Smashing Jobs т.д.)

Кроме того, вы можете включить отладку CSS-код, чтобы заботиться о диагностических стиль на случай, если в некоторых проблем.Рассмотрите возможность использования Эрик Meyer’ S Диагностические Styling как отладка стилей для проверки ваших CSS-код и исправить problems.

2.Определить таблицу contents

Чтобы сохранить информацию о структуре вашего кода, вы можете рассмотреть вопрос об определении оглавления в начале вашего CSS-файлов.Одна из возможностей интеграции оглавления для отображения дерево overview вашего макета с идентификаторов и классов, используемых в каждой ветви дерева.Вы можете использовать несколько ключевых слов, таких как заголовка section __ или 8 | контент-group чтобы иметь возможность переходить к определенным кодом immediately.

Вы также можете выбрать некоторые важные элементы, которые вы, вероятно, часто меняются — после окончания проекта будет отпущена.Эти классы и идентификаторы могут также появиться в оглавлении, так как только you’ понадобится, чтобы найти их you’ найдем их сразу — без сканирования всей вашей кода или вспомнив, что класс или ID вы когда-то used.

/*------------------------------------------------------------------
[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
-------------------------------------------------------------------*/

… или вроде этого: 

/*------------------------------------------------------------------
[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
-------------------------------------------------------------------*/

Другой подход заключается в использовании простое перечисление без indentation.В exampe ниже, когда вам нужно перейти на RSS-разделе вы просто использовать инструмент поиска, чтобы найти 8.RSS в коде.That’ Легко, быстро и effective.

/*------------------------------------------------------------------
[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
-------------------------------------------------------------------*/
<!-- some CSS-code -->

/*------------------------------------------------------------------
[8. RSS / #rss]
*/
#rss { ... }
#rss img { ... }

Определение оглавления вы сделать это проще, особенно для других лю …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → by

Comments are closed.