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

Развязка HTML с CSS

В течение многих лет, сообщество веб-стандартов говорил о разделении проблем.Разделите ваши CSS от вашей JavaScript из вашего HTML.Мы все делаем, верно?CSS идет в своем собственном файле; наличие идет в другую; HTML остался сам по себе хорош и clean.

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

Таким образом, мы действительно не отделяли два, у нас?Мы хотим, чтобы наши изменения в двух places.

Исследование Approaches

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

Совсем недавно я провел два года в Yahoo работает над Mail, Messenger, календарь и другие проекты.Работа на гораздо больший проект с гораздо большей команды был большой опыт.Небольшая группа prototypers работал с большим команда дизайнеров для построения всех HTML и CSS для нескольких команд engineers.

Это было самым масштабным проектом я работал во многих аспектах:

  • База пользователей Yahoo, имеет массовый характер.Почта имеет только около 300 миллионов users.
  • Сотни людей распределены между несколькими командами работали с HTML и CSS.
  • Мы разрабатывали систему компонентов для работы на нескольких projects.

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

Я посмотрел, что все остальное делает.Я посмотрел на Николь Салливан объектно-ориентированного CSS, презентация Jina Болтоне на “ CSS Workflow” и Натали Даун в “ Практическая, в сопровождении CSS“, чтобы назвать только few.

Я закончил писать свои мысли в виде длинной формы стиль руководства под названием “ Масштабируемость и модульная архитектура для CSS.« Это звучит многословным, так что вы можете просто назвать его SMACSS (произносится как “попахивает”) для краткости.Это руководство, которое продолжает развиваться как я уточнить и расширить подходы к CSS development.

В результате этого исследования, я заметил, что дизайнеры (включая меня) традиционно написать CSS, которая глубоко связана с HTML, что он предназначен для стиля.Как мы начинаем отделить два для болеегибкого развития с меньшим рефакторинга

Иными словами, как мы можем избежать бросали !important? На все, или оказаться в аду селектора

Повторное использование Styles

В старые времена, мы обернули font теги и прикладных background атрибуты для каждого HTML элемент, необходимый стиль.Это было, конечно, очень непрактично, и, таким образом CSS родился.CSS позволяет нам повторно использовать стили из одной части страницы, на another.

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

#nav {
   margin: 0;
   padding: 0;
   list-style: none;
}

#nav li {
   float: left;
}

#nav li a {
   display: block;
   padding: 5px 10px;
   background-color: blue;
}

Конечно бьет добавив float:left каждый элемент списка и display:block; padding:5px 10px; каждой ссылке.Эффективность, для победы!Просто глядя на это, вы можете увидеть HTML структуру, которая, как ожидается: 

<ul id="nav">
   <li><a href="/">Home</a></li>
   <li><a href="/products">Products</a></li>
   <li><a href="/contact">Contact Us</a></li>
</ul>

Сейчас, клиенту возвращается и говорит, как результат, наши HTML changes.__0 “Я хочу выпадающем меню появляются, когда пользователь нажимает на Дайте им легкий доступ к каждой из страниц« Продукты ».!”| 

<ul id="nav">
   <li><a href="/">Home</a></li>
   <li><a href="/products">Products</a>
      <ul>
         <li><a href="/products/shoes">Shoes</a></li>
         <li><a href="/products/jackets">Jackets</a></li> 
      </ul>
   </li>
   <li><a href="/contact">Contact Us</a></li>
</ul>

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

#nav ul {
   margin: 0;
   padding:0;
   list-style:none;
}

#nav li li {
   float: none;
}

#nav li li a {
   padding: 2px;
   background-color: red;
}

Проблема решена!Сортировать of.

Уменьшение глубины Applicability

Вероятно, наиболее распространенная проблема с CSS управляет специфику.Несколько правил CSS конкурировать на стиль конкретного элемента на странице.С нашим меню, наши первоначальные правила укладки элементов списка и ссылки в навигации и меню.Не good.

При добавлении более селекторов элемента, мы смогли увеличить специфичность и есть наш стиль меню верх над навигацией styles.

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

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

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

Comments are closed.