Прежде всего хочу заявить, что я не против сетки в проектировании, я против сетки в реконструкции. Это должно конкретно относиться к методу YUI привязки имени класса к сетке. Вы можете взглянуть на следующий фрагмент кода:
Пример исходного кода
[www.downcodes.com] <div id="yui-main">
<div class="yui-b">
<div class="юи-г">
<div class="yui-u first"></div>
<div class="yui-u"></div>
</div>
</div>
</div>
Вы можете ясно видеть, что имя юи-у или юи-г здесь бессмысленно. Есть также новинки, связанные с производительностью. Я не знаю, есть ли в PPT, сопровождающем прочитанную всеми книгу "Реконструкция веб-сайта", есть предложение - "После удаления тегов внешнего вида со страницы редизайн существующего сайта и контента станет очень трудоемким ( На в то же время это намного дешевле). Если вы хотите изменить вывод сайта, вам нужно только изменить таблицу стилей, не меняя саму страницу. «Код, подобный приведенному выше, не может обеспечить разделение структуры, производительности и производительности. Изменения в поведении вызовут следующие проблемы:
При изменении производительности HTML необходимо переместить. Красивая модификация требует перемещения трех рабочих строк, что отнимает много человеческих ресурсов.
Появится пятое поле под названием «Первый».
Появится поле под названием «Ширина 180», которое на самом деле имеет ширину 240.
Будет макет под названием «четыре столбца», который на самом деле состоит из трех столбцов.
Будет слово «синий», которое на самом деле будет красным.
Они эквивалентны «left_box» и «right_box», которые сейчас популярны среди многих людей. После быстрой доработки они стали «right_box» слева. Разве это не равносильно искажению истины? Но на самом деле самое главное — это первый пункт. Отличается ли этот способ работы от нашего предыдущего способа работы с макетом таблицы? Если вы попросите сменить стиль, за вами пойдет вся компания (дизайн, страница, разработка, функциональное тестирование, мониторинг данных CE). Это очень неразумно.
Написав это, я оглянулся назад и изменил название, чтобы оно стало второй статьей о CSS в серии «Это будет революция». Если вышеизложенное неверно, позвольте мне показать вам фрагмент кода из новой версии проекта, который я недавно взял на себя:
Пример исходного кода
[www.downcodes.com] <div id="index_news" class="mode">
<h3 class="title">Новости общественного благосостояния</h3>
<div class="content">
<ул>
<li><a href="#">Заголовок новости, заголовок новости, заголовок новости, заголовок новости</a></li>
<li><a href="#">Заголовок новости, заголовок новости, заголовок новости, заголовок новости</a></li>
<li><a href="#">Название новости, название новости, название новости, название новости</a></li>
<li><a href="#">Заголовок новости, заголовок новости, заголовок новости, заголовок новости</a></li>
<li><a href="#">Название новости, название новости, название новости, название новости</a></li>
<li><a href="#">Название новости, название новости, название новости, название новости</a></li>
<li><a href="#">Название новости, название новости, название новости, название новости</a></li>
<li><a href="#">Заголовок новости, заголовок новости, заголовок новости, заголовок новости</a></li>
</ul>
</div>
<a class="more" href="#">Еще</a> </div>
Пример исходного кода
[www.downcodes.com] .режим{
положение: родственник;
плавать: влево;
размер шрифта: 12 пикселей;
}
.mode h3.title,
.mode h4.title{
цвет: #234C00;
отступ: 5 пикселей 10 пикселей;
размер шрифта: 14 пикселей;
}
.mode .more{
верх: 5 пикселей;
справа: 10 пикселей;
размер шрифта: 12 пикселей;
цвет: # 4282ab;
позиция: абсолютная;
}
.режим .содержание{
ясно: оба;
}
.mode .content:после {
содержание:"";
дисплей: блок;
высота: 0;
высота строки: 0;
ясно: оба;
видимость: скрыта;
}
#index_news.mode,
#index_bbs.mode,
#index_area.mode{
фон:url(small_gray_grid.png) повтор-y -400 пикселей внизу;
ширина: 200 пикселей;
поле: 5 пикселей 0 5 пикселей 5 пикселей;
}
#index_news.mode h3.title,
#index_bbs.mode h3.title{
фон:url(small_gray_grid.png) без повтора -200 пикселей сверху;
}
#index_news.mode .content,
#index_bbs.mode .content,
#index_area.mode .content{
фон: URL(small_gray_grid.png) без повтора -600 пикселей внизу;
дисплей: стол;
}
Вы можете увидеть преимущества модульного мышления:
Существующие модули можно использовать полуавтоматически, чтобы сэкономить время и усилия на разработку кода.
Его можно легко адаптировать к различным необычным потребностям любого менеджера по продукту и любого начальника.
Любые изменения производительности, описанные выше, не требуют участия разработчиков и функционального тестирования.
Мониторинг данных CE привязан к идентификатору, и нет необходимости перенастраивать интерфейс.
Каждый человек отвечает за быструю итеративную разработку одного модуля.
Также, что касается кода. Заголовок есть заголовок, а содержание есть содержание, вы никогда не будете искажать факты и давать себе пощечину.
У меня есть причуда. Мне нравится, что во время собеседований я всегда сначала проверяю XHTML интервьюера. Точно так же, как в прошлом, когда мастер нанимал ученика, способности и интеллект были второстепенными, а характер был главным приоритетом.
Я считаю, что XHTML — это сущность человека, CSS — это способ и отношение человека к ведению дел, а JS — это поведение и стиль человека к ведению дел. Разделение этих трех плюс некоторые аспекты SEO и взаимодействия человека с компьютером — это то, что мы называем реконструкцией веб-сайта, и это очень хороший человек. Раньше некоторые люди всегда думали, что CSS — это самый важный элемент веб-сайта. На самом деле, он естественным образом отражает взгляд на жизнь. Действительно, человеку трудно выжить в современном обществе без хорошего способа и отношения к ведению дел, но если способ и отношение к ведению дел слишком сфокусированы, он станет человеком, который хорошо умеет обманывать и действует бессовестно; .
Это то, что я всегда хотел сказать. С помощью CSS вы можете изменить порядок лево-право на порядок право-лево. Это волшебник на веб-странице. Вы не можете злоупотребить им, чтобы он стал человеком, который умеет обманывать и поступает бессовестно.