годный перевод из жежешечки http://felenka.livejournal.com/234769.html


Анонс CSS-фреймворка Oxymoron


Оригинал: http://oppugn.us/posts/1287608776.html
By Zed A. Shaw
Announcing The Oxymoron CSS Framework


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

Основной моей проблемой с CSS является то, что она никогда не делает то, что ей сказали. Если я говорю "сделай это столбцом, CSS", то получаю в ответ: "Ась? Нет, это должно полностью переметнуться влево, а ты пока отсоси, я люблю яблоки". На просьбу "заполни этим родительский div целиком" CSS отвечает: "Акулы любят маленькие иголки, конечно же нет, мы заполним только немножко сверху". Ну а фраза "эй, ЭТО ДОЛЖНО БЫТЬ В ЦЕНТРЕ" тут же вызовет: "Мои ботинки поставили в центр всех червяков, но твой заголовок останется слева"

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

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

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

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

Я собираюсь открыть этот секрет вам. Считайте это моей попыткой восстановить гармонию в мире.

Сетки (Grids)

Когда я читал фундаментальные книги о дизайне для печати, большинство из них использовали верстку по сетке. Сетки выглядят вполне устоявшейся частью визуального дизайна, и меня убивало, почему CSS настолько ужасно работает с ними. Понимаете, таблицы в XML могут выглядеть уродливо, особенно вложенные, но, по крайней мере, они выглядят как чертова сетка, которая делает именно то, что по идее она и должна делать. Никаких clear и float, и прочих идиотских костылей, чтобы сетка выглядела как сетка. Нужно просто создать таблицу.

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

Для создания нового мирового порядка все интерфейсные профаны объединились в лигу безтабличного дизайна, и на своем суматошном уровне криворукого дерьма назвали это "семантикой". Да-да, семантикой, потому что "clear" и "float" означают пиздецки много для каждого. На самом деле, они означают "дохера тегов div заменят дохера тегов table/tr/td". Какая это нахрен семантика, если она даже близко не означает то, что они имеют в виду?

Прочитав кучу разных книжек о разных трюках в CSS (какая же срань вся эта индустрия!) и используя различные фреймворки, например, 960.gs, я наткнулся на небольшой кусочек CSS, которая возвращает разумность в использовании верстки по сетке без использования таблиц. Используя эту часть CSS, я смог отказаться от различных сеточных фреймворков и заставить свою верстку делать именно те ебаные штуки, которые я хочу, чтоб она делала.

Итак, я представляю фреймворк Oxymoron CSS :

body {
width: 960px;
margin-left: auto;
margin-right: auto;
}

.oxymoron {
display:table;
width: 100%;
border-collapse:collapse;
border-spacing:10px;
}

.notarow {
display:table-row;
}

.notarow > div {
display:table-cell;
}



Это всё. Теперь вы можете оставить свой безтабличный XML/HTML хлам и одновременно использовать вменяемые и корректно выглядящие сетки, которые делают именно ту хуйню, которую вы сказали ей сделать. Если вы говорите, что ширина равна 300 пикселам, она будет равно 300 пикселам. Точка.

Oxymoron - это не таблица

Чтобы меня не окрестили еретиком, и чтобы сохранить за собой возомжность попасть в списки "гуру дизайна", я не стал называть это таблицами. И я использую название "notarow" для того, чтобы вы поняли: это не строка (not a row). Назвать видимый элемент в сетке "строкой" означает поцелуй смерти на челе вашего дизайна. Я также убрал любую необходимость что-либо называть столбцом. Давайте просто считать, что любой блок внутри другого блока-не-строки считается столбцом.

Конечно же, это не работает в некоторых браузерах-старых пердунах, но мне кагбе похрену.

Как это выглядит? В моих руках это выглядит как жопа енота, поджариваемая на солнышке в пустыне, но я уверен, что наверняка найдется кто-то, кто сделает из этого говна конфетку. Вы можете глянуть на мой следующий небольшой проект, основанный на Mongrel2, над которым я работал вчера: flmr. На этой странице нет нихрена функционального, она представляет простую верстку в попытке донести саму идею.

Как я сделал это? Я выбрал несколько случайных цветов. Я создал сетку с помощью Oxymoron. Я добавил всякой херни в качестве наполнения, используя тексты Lorem ipsum, потом - еще немного цветов, и продолжал "вылизывать", пока оно не начало выглядеть вполне прилично. Всё. Никаких clear, float, и никаких танцев с бубном вокруг background и z-index для блоков. Только чертова сетка, как и должно быть, хуле. Ебаная сетка. Никаких таблиц.

Наслаждайтесь.