Действительно ли CSS верстка настолько деликатна, как кажется - PullRequest
3 голосов
/ 20 июля 2009

Я экспериментировал с шаблоном Majestic на freecsstemplates.org. Все идет нормально; Мне очень нравится внешний вид (или, если быть более точным, моему боссу очень нравится внешний вид).

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

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

Ответы [ 6 ]

6 голосов
/ 20 июля 2009

Честно говоря, я думаю, что эта раскладка была сделана довольно плохо. Ширина элементов, кажется, меняется в том месте, где они появляются на странице, и все они должны быть идеальными по пикселям, чтобы все было в центре.

По какой-то странной причине вся страница была помещена в элемент div, помеченный 'header' ... Для начала это не имеет большого смысла в семантике.

Однако, кажется, что если вы уменьшите ширину каждого элемента, у которого он есть, все уменьшится, и ничто не должно исчезнуть.

Я бы порекомендовал взглянуть на некоторые другие более разумные макеты, поскольку я не думаю, что это очень хороший способ достижения этого стиля - как вы сказали, он хрупкий. Вы пытались использовать расширение Firebug для Firefox? Он позволяет вам вносить изменения в css на лету и видеть, как это влияет на стиль, что поможет вам быстро учиться.

4 голосов
/ 20 июля 2009

CSS деликатный, но все же легче иметь дело, чем сайт, полный макетов таблиц. Книга Дэйва Ши, CSS ZenGarden, очень полезна для изучения CSS с точки зрения дизайнеров.

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

  • Google Chrome и его опция проверки элемента
  • Гаджет селектора - букмарклет, который поможет вам визуально определить селекторы, которые влияют на элемент
  • Подключаемый модуль Firefox для веб-разработчиков

Еще один совет - узнать о модификаторе! Important - он может пригодиться для принудительной установки определенного свойства, когда несколько CSS-селекторов влияют на один и тот же элемент.

3 голосов
/ 20 июля 2009

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

2 голосов
/ 20 июля 2009

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

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

Лично я стараюсь максимально использовать чистый CSS, но были времена, когда я не хотел ничего делать, кроме как ругаться, когда что-то великолепное в FireFox выглядит ужасно в IE. Это то место, где приходят хаки. Именно эти хаки и обходные пути, в первую очередь, делают CSS ломким.

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

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

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

Это мой 18 пенсов в любом случае:)

0 голосов
/ 21 июля 2009

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

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

Если вы в конечном итоге захотите использовать таблицы для всего, я могу предложить вам взглянуть на некоторые системы сетки, такие как http://960.gs/ и облегчить вашу боль.

Гидеон

0 голосов
/ 20 июля 2009

Я согласен, что большинство шаблонов css трудно читать, и разные люди могут по-разному подходить к одной и той же стратегии компоновки. Поскольку в css слишком много хаков / хитростей / приемов, то при попытке изменить существующий действительно очень хрупко, поскольку почти во всех случаях стили очень зависят друг от друга.

...