Дизайнеры провести CSS близко к их сердцам.Это просто код, но это также то, что делает наши тщательно разработанные конструкции оживают.Продуманный CSS является CSS, который уважает наши проекты, то есть ручной с точностью.Общей концепции среди веб-дизайнеров является то, что хорошо стилей создается стороны, каждый фигурные скобки тщательно размещены, каждый поставщик префикс набрал в manually.

? Но как эту традицию вписывается в мир, где веб-сайтов и приложений, которые мы хотим создать становятся все более сложными

Ищу Back

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

Промышленные Revolution (которое состоялось примерно от середины 18-го и 19-го веков, начиная в Великобритании) был период потрясений в обществе; нескольких аспектах жизни менялись.Многое из этого было связано с тем, как люди выпускаемой продукции: в течение этого периода, ручной труд начал становиться mechanized.В текстильной промышленности, например, переехал из в основном от человека к машинного производства, и его ремесленники начали искать пути, чтобы быть более efficient.

Одна из многих продуктов промышленной революции.(Изображение: МакКорд Museum)

Эти машины, которые были созданы с КПД в виду изначально были довольно примитивными, и общественность не знала, что думать о них.Нам потребовалось некоторое время, чтобы приспособиться так, как мы работали с ними и то, как мы думали о them.

Вакансии, которые ранее требовали человеческого труда сейчас не требует ни от кого, машина может сделать работу дешевле и быстрее, сотрудники стали избыточными.Но рабочие места, в котором люди были заменены машинами были в основном повторяющимися те, рабочих мест, для которых ручной труд не обязательно делать для лучшего products  —   по крайней мере в существенных way.

Некоторые утверждали, что выход пострадали в качество, что фабричные объекты не хватает личности, что мастерство терялось, и все же производство совершенствуется и развивается.Мы были также добраться до точки, что некоторые продукты становятся слишком сложны, чтобы быть сделано вручную anymore.

Эта революция сформировала мир в котором мы живем сегодня, и дал нам доступ к вещам, которые были до сих пор слишком дорогим или даже не existent.

Возвращаясь к нашей теме, мы видим увеличение сложности в мир веб-дизайнаи CSS.Мы хотим создание все более сложных websites и apps  —   системы настолько сложны, что они не могут быть сделаны полностью hand.

MobileMe, с ее обширной функциональностью и понятный интерфейс, является примером сложного Web application.

World Of Developers

Разработчики и программисты уже склонен к автоматизации.Разработчики инстинктивно не изобретать колесо.Они понимают необходимость автоматизации производства (по крайней мере некоторых его этапах); они понимают, что ручной кода не требуется на каждом шагу process.

Даже если вы большой переднего конца разработчика, который знает, как наличие тыльной стороной ладони, вы все равно отложить многие ваши работы jQuery или некоторые другие библиотеки.Даже если вы в состоянии написать код самостоятельно, время, вы бы сэкономить, не делаю, что освобождает вас иметь дело с более серьезными проблемами.Успехи в написание сценария с нуля не ровня достижения в возможность сосредоточить внимание на проблемы, которые не машина или автоматизированный процесс может solve.

jQuery, известный разработчик tool.

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

Неправильные Attitude

Веб-дизайнеры не одобряю такого рода ярлыки.Этот способ мышления не переводить на CSS; в мире CSS, принимая эти “ярлыки” не очень хорошо regarded.

Мы CSS авторов есть список грязных words, что мы не сказать, когда мы говорим с другими друзьями веб-дизайнера.Например, когда кто-то говорит, что они использовали рамки CSS, извинений немедленно следующим образом: “. Это была не наша вина”

Принципы, такие как DRY (не повторяйте себе) нет в CSS.

“. Каждый кусок знания должен иметь одно однозначное, авторитетное представление в системе« сухой утверждает, что это относится не только к коде, но для каждого аспекта продукта, такого как сам дизайн.При сухой принципы будут соблюдаться, мы должны в конечном итоге с продуктами, которые имеют более высокое качество и легче maintain.

Мы CSS авторы не думают о стоимостьmaintenance или повышенной сложности, что дублирование и сокращая стилей добавить к нашему CSS sheets.

Мы обычно следуют что-то ближе к WET: мы наслаждаемся typing.Почему кто-то хотел бы руки-код префиксы для CSS градиенты находится за пределами моего понимания, но правда в том, что некоторые люди делают, и они гордятся тем, it.

CSS authors  —   есть веб-дизайнеров, которые пишут CSS  —   Не люблю машины.Мы не думаю, что любой CSS, что машина может производить никогда не будет так хорош, как тот, который мы делаем себя рукой.Но что, если это не так?Что делать, если результат будет так хорошо, как наши собственные ручного труда с нуля

Другие группы были те же страхи. Luddites были рабочие, которые яростно выступали против промышленной революции и прогресса.Они сказали, что машины были принимать их jobs  —   которая была правда.Но они сражались, протестовал, стал жестоким и в итоге проиграли.Занятия будут развиваться, хотели они того или not.

Луддитов, разбив машину.(Изображение: Wikipedia)

Контекст Matters

Это правда, что мы не все Код для Facebooks и еху этого мира; производительность вашего CSS ‘не может быть самое главное, чтобы сосредоточить внимание в ваших проектах.Но именно поэтому учитывая контекст вопросов, и именно поэтому важно не увольнять методов и решений, потому что кто-то однажды сказал нам, что они были неправы или dirty.

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

Интересный список чтения.(Изображение: Mike Kuniavsky)

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

Переосмысление наших процессов может привести к повышению качества работы.Это может привести к совершенствованию Машина еще в infancy.Если мы не отрицаем механизации от вступления внашей работы, мы получим шанс сформировать его так, что он делает именно то, что мы хотим, чтобы do.

Попробуйте это на Home

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

Каркасы: Не изобретать Wheel

Как уже упоминалось, «рамки», вероятно, грязных word в авторе CSS в vocabulary  —   или второй грязные, после “Dreamweaver”. (Примечание:. Эта статья была написана до появления Muse Adobe)

Часто при обсуждении темы этой статьи, люди уходят, считая, что послание, которое я пытаюсь донести это использовать CSS рамки.Это не правильно.Но это не совсем неправильно либо.Позвольте мне explain.

Каркасы являются важным инструментом в репертуаре автора в CSS.Под этим я не имею в виду, что вы должны слепо использовать популярные фреймворки, такие как Blueprint или 960 Grid System.Конечно, эти рамки были прибиты некоторые вещи, и мы, безусловно, может многому научиться у своей гибкости и модульности, но это более важно, что you  —   особенно если вы находитесь на team  —   адаптироваться основу дляпотребности вас, вашей компании и team.

Blueprint, популярный CSS framework.

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

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

Каркасы могут также быть полезными инструментами для wireframing и прототипов, особенно когда существуют ограничения по времени, и вы должны положить что-то в передней части пользователей или заинтересованных сторон quickly.

Существуют различия между рамок и шаблонов библиотеки, компоненты или даже простой набор фрагментов кода.Рамки системы, которая является гибкой и может быть настроен на множество типов макетов, создание различных шаблонов страниц,в то время как библиотеки составляет меньше отдельные модули, которые не должны быть привязаны к какой-либо конкретной всеобъемлющей основы или страницы construction.

Образец демонстрирует, как, например, вкладок навигации должна функционировать или как отметить ее; дизайн компонент может быть точное визуальное представление экземпляра вкладок навигации, с его цветов, форм и шрифтов.Это объяснение этих двух различных и важных понятий является очень упрощенным.«Дополнительные материалы» раздел в конце этой статье перечислены некоторые полезные ресурсы на both.

Yahoo Design Pattern Library.

Рамки не должны выплюнуть многочисленные unsemantic имена классов для каждого контейнера в разметке.Если вы создаете свой собственный, вы можете назвать тех классов, что вы чувствуете, right.

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

/* Resets */

/* Structure */

/* Global elements */

/* Visual media */

/* Article structure */

/* Forms */

/* Tables */

/* Reusable */

Эта структура является, вероятно, похож на многие ваши собственные таблицы стилей.Давайте посмотрим на “Статья структура” раздел в качестве примера то, что, вероятно, извлечь выгоду из некоторых рамках вдохновения.В проекте, вы, вероятно, придется разместить несколько вариантов шаблонов из различных ведомств, кафедр, создателей контента, редакторов и т.д. Вместо того чтобы использовать классы, как span-6 и pull-3, вы можете определить систему наименования, которые лучшесвязей в содержании сайта.Например:

/* Article structure */

article {
	width: 80%;
}
article.charticle { /* Charticle pages have no sidebar */
	width: 100%;
}
article.listicle {
	width: 70%;
}

article > .headline {
	font-size: 2em;
}
article.feature > .headline {
	color: #000;
}
article.breaking > .headline {
	text-decoration: underline;
}

article > section {
	border-bottom: 1px solid #efefef;
} 

article > aside {
	background: #efefef;
	padding: .5em;
}

article > footer {
	font-size: .9em;
}

Несколько вещей, о вышеупомянутом CSS можно обсуждать (я уверен, что многие из вас сильные чувства по поводу потомка селекторы и названных элементов и даже являются ли некоторые из этих классов могли бы быть простым элементом selectors  —   с именем, ноНесколько пунктов), но ни один из этих вопросов в этом примере.Что дело в том, как вы можете быть под влиянием каких популярных сделай все рамки делает, и как вы можете применить это к вашей чистой, семантической и отлично имени разметки и CSS.

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

Подумайте о Others

После того, что мы обсуждали в предыдущем разделе, тот факт, что ваш CSS не живет в вакууме может быть чрезвычайно useful.

Другие people  —   и будущее you  —   возможно, придется вернуться позже, чтобы редактировать таблицы стилей, которые вы создаете сегодня.Разве вы не хотите, чтобы ваше будущее сам, чтобы быть свободнымидти домой к своей супруге и детям Ранее в пятницу днем, а не иметь поздно ложиться рефакторинг CSS файл, который трудно понять и невозможно расширить

Сделайте себе и д …

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