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

Сделал за последнее время:

Добавил в портфель около 48-и новых работ:
Сделал очень много всяких штук при работе над поддержкой сайтов.
Как бы это теперь в портфель запихнуть?

Заказать мне работу

13.05

Организация CSS. Думайте своей головой.

Комментарии (13) CSS

Когда таксопарк нанимает водителя, то им устраивают тест на знание города. Вопреки житейскому опыту, который подсказывает, что хороший таксист знает все зако пере и другие улки, отличается он от “таксиста обыкновенного” совсем не этим. Хороший таксист знает, что вовремя праздников, постов ГИБДД гораздо больше, чем в обычные дни. Знает, что в час пик лучше поехать не самой лучшей, но зато пустой дорогой, а ночью лучше разогнаться по длинной, но прямой и ровной дороге. Знает, что ночью, едя по главной дороге, лучше уступить идиоту несущемуся по второстепенной, чтобы там не говорили правила ПДД (а также знает много других разных штук, которые мне не успел поведать таксит Вадик). Если выжать из этого абзаца истину, то оно будет звучать почти как мантра: классный таксист знает, КОГДА и ГДЕ лучше применить свои знания, а где лучше о них вообще не вспоминать.

Свежевыжатая мантра верна по отношению ко всем аспектам интернет-деятельности (и не только). Например, три дня назад мне достался на редизайн сайт-визитка, состоящий из 3 типовых страниц и имеющий вот такую структуру css:

организация css

Структура была взята из вот этой статьи — http://vremenno.net/html-css/progressive-enhancement-with-css/ и хороша для крупных сложносочиненных порталах, над поддержкой которого работает очень много разных людей, чей труд должен быть как-то систематизирован. Поэтому в следующий раз перед тем как применить тот или иной популярный трюк, подумайте: а не будете ли вы похожи на того водителя который, пропускает среди бела дня, мчащихся по второстепенной дороге идиотов, только потому что более опытный водитель посчитал время суток как очевидный факт. Заодно можно подумать чем все это кончится.

Метки:CSS

Также интересно будет почитать про:
Крутой верстальщик понимает это….: Крутой верстальщик — это не тот, кто знает тыща и один способ реализации всплывающего меню, а тот кто понимает, что для порталов лучше использовать ООП-верстку, а для динамично развивающегося ресурса,...
2 способа расположить картинку сбоку от текста: Иногда необходимо разместить сопровождающую иллюстрацию сбоку от текста, так чтобы текст не обтекал ее. Например, вот для таких заметок:Я пользуюсь с равным успехом вот такими способами:Первый: ...
История о том, как происходит отмирание IE6: Согласно статистическим данным, на рынке браузеров доля "гвоздя в заднице" многих разработчиков (IE 6) составляет 18% - 22% (ru-зона, мировая статистика).Цифры статистики радуют. Но мало кто знает как проходит сползание...
Сделать лучше: Чтобы сделать хороший стартап, нужно взять какой-нибудь похожий на ваш проект и просто его улучшить. Так, по крайней мере думает большинство. И это же самое большинство думает, что "сделать лучше"...
Веб-дизайнер. Кто такой?: Миром правят недоразумения и шаблоны. Люди, например, хрен его знает, сколько лет считали, что солнце вращается вокруг земли, потому что всякие важные личности говорили, что так правильно, а остальным было...

1
pepelsbey (13.05.2009) #
Есть только одно оправдание такому — когда подобная структура поставлена на поток, привычна и не вызывает сложностей в процессе разработки. Это как включать поворотник — этим занимается не сознательная часть мозга, а большой палец руки.
В качестве примера — YACF, который используют в Яндексе. Для одной промо-странички он покажется безумно избыточным, а в контексте десятков проектов — вполне удобным.
2
Максим Покровский (13.05.2009) #
YACF идеальная иллюстрация к цитате:
для крупных сложносочиненных порталах, над поддержкой которого работает очень много разных людей, чей труд должен быть как-то систематизирован.
3
Vladimir (13.05.2009) #
Максим, на мой взгляд, здесь не всё однозначно.
Иногда у заказчиков есть нехорошая привычка лезть в CSS и менять что-то под себя (обычно цвета), но при этом они умудряются испортить и другие вещи. Если я знаю, что имею дело с таким заказчиком, то CSS, отвечающий за разметку, мне проще вынести в отдельный файл, а заказчику разрешать трогать только файл, отвечающий за цветовые аспекты.
Ну и мешать стили для разных отображений (print, screen, etc) тоже не очень хорошо.
А файлы типа layout.css и typo.css могут копироваться (иногда практически без изменений) из одного проекта в другой. Даже если работаешь над небольшим проектом.
Такая вот имха
4
Максим Покровский (13.05.2009) #
Разумеется не однозначно. Вторую часть заголовка, следует в полной мере применять и к этому посту. То что я не сказал, что мешать стили print, screen, и подобные, не надо, вовсе не означает что их надо сливать в один.
Я писал этот пост не как исчерпывающую инструкцию, а как общий принцип. Ибо сказано: понимание общего принципа, избавляет от запоминания тысячи частных фактов.
5
Kotelnikov (14.05.2009) #
ИМХО, для не сильно крупных проектов и пары CSS-ок хватит: универсальная резетилка и сопсно сами стили.
6
Максим Покровский (15.05.2009) #
универсальная резетилка
Никогда не понимал, чего все носятся с этим “универсальным ресетом”. Мне всегда хватало банальной “стерки”: *{margin:0; padding:0;}
7
Yvelious (15.05.2009) #
А как советует структурировать СSS сам автор?
p.s. Интересно что бы Вы сказали, если бы на переделку попался бы сайт, примерно как в проектах яндекса в продакшен версиях, где все импорты сливаются в один сss и чистятся сsstidy (либо другими програмульками) до такой степени, что код полностью теряет свою читабельность! Побежали бы искать рабочую версию?
И как поступать в таких случаях тем кто так делает? давать заказчику две версии проекта, рабочую и продакшен?
8
Vladimir (15.05.2009) #
Yvelious, я не автор, но тем не менее…
И как поступать в таких случаях тем кто так делает? давать заказчику две версии проекта, рабочую и продакшен?
Я делал так: на сервере хранится dev-версия CSS/JS/…, при первом обращении к ресурсу он чистится/сжимается/всё, что угодно, сохраняется в кэш и отдаётся браузеру. При последующих обращениях, если dev-версия не менялась, то отдается закэшированный вариант.
Если проверка на изменение является очень дорогой, то заводятся две версии сайта: development и production. Все тестируется на деве, потом деплоится на продакшн. В процессе деплоймента скрипты/ЦСС сжтмаются, чистятся и т.п.
В любом случае, у разработчика есть исходная версия файла (Столлману привет!).
А в случае с CSS очень легко провести “деобфускацию” – с ней даже Эклипс справится.
В случае с JS часто можно восстановить исходную версию файла (например, если использовался упаковщик Дина Эдвардса), разве что переменные будут неосмысленными.
9
Максим Покровский (16.05.2009) #
Я не люблю писать инструкции по применению с стиле “пиши то, а если тебе говорят это, то пиши вон то, а если…”, не потому что я такой злыдень, а потому что пользы никакой, а порой и вредно. Просто спрашиваю, что нужно от верстки и думаю как сделать лучше.
Что касается продакшен версий, то я их делаю только по требованию, то есть очень редко. В большинстве случаев, этим занимается программист проекта, то есть, читаем то что написал Владимир.
10
Yvelious (16.05.2009) #
Cпасибо за ответы!
p.s.
to Vladimir
Я делал так: на сервере хранится dev-версия CSS/JS/…, при первом обращении к ресурсу он чистится/сжимается/всё, что угодно, сохраняется в кэш и отдаётся браузеру. При последующих обращениях, если dev-версия не менялась, то отдается закэшированный вариант.
Если проверка на изменение является очень дорогой, то заводятся две версии сайта: development и production. Все тестируется на деве, потом деплоится на продакшн. В процессе деплоймента скрипты/ЦСС сжтмаются, чистятся и т.п.
А где можно подробно об этом почитать, дабы суметь реализовать? Я так понимаю это все чистка сss и js происходит на лету?
11
Vladimir (17.05.2009) #
Yvelious, даже не знаю, что посоветовать…
Чистка — да, на лету. Самый простой вариант — регулярными выражениями. Можно использовать всякие упаковщики/чистильшики. Google javascript copmression.
А проверка осуществляется по датам последнего изменения файла.
Хорошо почитать стандарт HTTP/1.1 и слать ETag/Last-Modified, и отвечать 304 Not Modified вместо отправления файла, если условия в If-Modified-Since/If-Match выполняются.
PS – Yvelious, соотечественник?
12
Yvelious (18.05.2009) #
to Vladimir
Да!
13
Anstak (22.05.2009) #
Вместо print.css лучше использовать внутри основного файла стилей @media print. Так как лишний файл стилей и лишнее HTTP соединение – не очень хорошо. А способ с @media не сильно отягащет страницу, я писал про это – http://forgottens.ru/?p=98