JQuery, Prototype, Node.js, Backbone.js, Усы и тысячи microlibraries наличие всех объединить в единый бесспорный факт: JavaScript является popular.

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

Даже если мы сохраним JavaScript, CSS и HTML в разных файлах, концепция постепенного улучшения становятся все завязанный с каждым JQuery плагин мы используем, и с каждым странно техника, которая всплывает.Потому что наличие такой мощной, есть много совпадений в способности между JavaScript и HTML (структура здания документа) и JavaScript и CSS (потребители инъекционных информация о стиле).I’ м не здесь, чтобы выбрать на любой библиотеки JavaScript, загрузки или шаблона; I’ м только здесь, чтобы предложить немного точки зрения, как, где мы находимся и как мы можем перестроить наши goals.

Изображение Фото:. opensourceway

( Smashing’ на сторону note:. Вы уже предварительно заказали новую Smashing Мобильная Book все книги функции вы должны знать, как дизайнер или разработчик для создания красивых и богатых мобильного опыта Получить книгу сегодня !)

Хранение CSS Out Of Your JavaScript

CSS можно подключить в HTML с различными селекторов, это не что-то новое.С помощью идентификаторов, классов или атрибутов вы можете думать (даже пользовательские атрибуты), у вас есть легкий доступ к стилю элемента.Вы также можете сделать это с помощью множество методов JavaScript, и, честно говоря, это тот же основной процесс с другой синтаксис (один из моих наличие ах-ха моменты).Будучи в состоянии изначально доступа из JavaScript HTML и от CSS является одной из причин постепенного улучшения были такие успешные модели развития.Это позволяет точкой отсчета, чтобы вести нас и служит напоминанием, как мы разрабатываем проект, поэтому мы don’ т “ крест streams ”.

Но, как вам двигаться вперед с JavaScript и создавать приложения с высоко интерактивные элементы, становится все труднее не только сохранить HTML из ваших JavaScript, но и поймать себя перед инъекцией информации стиля в документе.Конечно, в случае не инъекционных стиле с JavaScript, безусловно, не является бинарным (да / нет, верно / неверно, 0/1); есть много случаев, когда вам может понадобиться применить стили постепенно, например, вперетаскивания интерфейс, где позиционирование информация должна быть постоянно обновляются на основена курсором (или палец) position.

Но, вообще говоря, вы можете спокойно вместить всех стилей необходимую информацию в CSS и ссылки стили, как многократно используемых классов.Это гораздо более гибкая модель, чем опрыскивание CSS протяжении файл JavaScript, и это очень близко сравниться с моделью добавить информацию о стиле в ваш HTML.Мы будем следовать этой модели, когда it’ единственный HTML и CSS, но по какой-то причине она имеет тенденцию разваливаться когда-то JavaScript будет добавлен в микс.It’ S конечно, то, что мы должны держать глаза on.

Много интерфейсных разработчиков предпринять реальные гордиться тем, что чистый HTML.It’ легко работать, и определенные супер-вундеркиндов это может быть даже хитрее.It’ здорово иметь чистую, статический HTML, но что хорошего в том, что если ваш генерируется HTML пронизана вводят стиль и не-семантической разметки?По “ генерируется HTML, ” I’ м ссылок, как HTML выглядит после it’ S было потреблено и barfed обратно после того, как прошли вокруг всех этих плагинов и дополнительных JavaScript.Если первый шаг к тому, чистый HTML и отделены прогрессивные слои аксессуара, чтобы не использовать style атрибут, I’ D должен сказать, что второй шаг, чтобы избежать написания JavaScript, который вводит style атрибут для you.

Очистка Ваш HTML

Мы можем, наверное, все согласятся, что слепо использованием технологии ужасная идея, и я думаю, что мы находимся в точке с JQuery, где мы находимся, действительно, слепо используя множество возможностей без полного понимания того, что происходит под капотом.Например, я опираются на довольно тяжело для хранения CSS из моего JavaScript является поведение ~ JQuery по 11 | метод.Основываясь на принципах прогрессивного улучшения, вы бы не код что-то со встроенным CSS следующим образом:

<div class="content-area" style="display:none;"></div>

Мы don’ т сделать, потому что для чтения с экрана won’ T подобрать элемент, если стиль установлена ​​на display:none, и это также мутит до ненужной HTML презентационной информации.При использовании JQuery метод, как hide(), that’ именно то, что она делает: она будет установлена ​​style атрибут целевой области и добавлять свойства отображения none.It’ S очень прост в реализации, но не очень хорошо для accessibility.Он также нарушает принципы прогрессивного улучшения, когда вы вводите стиля в документе следующим образом (we’ Re всякие испортил, да?).It’ не редкость для этого метода, используемого в интерфейсе табуляции, чтобы скрыть содержание.Результатом является то, что содержание несуществующего чтения с экрана.Как только мы осознаем, что добавление стиль JavaScript isn’ T идеал в большинстве случаев, мы можем переместить его в CSS и ссылаться на него как класс:

CSS

.hide {
   display: none;
}

jQuery

$('.content-area').addClass('hide');

У нас еще есть для решения проблемы доступности сокрытия содержания с display:none, но так как we’ не используете встроенный в JQuery метод больше, мы можем контролировать, как именно содержание получает скрытые (в зависимости от доступнойметод вы предпочитаете, вероятно, штраф).Например, мы могли бы сделать что-то вроде:

CSS

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

.remove {
   display: none;
}

В приведенном выше примере, вы можете увидеть, что, хотя оба класса результат по содержанию удаляется из поля зрения, они действуют совершенно иначе, чем доступности точки зрения.Глядя на код, как это ясно показывает, что мы действительно имеем дело с информации о стиле, которая принадлежит в файле CSS.Использование вспомогательных классов, таким образом, может не только помочь в вашем браузере похудеть, но также имеют двойное применение в объектно-ориентированного CSS (OOCSS) модели развития.Это действительно образом, чтобы не повторить yourself (Don’ T Repeat Yourself, или сухой) в CSS, но и по всему проекту, создавая более целостный подход к интерфейсных развития.Лично я вижу много пользы в борьбе с вашим поведением таким образом, но некоторые люди также называют меня контрольно-урод в past.

Web и команда Environments

Это способ, которым мы можем начать открытие линии связи между CSS и JavaScript и опираться на сильные стороны каждого языка, не переусердствовать.Создание развития баланса на переднем конце очень important, потому что окружающая среда является настолько хрупкой, и мы can’ T контроль него, как мы можем на заднем конце с сервером.Если user’ S браузер старый и медленный, большую часть времени вы can’ T сесть и обновить его (в сторону: у меня есть моя бабушка использовании Chrome); все, что вы можете сделать, это принять экологического хаоса, построить на лучшееи план на worst.

Некоторые люди спорил со мной в прошлом, что этот стиль развития, где you’ Re ссылки CSS классы в Ja …

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