Каркасы CSS CSS Reset: Design From Scratch

Вы don’ т должны написать тот же CSS-кодом или (X) HTML-разметки снова и снова.

Независимо от проекта you’ Re начинает работать, в какой-то момент вы должны определить классы и идентификаторы you’ нас уже определены в предыдущем веб-проектов.Чтобы избежать ненужных ошибок, которые вы, возможно, захотите начинать не с пустого файла, но из почти “ perfect” scratch.Последний может содержать некоторые основные определения you’ D написать в коде в любом случае.Однако, как только you’ ве решили создать такой нуля, вы должны убедиться, что это действительно пуленепробиваемый — кроме того, если таблица стилей также устанавливает оптимальные правила типографики и основные стили формы вам удастся убить двух зайцев одним stone.

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

Let’ S взглянуть на идеи за рамками CSS, их преимущества и недостатки, самые популярные CSS основы и десятки умолчанию stylesheets Вы можете использовать разработку нового веб-сайта с scratch.

  • Эта статья частично покрывает инструменты и методы, которые используют сетей.Возможно, вы захотите убедиться, что вы получите эту идею за решеткой на основе проектного подхода — из нашей статьи . Проектирование с сеткой на основе Approach
  • Вы можете найти сотни шаблоны CSS в нашей статье Бесплатные Шаблоны CSS и Templates.
  • Пожалуйста, обратите внимание, что эта статья занимает более близкий взгляд на CSS Frameworks, а не на обширной программирования на стороне сервера структур, таких как CakePHP, а также не в веб-средах разработки, таких как Coda или Dreamweaver.

Что такое CSS Framework

  • Структура является основным (как правило, абстрактные) концептуальные структуры, которые можно использовать в качестве “ scratch” для ваших веб-проектов.Например, вместо определения глобального сброса, соответствует базовым, типографских правил или основных стилей для форм, снова и снова — каждый раз, когда вы работаете над новым проектом — вы можете подготовить умолчанию стиль один раз и использовать его во всех будущих вашихprojects.Это то, что вы называете CSS Framework.
  • CSS рамки don’ т должны быть сложными или большие, они могут содержать множество простых CSS-стилей, таких как
    • typography.css Основные правила для типографского,
    • grid.css на сетке основе макетов Or
    • layout.css для генеральных планов,
    • form.css основных стилей формы,
    • general.css для дальнейшего общем rules

    И так далее.В коде сегментации вы также можете пойти дальше, например: структура, оформление, дизайн презентации, специалист по разделам (например, меню, навигация), печать, мобильный интернет, твики (в основном старые хаки стиле браузера), браузер конкретных обходные пути (через IE условныезаявление).“ В целом сегментация код в рамки удобно работать, но это может добавить некоторую реальную нагрузку на сервер с дополнительными запрос HTTP на странице view.” [ ступая слегка CSS Frameworks по GaryBarber]

  • “ [база] набор инструментов, библиотек, конвенций и лучших практик, которые пытаются абстрактные рутинных задач в общих модулей, которые могут быть reused.Цель здесь состоит, чтобы позволить дизайнеру или разработчику сосредоточиться на задачах, которые являются уникальными для данного проекта, а не изобретать колесо каждый раз around.” [ Framework для Designers по Джефф Croft]

Преимущества CSS Frameworks

  • Вы повысить производительность и избежать распространенных mistakes.Если вы разрабатываете несколько сайтов подобной природы, абстракция CSS код может значительно ускорить производительность, помогут вам избежать распространенных ошибок и упростить управление CSS code.
  • Вы нормализации код / ​​класс base.У вас есть общие “ default” CSS-кода и (X) HTML-разметку, так что вы всегда использовать те же идентификаторы и имена классов в ваших проектах.Код согласованности на протяжении ряда проектов составляет it’ проще для вас, чтобы поддерживать веб-сайт без копаться в исходном коде каждого проекта you’ когда-либо работал на — чтобы понять, как you’ нас на самом деле построен веб-site.
  • У вас есть лучший рабочий процесс в team.Если CSS-рамки хорошо документирована, она может быть использована в команде в качестве общей земли вверх, таким образом вы сможете избежать недоразумений и обеспечить оптимальный рабочий процесс.Последние результаты избежать ошибок и помогает вам уложиться в сроки без ущерба для качества продукта и без сверхурочных costs.
  • Вы получаете оптимальное браузер compatibility.Так как ваш CSS-рамки “ bulletproof”, вам не придется беспокоиться о совместимости браузера вопросов и может начать кодирование право away.
  • У вас есть чистый, хорошо структурированный и полный code.CSS рамки предоставить вам продуманная основа для Ваших сайтов, используя их у вас есть основные стили всех HTML-элементов you’ будете когда-нибудь понадобится, чтобы стиле с самого начала ваших проектов.Вы когда-нибудь забывали о code или abbr?That’ Spoint.

Недостатки CSS Frameworks

  • Вам нужно время, чтобы полностью понять framework.“ Для среднестатистического пользователя, [..] Время, необходимое для понимания архитектуры рамки значительно перевешивает черную задачи кодирования от scratch.” [ Почему я не использую frameworks]
  • Вам нужно Тесное знакомство с architecture.__7 вашего кода |Использование внешних рамок CSS, вам все еще нужно глубокое понимание вашего кода.Вы должны точно знать, как ваша база фактически построен.“ По созданию сайта с нуля, вы получаете знания архитектуры вашего сайта, которые не могут быть изучены через любое исследование или documentation.” [ Почему я не использую frameworks]
  • Вы могли бы унаследовать someone’ с ошибками или mistakes.Если вы используете внешние рамки CSS вы можете попасть в беду кто-то крепления чужие ошибки, которые гораздо более трудоемкий, чем исправление собственных bugs.
  • Вы разработке сайтов на основу, а не на твердом знании CSS.“ Большие проблемы с рамками, когда и ближайшие разработчиков присоединяются к структуре, в отличие от основной код.Знания, полученные в этом случае окружающая конкретные рамки, что серьезно ограничивает developer.” [ Пожалуйста, не используйте CSS Frameworks, от Джонатан Christopher]
  • Вы получаете раздутый источник code.“ Будь то на языке сервера рамках сторону или JavaScript библиотеки, часто большой процент кода, который никогда не будет выполнен.В то время как не является основным вопросом на стороне сервера, это может значительно ухудшить производительность рамках стороне клиента, таких как наличие library.” [ Пожалуйста, не используйте CSS Frameworks, от Джонатан Christopher]
  • CSS не может быть оформлена semantically.“ CSS и (X) HTML идут рука об руку.(X) HTML является языком семантического характера, которые невозможно завершить в стиле рамки.Каждый проект уникален сам по себе, вплоть до структуры документа, классы и идентификаторы.Основы CSS пассивно удаляет большинство семантического значения от разметки документа и, на мой взгляд, должна быть avoided.” [ Пожалуйста, не используйте CSS Frameworks, от Джонатан Christopher]
  • Не обращая внимания на уникальность вашего projects.Проекты должны быть основаны на содержании, а не на стандартном шаблоне использовать снова и снова again.

CSS Frameworks

YAML (Yet Another Multicolumn Layout)

Dirk Jesse’ Обширный (X) HTML / CSS Framework предлагает целую кучу умолчанию шаблоны для ряда простых или более сложных веб-проектов.YAML основаны на веб-стандартах и ​​поддерживает все современные веб-браузер.Все интернет Explorer’ крупнейших ошибок рендеринга противостоит.YAML полностью поддерживает все версии IE от 5.x/Win в 7.0.

Помимо ряда стандартов соответствия макетов рамках также предлагает отладку stylesheet, печать стилей, а также различных надежных инструментов для веб-разработки в YAML.Все CSS компонентов структуры, а также различные методы макетов Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Comments are closed.