Как верстать красиво или чем плохи css-фреймворки

    Преимущества дивной вёрстки, семантичной разметки и разделения содержимого и дизайна описаны десятки, сотни раз, но все-равно находятся люди, которые не понимают самой идеи html и css, пишут в коде такие ужасные вещи, как
    <span style="color:blue">
    

    , когда хотят расскасить текст в синий цвет и искренне считают, что эта запись чем-то лучше, чем
    <font color="blue">
    

    , наивно веря в этом деле валидатору. А ведь правильный подход в написании html и css лежит на поверхности. Достаточно просто посмотреть историю развития этого языка, почитать статьи десятилетней давности и проанализировать. Я, при поддержке theshock, постаралась в этот статье упорядоченно и коротко изложить наше видение этого вопроса.



    Краткая историческая справка


    html создавался академиками, как средство описания данных для обмена по сети на базе языка SGML. Изначально никто не думал, что он будет использоваться для чего-то большего, чем обычный текст. Если посмотреть на большинство современных книг, то можно увидеть каким эти люди представляли себе будущий интернет. Из сорока тегов первого стандарта предназначением только трёх было изменения внешнего вида текста, остальные описывали что этот текст значит и не было возможности отобразить текст так, как вы хотели. Согласно стандарту некоторые теги могли делать текст курсивным или жирным, но такое поведение было только в рамках рекомендаций. Но по-другому развитие интернета видели разработчики Netscape. Они понимали, что сАйтИКи доЛжнЫ быТь пРивлЕКаТЕльНЫМи для того, чтобы в интернете сидели не только суровые профессора, но и блондинки.
    Netscape ввёл достаточно много тегов, которые изменяли внешний вид текста, но не несли за собой никакой логической нагрузки. В статьях тех лет можно прочитать, что идеологам html категорически не нравился такой вектор развития. На самом деле W3C вели себя очень по-старпёрски и не далекоглядно, а Netscape тем временем слишком увлёкся раскрашиванием. Обе компании впали в крайности и не могли прийти к консенсусу.
    Помощь пришла неожиданно в лице компании Microsoft. Она практически выкупила W3C, инвестировав в него кучу денег и человеческих ресурсов, удалила устаревшую ещё до выхода спецификацию html 3.0 и по-быстренькому выпустила более приближённую к жизни спецификацию html 3.2, которая принесла с собой css. IE 3 и NN 4 уже более-менее поддерживали возможности стилевого оформления.
    Ну, потом осёл быстро вытеснил Netscape и, как только занял монопольное положение, заснул на 6-й версии лет, эдак, десять назад. Потом возродился Netscape в лице Firefox, отвоевал значительную часть рынка у IE за счёт кучи преимуществ и, в итоге, всё пришло к тому, что мы сейчас имеем.
    Разработчикам браузеров на заметку: в лидеры выбивался тот браузер, который поддерживал стандарты лучше всего.

    А имеем мы сейчас вполне неплохую ситуацию. Хотя, перспективы css 3 очень радостные и приятные и мы с нетерпением ждём его прихода, даже то, что даёт шестой ослик вполне достаточно для красивого и расширяемого кода.

    Почему оформлять лучше в css, чем в html


    В истории очень показателен период сложного оформления сайтов при помощи одного html. Верстальщики тех годов использовали огромное количество тегов <font>, <b>, <i>, вложенных друг в друга таблиц для задания таких границ и разметки, как они хотели и много чего такого, что в итоге приводило к коду, который очень тяжело поддерживать. Очень интересный цикл статтей перевода «A List Apart» на html+css. Посмотрите пример оттуда:
    <!-- Dress left -->
    <table border="0" cellpadding="0" cellspacing="0">
    <!-- Your variable left margin -->
    <tr valign="top"><td width="15%" 
    bgcolor="#ffffcc"> </td>
    <td width="75%" bgcolor="#ffffcc" 
    valign="top">
    <!-- Your actual content -->
    

    Сейчас с современными возможностями этот участок выглядел бы так:
    <div id="content">
    

    Такое изящество принёс нам язык css. Так в чём же основной принцип подхода html+css? В html-файле мы описываем только логическую часть документа и ничего из оформления (да-да, это именно то, о чём мечтали те старые пердуны из W3C). Оформление ложится полностью на плечи css. Какие преимущества нам это принесёт:
    1. Как видно на примере выше, html-код теперь не загромождён, а логичен и понятен.
    2. Мы не повторяем описание внешнего вида каждый раз, когда встречается html-елемент. Например, если мы хотим заголовок сделать подчёркнутым и зелёным — достаточно описать это в css-файле, а не указывать соответствующие параметры каждый раз, когда встречается заголовок. Принцип «don't repeat yourself» показал себя очень эффективным не только в разметке, но и в программировании. На самом деле, очень тяжело найти противников этого принципа среди профессионалов.
    3. За счёт этого мы можем давать нашим пользователям возможность к оформлению своих сообщений, не выходя за рамки дизайна сайта (посмотрите на хабр и его оформление заголовкамив статьях). Автор просто указывает тег, например, <h2> там, где хочет выделить заголовок раздела статьи и он выделяется так, как лучше всего подходит для даного сайта.
    4. Вес html-файлов уменьшается очень значительно, а сss-файлы кешируются браузерами и загружаются только один раз, отчего у пользователей значительно ускоряется загрузка страниц, а на сервере уменьшается нагрузка.
    5. То, что мы вынесли всё оформление в css-файл позволяет с лёгкостью его изменять при необходимости. Достаточно в одном месте css-файла подправить значение и новый стиль применится ко всем html-страницам, которые его используют
    6. Можно полностью поменять оформление сайта просто подключив другой css-файл на сервере администратором или на клиенте пользователем (с помощью user-css). Например, как сделано на ibash.org.ru.
    7. Для устройств с маленьким экраном достаточно просто подключить другой файл стилей.

    Так почему же плоха запись <font color="red">? Не потому что так сказал валидатор, или написали умные мужчинки на Хабре. Причина отказа от этой записи содержится очень близко к идеологии html. А именно в том, что тут смешивается контент и дизайн! И предпочитаемая многими(валидная, но ужасная) запись <span style="color:red"> — это возврат к тому, от чего с ужасом бежали «A List Apart» 10 лет назад. Каждый раз, когда вы в html-файле задаёте оформление css или в названии класса содержится эпитет, который хоть как-то намекает на внешний вид элемента — вы что-то делаете не так. Просто подумайте, почему вы решили делать его таким. Если вы хотите сделать красный цвет, то, наверное, это обозначает ошибку и ему больше подойдёт <span class="error">. А если вы решили выделить жирным, то этот текст важнее, чем тот, что по-соседству и тут больше подойдёт <span class="important"> или даже <strong>. А html5 принесет еще серию актуальных логических тегов, которые помогут отказатся даже от классов.

    Верстаем по-порядку


    Так как же добится изящного кода? Надо полностью отделить содержимое от представления. Подумайте, какие логические блоки будут на странице и опишите их в html. Не описывайте то, как они будут выглядеть. Представте, что у вас будет два совершенно разных дизайна на базе одного и того же html, но разных css. Возьмем, к примеру, Хабр. Представим, что один дизайн будет очень похож на тот, что есть, а другой будет с навигацией слева, а правая боковая панель уйдёт вниз. И он будет в тёмных цветах, а не светлых, как сейчас. Начнём с html:
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>Habrahabr</title>
    	</head>
    	<body>
    		<header>
    			<img src="logo.png" alt="Habrahabr logo" />
    			<ul>
    				<li>Nutochka</li>
    				<li>выйти</li>
    				<li>настройки</li>
    				<li>личная почта</li>
    				<li>хабралента</li>
    				<li>избранное</li>
    			</ul>
    		</header>
    		<nav>
    			<ul>
    				<li><span>посты</span></li>
    				<li><a href="#">q&a</a></li>
    				<li><a href="#">блоги</a></li>
    				<li><a href="#">люди</a></li>
    				<li><a href="#">компании</a></li>
    			</ul>
    		</nav>
    		<section>
    			<article>
    				<h1><a href="#">{Article.title}</a></h1>
    				<div class="content">{Article.content}</div>
    				<div class="tags">{Article.tags}</div>
    				<div class="footer">{Article.footer}</div>
    			</article>
    		</section>
    		<aside>
    			<div class="best">
    				<ul>
    					<li>
    						<a href="#" class="blog">{Best.blogname}</a>
    						» <a href="#" class="article">{Best.article}</a>
    					</li>
    					<li>
    						<a href="#" class="blog">{Best.blogname}</a>
    						» <a href="#" class="article">{Best.article}</a>
    					</li>
    					<li>
    						<a href="#" class="blog">{Best.blogname}</a>
    						» <a href="#" class="article">{Best.article}</a>
    					</li>
    				</ul>
    			</div>
    			<!-- Other blocks -->
    		</aside>
    		<footer>
    			© 2006–2010 «Тематические Медиа»
    		</footer>
    	</body>
    </html>
    

    Такой html красив и понятен, легко поддерживается и обладает огромным количеством преимуществ. Следующим шагом будет описание css, но так, чтобы, при этом ни разу не поменять html.
    К сожалению, кое-какие причуды верстки не получится сделать без вмешательства в контент, но просто постарайтесь этого избежать, зная, что это категорически неправильно.

    css-фреймворки


    Последнее время некоторой(к счастью, небольшой) популярностью пользуются css-фреймворки. Например, 960 grid system
    <div class="container_24"> 
    	<h2> 
    		24 Column Grid
    	</h2> 
    	<div class="grid_24"> 
    		<p> 
    			950
    		</p> 
    	</div> 
    	<!-- end .grid_24 --> 
    	<div class="clear"></div> 
    	<div class="grid_1"> 
    		<p> 
    			30
    		</p> 
    	</div> 
    	<!-- end .grid_1 --> 
    	<div class="grid_23"> 
    		<p> 
    			910
    		</p> 
    	</div> 
    	<!-- end .grid_23 -->
    

    и blueprint:
        <div class="container showgrid"> 
          <h1>Blueprint Tests: grid.css</h1> 
          <div class="span-8"> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
          </div> 
          <div class="span-8"> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
          </div> 
          <div class="span-8 last"> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
          </div> 
          <div class="span-6 append-1"> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
          </div> 
          <div class="span-6 append-2"> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
          </div> 
    

    Основной проблемой есть то, что эти фреймоворки нарушают основной принцип разделения содержимого и представления и пропагандируют принципы, которые использовались до изобретения html3.2. Вместо внятного и очевидного описания, что каждый из блоков значит мы видим в html-коде то, как эти блоки выглядят и сколько места занимают. Все преимущества css, описанные выше, разрушаются при таком подходе. Css-фреймворки в том виде, котором они сейчас есть — зло и уход в прошлое.
    Какие есть альтернативы? Оставить html языком разметки, а дизайн оставить полностью на совести css, как оно и должно быть. Но как сделать фреймворк на CSS? Для этого можно воспользоватся одним из препроцессоров, которые сейчас набираюсь популярность и вводят в css много вещей, которых там очень не хватает — переменных, математических выражений, изящной вложенности. Например, LessCss и SASS. С их помощью можно организовывать красивые и удобные фреймворки и полностью на стороне css. Подход к созданию такого фреймворка можно почитать в зарубежной статье «Introducing the LESS CSS Grid».

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

    Similar posts

    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 174

      –21
      Иногда для проверки быстрее
      <span style="color:blue">
      , чем править сам файл стилей. Особенно это актуально в работе с Firebug.
        +20
        Вы продаете душу дьяволу.
          +30
          заведите себе в reset.css специальный класс debug

          debug {
            border: 1px solid red;
            background: blue;
          }
          


          И в файербаге, динамически подключайте его.
            +4
            Я в Драгонфлае просто меняю CSS тому элементу, с которым работаю, а затем копирую результат в CSS-файл.
              +22
              Лучше
              outline: 1px solid red;
              не будет добавляться пикселей в высоту/ширину (:
              0
              Не очень понимаю зачем нужно городить огород с дополнительным CSS файлом.
              Для тестирования в фаербаге (или любом другом дебагере), на мой взгляд, можно делать что больше нравится.

                +3
                Затем, что как и везде в разработке подход «сейчас быстренько для себя потестить напишу, а потом исправлю» ни к чему хорошему не приводит.
                0
                Советую:

                .debug-mode * { outline: 2px dotted red !important; }
                
                .debug-mode * * { outline: 2px dotted green !important; }
                
                .debug-mode * * * { outline: 2px dotted orange !important; }
                
                .debug-mode * * * * { outline: 2px dotted blue !important; }
                
                .debug-mode * * * * * { outline: 1px solid red !important; }
                
                .debug-mode * * * * * * { outline: 1px solid green !important; }
                
                .debug-mode * * * * * * * { outline: 1px solid orange !important; }
                
                .debug-mode * * * * * * * * { outline: 1px solid blue !important; }
                
                +1
                Для проверки чего? Не могу представить, почему такое написать быстрее, чем просто поправить файл стилей.
                Обычно если меняется, то меняется внешний вид какого-то логического блока на уже размеченной странице. Если вы вдруг решили какой-то текст раскрасить в синий и у вас для этого текста нету отдельного идентификатора, например, [class=note] — значит что-то с вашей версткой(по крайней мере с этим отдельным куском) не так.
                Стоит доразметить страницу, добавив тех логических тегов, которых не хватает и тогда для проверки будет быстрее править файл стилей. Особенно учитывая тот факт, что:
                1. Не придётся писать столько лишних символов
                2. Свойство применится сразу ко всем элементам и будет видно, как преображается страница.

                И чем лучше <span style="color:blue"> чем <font color="blue"> в данном случае?
                  +4
                  Если требуется быстро поменять стиль у ОДНОГО элемента или добавить новый для проверки отображения.
                  Конечно, то что предложил я — не панацея. Можно завести временный класс и подключать его к элементу…
                  +6
                    +4
                    В работе с Firebug достаточно ничего вообще не менять, а просто временно добавить новое CSS правило к выбраному html элементу.
                      0
                      Я бы сказал так: при работе с Firebug бывает удобно прописать стиль элемента, который автоматически заносится в style.
                      Поскольку это нужно только для того, чтобы подобрать нужные стили, и время жизни таких страниц — до обновления страницы, то данных подход вполне себя оправдывает.
                      Если же прописывать style в файлах — это уже темная сторона, тут безоговорочно.
                        0
                        Кажется, в статье обсуждается вёрстка, а не дебаг.
                        +24
                        Вы написали много текста. Девяносто процентов котогоро — преамбула к предпоследнему абзацу.

                        Сейчас мало кто сомневается, что тег font является признаком плохого кода. Гораздо больше заблуждений вызывают css-фреймворки. Даже использование SASS и Less не гарантирует уход от оных. Этому-то и нужно было и посвятить бòльшую часть статьи.
                          +9
                          Про это написано много раз, но для большинства <font color="*"> — это просто невалидный тег, вместо которого надо применять <span style="color:*">. Хорошо, что вы это понимаете, но на самом деле большинству до этого далеко. Не до следования стандартам, а до осознания того, почему эти стандарты утверждают именно так.

                          А мысль про css-фреймворки без всего, что шло до неё — недостаточно понятна. Тем более, что до сих пор есть очень много новичков, которые только входят в эту область, пусть для них будет коротенький ликбез, чтобы они понимали, в чём суть семантичного html.
                            0
                            Что-то меня терзают тайные сомнения по поводу того, что большинство новичков смогут сходу определить качество ликбеза. Обычно уровень качества у них = позиции в выдаче в поисковике.
                          0
                          Зато по качеству верстки можно смело судить о компетентности компании, ибо вариант с «историческими механизмами», довольно часто можно видеть в руках студентов однодневок, а проф тру верстка — солидным компаниям, которые экономят траффик и на верстке страницы тоже (как-то видел пример верстки, в котором было показано как сэкономить 20кб у страницы, что на 10 000 онлайн уже ощущается, что упоминается в пункте 4 преимуществ). Правда это не всегда так, но если уж наследили — то основательно. Также, качество верстки может быть использовании при рассмотрении кандидата на замещение вакансии. А почему нет?
                            +5
                            Когда я впервые столкнулся с css-фреймворками, я подумал, что это такой способ реализации табличной вёрстки div-ами. Закрыл сайт со статьёй и больше никогда не возвращался к таким фреймворкам.
                              0
                              Очевидно, что подобные фреймворки удобны чисто верстальщикам, которых не волнует, как будет натягиваться верстка. У них задача — скопировать картинку и перенести ее в верстку предварительно порезав где надо. А остальное — это уже не их ума дело. Им за это на фрилансе не доплачивают…
                                0
                                а не верстальщикам ли потом с этим работать?
                                  0
                                  1) Если брать фриланс — то нет.
                                  2) Во многих компаниях видел такую картину: Верстальщики верстуют и отдают программерам. А программеры плюются и переверстывают в процессе натяжки.

                                  Я не говорю что всегда так. Но бывает. Часто.
                                    0
                                    ну так надо или уволить недостаточно профессиональных верстальщиков, или научить их делать правильно ;)
                                      0
                                      =) А никто и не спорит, что с такими лучше не работать )))) Но сторону фриланса — не уволишь, а заказчи и понятия не имеет про то, а как же надо правильно верстать. Он только видит макет и результат. Со стороны компании — тут уже другой вопрос и другая философия )
                                        +1
                                        Если компания заказывает вёрстку фрилансеру, то в ней должен быть человек, который грамотно сформулирует верстальщику задание, чтоб тот подобными фреймворками не баловался. Если компанию такие вещи не колышут, то они сами себе злобные буратины.

                                        Если заказчик — один человек, которого вообще мало волнует как там верстальщик это сделает, то таки да, мучаться с такой вёрсткой будет следующий фрилансер. И если у него есть хоть капля мозгов, он заказчику объяснит что тут почём.
                                      0
                                      О да, на старой работе тоже не раз сталкивался с п. 2.
                                      Причем отдавали обычно действительно сверстанное не пойми для чего, подобно примеру с CSS фреймворками. Руководство искренне верило, что дело верстальщиков сверстать и показать что шаблон в браузере нормально выглядит, а остальное дело программистов.
                                      Вот и переверстывали потом после них почти все заново, благо время за натягивание дизайна оплачивалось.
                                        0
                                        Подтверждаю, история частая.
                                        Особенно когда с используемым программным framework'ом нельзя сделать некоторых вещей, которые сделаны в верстке.
                                          0
                                          Может просто надо было один раз обсудить с верстальщиками в каком именно виде нужна верстка?
                                          +1
                                          Вам рассказать, что такое причастие?
                                          >которых не волнует, как будет натягиваться верстка.
                                          Сужает круг всех верстальщиков дл верстальщиков «которых не волнует, как будет натягиваться верстка.»
                                            +1
                                            Если вы работаете с людьми, которые делают работу через жопу, то тут ничего не сделаешь.
                                            Верстальщик-фрилансер должен думать, что, как минимум, к нему больше не обратится этот клиент, если его команда программистов будет плеватся на верстку.
                                            Конечно, всегда есть быдлокодеры, которым насрать, как это всё поддерживать. Ну так это не значит, что best practice в оформлении html+css кода — это плохо.

                                            Пишите код так, как будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете.
                                          –1
                                          При грамотном подходе того кто натягивает вопросы верстки вообще не должны волновать.
                                          А уж использовался или нет фреймворк — подавно.
                                            +2
                                            Как так не должны волновать? Любой макет можно сверстать так, что хрен натянешь)

                                            Мне часто при верстке приходится думать, а как это сверстать так, чтобы программисты потом не парились (т.к. сам программист). А некоторые не думают, и тогда ппц.
                                              +1
                                              При грамотном подходе ...
                                              Вы делаете правильно, что думаете. Это целиком задача верстальщика. Программист программирует, а не переверстывает.

                                              Проблема в том, что обычно косяки верстки становятся заметны, когда в макет попадают реальные данные. Что ж, надо было указывать в задании дизайнеру не только сверстать по PSD один-в-один, но и всю возможную динамику данных. Либо отправлять на доработку (переверстывать опять же должен не программист).
                                              Как правило верстальщики и программисты работают в тесной связке, поэтому проблемы переверстывания программистом при натягивании возникать не должно.
                                                0
                                                Я всегда предвижу возможную динамику данных и задю уточняющие вопросы. Кстати, так и не понял, что вы имели в виду:
                                                При грамотном подходе того кто натягивает вопросы верстки вообще не должны волновать.
                                                «Натягивает» вроде программист. Какой бы ни был грамотный программист, если ему дали хреновую верстку, он не сможет ее натянуть.
                                                  0
                                                  Имел в виду, что программист не должен писать (или редактировать) самостоятельно ни одного тега в коде и уж тем более лазить в стили. Все это (html + css) уже должно быть готово и поправлено при необходимости. Программист вставляет вывод данных и только. Я бы еще заменил слово «натягивает» на «одевает», т.к. оно лучше отражает описываемый мной процесс.

                                                  Чтоб не было намеков на капитана, напомню, что я комментировал вот это:
                                                  Очевидно, что подобные фреймворки удобны чисто верстальщикам, которых не волнует, как будет натягиваться верстка.
                                                  И суть комментария в том, что фреймворки могут использоваться не только криворукими верстальщиками, но и вполне вменяемыми, которые их используют как тщательно подобранный и значительно упрощающий жизнь инструмент.
                                                  0
                                                  А если вы имели в виду, что грамотным должен быть верстальщик, то это и капитану известно.
                                              0
                                              В моей терминологии эти люди называются нарезчиками, ибо в до-CSS-ные времена процесс назывался «нарезка». Кто просто картинку в HTML режет, тот занимается нарезкой и зовётся нарежчиком. А кто делает HTML вёрстку согласно ТЗ, а потом лепит к нему CSS исходя из картинки от дизайнера, тот занимается вёрсткой и зовётся верстальщиком.

                                              Это мой IMHO, вот.
                                            +7
                                            Почему вас комбинированный вариант не устраивает:

                                            <div class="best span-8 last"></div>
                                            


                                            Все равно в сложной верстке часто приходится блоки добавлять только ради дизайна или поддержки разнообразных браузеров. Простой пример: в тексте надо сделать стилями выравнивание картинок по правому и левому краю, как вы тут содержание от представления отделите? Или многоколоночная верстка, от 3 колонок.
                                              0
                                              Классные у тебя запятые с начала строки.
                                                0
                                                А, главное, в тему! Или вы считаете, что не отделить запятую от кода (который на самом деле является частью предложения) было бы правильнее?)
                                                  +2
                                                  Правильнее было бы перестроить текст таким образом, чтобы совсем избавиться от этих запятых. Такая верстка немного портит впечатление от статьи в блоге о верстке.
                                                    0
                                                    Согласна, правильнее было бы эти два участка кода сделать inline, а не block, но вручную подсвечивать не хочу, а хабр не представляет таких возможностей)
                                                +3
                                                CSS-фреймворки — отличный инструмент в грамотных руках, и я не вижу в них ничего плохого в их использовании. Если верстальщик понимает устройство фреймворка, у него не возникнет трудностей с версткой и дальнейшей натяжкой. А при работе с типовыми макетами, время, необходимое для их верстки, существенно сократиться.
                                                  +1
                                                  В них нет ничего плохого, если процесс идет просто: дизайн — верстка — сведение в шаблоны — завершение проекта.
                                                  Но как только появляется интерактивность в процессе разработки, они становятся злом.
                                                  Если вдруг «Необходимо сделать этот блок вдвое шире» — вам придется править и css файл и файл разметки.

                                                  Реальность такова, что все меняется — и сайты тоже. Если при помощи семантики возведен слой абстракции между содержанием и оформлением, то любые изменения проводить проще.
                                                    +2
                                                    Я не призываю использовать css-фреймворки везде, просто не нужно их пропагандировать как что-то плохое. Фреймворк — инструмент, решающий определенную задачу — предоставить верстальщику готовую структуру страницы.
                                                      0
                                                      Я так и не понял, почему css-фреймворк становится злом. Если нужно сделать блок вдвое шире, то вместо класса span-5 я напишу span-10 (в blueprint).
                                                      И потом, не забывайте, что css-фреймворк нужен по сути только для базовой сетки, а поверх вы натягиваете свои стили. Получается двухуровневая структура: сетка на основе фреймворка, которую можно удобно и безболезненно перестраивать и ваши стили поверх нее.
                                                      Как здание: несущая опора и облицовка.
                                                        0
                                                        Класс вы меняете в HTML, а должны менять CSS.
                                                        Обычно приходит ворох заданий на изменение: поменять ширину, сделать шрифт поменьше, чуть-чуть изменить цвет. И тут вам уже приходится «ползать» по двум совершенно разным файлам.

                                                        Я был бы только рад, если бы можно было писать как-то так:

                                                        #content extends .col10{
                                                        /* css rules */
                                                        }

                                                        Вот в этом случае css фреймворки не были бы злом.
                                                          0
                                                          можно)
                                                            0
                                                            LessCSS:
                                                            .ad-block {
                                                            	.information-block;
                                                            	.corners(4px);
                                                            	.box-shadow(#c00);
                                                            
                                                            	color: red;
                                                            	text-decoration: blink;
                                                            }
                                                            

                                                            Пользуюсь им и ни грамма не жалею.
                                                              +1
                                                              Растолкуйте про LessCSS: чем компилится исходный css-код? Это, я понимаю, гем для руби? В руби я не бум-бум, может ли использовать LessCSS php-шник или потоновод?
                                                                +1
                                                                Сижу сейчас, читаю доки ;) Похоже, за пару часов можно прикрутить к Ant, а значит можно будет спокойно использовать на любом сайте: хоть PHP, хоть Питон, хоть голый HTML.
                                                                  0
                                                                  а его (Ant) надо будет запускать при каждом обновлении таблицы стилей?
                                                                    0
                                                                    Я пользуюсь Eclipse, там встроен Ant. Соответственно можно поставить, например, автоматический запуск при каждом сохранении .less файла )
                                                                    Что еще нужно?
                                                                      0
                                                                      ну, в таком случае — да)
                                                                  +1
                                                                  использую в KohanaPHP без проблем. Писал свой плагин на базе LessPHP. Вот у меня оно выглядит так:
                                                                  return array (
                                                                      'files' => array (
                                                                          APPPATH . 'files/admin.less'  => PUBLICPATH . 'files/admin.css',
                                                                          APPPATH . 'files/styles.less' => PUBLICPATH . 'files/styles.css'
                                                                      )
                                                                  );
                                                                  
                                                                  0
                                                                  Гугольнул, нашел питоновский компилер:
                                                                  code.google.com/p/lesscss-python/
                                                                  Буду разбираться.
                                                        0
                                                        Костыли тоже инструмент. И, кроме шуток, полезный инструмент. Однажды мне пришлось ими пользоваться. И, тем не менее, второго раза мне не хочется, почему-то.
                                                        +4
                                                        Мне, например, не охото заморачиваться на вёрстку и нет возможности нанять профессионального верстальщика. Поэтому лишь CSS фреймворки и спасают — можно быстро сделать вёрстку и начать кодить… Но в целом, я вас понимаю :) Но реальность другая.
                                                          +2
                                                          это ваша реальность другая. мне вот, например, тоже нету охоты заморачиватся на вёрстку, не люблю я её, лучше дайте пописать php и javascript. Именно потому я не ставлю сам себе палки в колёса и не использую css-фреймворки.
                                                            +2
                                                            … И тратите в 2 раза больше времени на то что не любите. Зато код чоткий.
                                                            Ухудшение «семантичности» — приемлемая плата за быструю верстку в небольших проектах.
                                                              +1
                                                              я трачу в два раза больше времени в первый день и в два раза меньше каждый последующий.
                                                        • UFO just landed and posted this here
                                                            –1
                                                            Думаю стоит смотреть на HTML более широко. Большое количество сайтов делается дилетантами, без всяких там северных скриптов (php, perl) и бла бла бла, что и дало интернету такую популярность. Им плевать какая там у кого нагрузка они даже не забивают себе этим голову. Задача передать информацию в массы, а не показать логичный код. Конечно же стоит согласиться с автором, что в серьезных проектах над которыми работают профессионалы этого допускать не стоит, но для блондинок <fоnt color=«red»> тру, для создания хомяка не стоит читать историю W3C и вникать в тонкости разработки, надо просто сделать страничку и html со своими </fоnt>, </б>, </и>. Это как ехать на машине на работу и участвовать в серьезных гонках, гонщик всегда будет считать обычного водителя лохом, но обывателей больше.

                                                            ИМХО ))
                                                              +1
                                                              Нет. У всех обывателей есть права на управление ТС. А вот те, у кого их нет, и создают проблемы всем остальным.
                                                              +2
                                                              Честно я не понимаю кому удобен вариант с гридами. Я попытался сделать один сайт на нем и решил больше не связываться. По моему ничем не лучше чем старая табличная верстка.

                                                              По поводу чистоты кода. Не получается. Бедность работы с размерами и привязкой, различные баги или расхождения в браузерах ( и нет хотя бы одного идеального :) — все фигачат иногда такое что заплатки приходиться вешать или переверстывать ) порождают чудовища контейнеров, да и то какое-нить выравнивание по нижнему краю и сверху ложиться js…

                                                              Остается одна надежда на то что веб активно проникает туда куда его не просили — на десктоп, в системы управления. И будет нам счастье когда-нить :)
                                                                0
                                                                Фреймворки, имхо, бывают удобны, когда надо сначала быстро раскидать элементы. А потом все равно надо переверстывать в приличный вид.
                                                                  –1
                                                                  Категоричный пиар div-верски приводит к тому, что дивы используют там где нужно и не нужно, а потом нужно в чужом css чтото поменять, даже Firebug иногда не помогает, так как еще любят использовать всякие хаки и извраты.
                                                                    –3
                                                                    Оффтопик.
                                                                      +2
                                                                      Дивы нужно использовать везде где семантически не подходят другие элементы.
                                                                      +4
                                                                      У меня бывали случаи, когда необходимо было для множества элементов указать различные размеры ширины: 110px, 52px, 75px, 20px, 66px, 45px и т.д. Причем они причем принадлежали одному классу и отличались только размером.

                                                                      Как бы я не хотел следовать стандартам, но я предпочел использовать более понятную запись для моих элементов style=«width: Npx».

                                                                      Другое бы выглядело ужаснее, множество классов со странными именами (а как столько имен придумать?), содержащие только ширину.

                                                                      Для стороннего разработчика мне кажется было бы приятнее наблюдать размер именно в html коде, как я и сделал.

                                                                        +3
                                                                        Согласен. Реальный пример: верстка результатов голосования (как на хабре). Имхо нет смысла не использовать динамический width у полосок.
                                                                          0
                                                                          Реальный пример: верстка результатов голосования

                                                                          Категорически согласна. Отличный пример, когда style=«width:NN%;» подходит лучше, чем что-либо.
                                                                          0
                                                                          У меня бывали случаи, когда необходимо было для множества элементов указать различные размеры ширины: 110px, 52px, 75px, 20px, 66px, 45px и т.д. Причем они причем принадлежали одному классу и отличались только размером.


                                                                          А почему так? Наверняка, была какая-то причина, почему надо было сделать именно так. Вот можете вы её назвать? И почему бы не вынести это название в класс? Зато следующему программисту будет удобнее — он поймёт, почему вы так сделали по названию класса, а не будет ламать себе голову, почему тут у вас этот блок 20 пикселей, а там — 110.
                                                                            0
                                                                            кстати, именно эту идею освещает «Рефакторинг» Фаулера. там, правда, это написано про методы в языках програмирования, но что причина, что следствие — те же.
                                                                            0
                                                                            По идее, вынесение стилей в css, это как вынесение повторяющегося кода в отдельный метод.

                                                                            Но когда стиль маленький(только ширина, например) и используется только 1 раз, только в этом месте, и никогда и нигде больше, смысла выносить его в общий css, наверное, нету (как вариант). Единственный смысл, что этот кусочек css не закешируется, но при минимальных стилях (только ширина например) это, наверное, не столь критично.
                                                                            И иногда, стиль в html, маленький стиль, экономит время, не надо лазить по файлам со стилями, и искать конкретный стиль в этом файле.

                                                                            А вот если это стиль h2, который должен быть на все сайте один и тот же, то тогда надо конечно выносить.

                                                                            В общем на мой взгляд, как нельзя везде использовать только дивы, так и не стоит все и всегда выносить в css.
                                                                            +10
                                                                            В html-файле мы описываем только логическую часть документа и ничего из оформления (да-да, это именно то, о чём мечтали те старые пердуны из W3C). Оформление ложится полностью на плечи css.

                                                                            К сожалению, это неправда. Зачастую, чтобы сделать более-менее вменяемое оформление средствами одного только CSS, приходится городить бессмысленные div'ы и span'ы. Виной тому недостаточная мощность CSS в смысле задания относительного расположения элементов страницы. Кроме того, приходится использовать подмножество фич, имеющихся в CSS, т.к. браузеры поддерживают не всё или некорректно. Пусть те, у кого не было подобного рода проблем, скажем, с выстраиванием картинок с подписями в ряд, бросят в меня камень.
                                                                              +3
                                                                              Поддерживаю.

                                                                              Для простого случая, приведенного в статье («Представим, что один дизайн будет очень похож на тот, что есть, а другой будет с навигацией слева, а правая боковая панель уйдёт вниз. И он будет в тёмных цветах, а не светлых, как сейчас.») конечно работает.
                                                                              Но в большинстве случаев для смены дизайна приходится как минимум добавлять дополнительные элементы. Т.е. получаем тоже, что в случае со «span-8» (возможно в гораздо меньшей степени, но все же).

                                                                              Пусть даже дополнительные блоки, порожденные требованиями нового варианта оформления, не влияют на отображение старых, все равно получаем неприятность в виде наличия лишних элементов.
                                                                                0
                                                                                Т.е. получаем тоже, что в случае со «span-8» (возможно в гораздо меньшей степени, но все же).

                                                                                Согласна, в реальной ситуации часто бывает, что приходится вносить незначительные правки в контект, потому я и написала об этом в статье:

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

                                                                                Но всё-равно, я считаю, что раз мы поставили маленькую кляксочку в тетради — это еще не причина заливать чернилом весь листок.
                                                                              • UFO just landed and posted this here
                                                                                  0
                                                                                  Семантически это не таблица, а галерея картинок.
                                                                                  По вашей логике любые данные так или иначе можно подвести под таблицу.
                                                                                  • UFO just landed and posted this here
                                                                                      0
                                                                                      Это ваше право, но таблицы предназначены для табличных данных, в вашем примере табличных данных нет.
                                                                                      Плюс подумайте о программистах которые будут натягивать вашу верстку, куда проще написать
                                                                                      for ($i=0;$i<$n;$i++) {
                                                                                      $result.='<div class='image-item'></div>';
                                                                                      }

                                                                                      чем парсить нелинейный табличных код

                                                                                      <table>
                                                                                      <tr><td><img /></td><td><img /></td>
                                                                                      <tr><td><img /></td><td><img /></td>
                                                                                      </table>

                                                                                      А если не 2 столбца а 3 нужно будет сделать? всю функцию менять.
                                                                                        +2
                                                                                        Более того, такую галерею было бы удобно делать без определенного количества по ширине в случае с резиновой вёрсткой.
                                                                                        То есть, на телефоне это будет одна колонка в ширину, на нетбуке — 3 колонки, а на экране шириной в 2000 пикселей — 10 колонок.
                                                                                        • UFO just landed and posted this here
                                                                                            0
                                                                                            Див — это такой елемент, семантика которого задаётся через класс/айди.

                                                                                            С помощью википедии вывел свое теоретическое видение о том, что такое таблица.

                                                                                            en.wikipedia.org/wiki/Table_%28database%29:
                                                                                            table is a set of data elements (values) that is organized using a model of vertical columns (which are identified by their name) and horizontal rows. A table has a specified number of columns, but can have any number of rows. Each row is identified by the values appearing in a particular column subset which has been identified as a candidate key.


                                                                                            en.wikipedia.org/wiki/Table_%28information%29
                                                                                            A table consists of an ordered arrangement of rows and columns. This is a simplified description of the most basic kind of table. Certain considerations follow from this simplified description:


                                                                                            То есть таблица — это когда все столбцы объедены общей чертой (например, это может быть столбец «размер», или столбец «цвет»), а каждая ячейка стобца — это значение для соответсвующей строки.

                                                                                            Почему таблица не подходит для галереи изображений? потому что в галерее изображений нету rows и columns по идеологии (разве что, если один столбец — это картинка, другой — описание).
                                                                                            • UFO just landed and posted this here
                                                                                                0
                                                                                                Возможно вы правы, но что вы подразумеваете под табличными данными? Желательно привести не пример, а обобщенное определение в вашем понимании.

                                                                                                Хотя вы спрашивали не меня, но, тем не менее, я ответил именно, что подразумеваю под табличными данными. не утверждаю, что это общепринятое определение, но, думаю, большинство имеют именно это ввиду.
                                                                                              • UFO just landed and posted this here
                                                                                                  0
                                                                                                  более того, лично я отказался от таблиц, потому что с ними намного тяжелее добится вменяемой кроссбраузерности.
                                                                                                    0
                                                                                                    вечно один пиксель где-то вылезет.
                                                                                                    • UFO just landed and posted this here
                                                                                                        0
                                                                                                        ну да, мы ж про оформление щас))
                                                                                                0
                                                                                                Я не знаю как объяснить, но когда видишь контент, то сразу становится понятно что из контента таблица а что нет, могу сказать что таблицы в хорошей для оформления не используются вообще, для контента достаточно редко, именно для данных которые в виде таблицы (подобие таблиц экселя), из графики в таблицах за исключением очень редких случаев могут быть только маленькие иконки.
                                                                                                  0
                                                                                                  «в хорошей верстке»
                                                                                          0
                                                                                          Нет, картинки — это не табличные данные. Например, список юзеров (логин, дата регистрации, чего-ещё-придумаете) можно расположить в виде таблицы (с заголовком и данными). Или оборотная ведомость — это тоже таблица (заголовок, данные, группировка по товарам, датам и т.п и футер). А вот картинки с подписями — не таблица ни разу. Особенно, когда неизвестно заранее, сколько картинок нужно разместить в одном ряду. Тем более, что картинки с подписями — это всего лишь пример. Могу и другие привести. Скажем, blockquote с нарисованными аккуратными кавычками-ёлочками слева вверху и справа внизу.
                                                                                        –3
                                                                                          +7
                                                                                          Спасибо, Кэп.
                                                                                          +6
                                                                                          Когда я вставляю 10.000-й div со своим уникальным именем, чтоб он не пересекся ни с одним другим дивом проекта, не унаследовал ничего сверху, и ничего не покорежил снизу, начинаю сомневаться, что это прям такая гениальная методика. Да, в целом статья правильная, но уж больно радужно описывает ситуацию в мире верстки.

                                                                                          Ок, если у нас проект на 3 страницы все пучком — «error», «menu», etc… А если на много страниц то мы получаем имена вида: «film-details-unknown-device-error-5» и прописываем им аж одно свойство — color:red. И только не надо мне рассказывать про наследование / каскадирование, гораздо проще прописать то, что тебе надо и быть спокойным за судьбу дива, чем обнулять паддинги, марджины, убирать обводочки и пр., то, что осталось в наследство от изначального «error».
                                                                                          • UFO just landed and posted this here
                                                                                              +2
                                                                                              никто не мешает пойти по пути Google и Yandex, и имена такие хранить только на сервере, а клиенту отдавать сжатые стили с именами вида .fde
                                                                                            +3
                                                                                            Как верстать красиво или чем плохи css-фреймворки
                                                                                            Название какое-то бессмысленное получается, если честно. Прочитав его, я сделал вывод, что использование фреймворков = некрасивая верстка. Прочитав текст и проявив немного дедукции скорректировал: использование фреймворков = верстальщик с кривыми руками.

                                                                                            А это не так.

                                                                                            Указанные css-фреймворки, как и всё другое, обладают своими плюсами и минусами. Красивая, более простая и страндартизированная верстка — это как раз одно из преимуществ фреймворков. Помимо этого верстальщик как правило получает reset, улучшение типографики, оптимизацию для печати, оформление форм и их элементов управления и многое другое.
                                                                                            Да, в сеточных фреймворках, появляется частичное смешение содержимого и представления. Но это на совести того, кто выбирает подходящее для решения конкретной задачи средство разработки. Если минусы фреймворка не критичны, верстальщик экономит кучу времени и получает более логичный результат. Понятное дело, что фремворк не стоит брать на борт, когда в первую очередь важны производительность и возможность координальной смены оформления.

                                                                                            Закончу тем, что любой фреймворк является велосипедом. Каждый сам выбирает использовать его или нет.
                                                                                              +3
                                                                                              автора статьи, имхо, больше волнует семантика в веб, нежели использование фреймворков. По сути у каждого опытного верстальщика уже есть какое-то подобие фреймворка для себя, набора инструментов с которого он начинает каждый проект. И не обязательно это будут подобные сетки вроде span-8… Хотя и тут момент спорный — хороший дизайн всегда привязан к модульной сетке, почему бы не реализовать ее в верстке?
                                                                                                0
                                                                                                в те далёкие времена был только хтмл. потом появился цсс. потом у тебя по всей видимости провал в памяти — ты до сих пор живёшь в мире 10-летней давности. а он изменился. если раньше всё делали на чистом хтмл, то сейчас повсеместно применяют шаблонизаторы — они обладают куда большими возможностями повторного использования кода. использование их на клиенте позволяет так же добиться минимального размера страницы. но при этом не ограничивает нас мистическими блоками :before и :after, а позволяет создавать реальные блоки.

                                                                                                представим на секунду что мы потеряли css где-то на рубеже веков, а остался у нас только xslt. по пунктам:
                                                                                                1. исходный xml не загромождён классами — нету никаких [div class=«important»]. вместо них простые и логичные [habr:important].
                                                                                                2. мы не повторяем описание оформления несколько раз — для каждого тэга мы пишем шаблон только один раз.
                                                                                                3. пользователь также может использовать любые разрешённые нами тэги. например [habr:cut]. и ему не придётся заботиться о том, чтобы вставить дополнительную вмл-ину для ие, чтобы были скруглённые уголки
                                                                                                4. вёрстка получается минимально возможной, а шаблоны кэшируются.
                                                                                                5. ссылка на набор шаблонов прописывается в одном месте и также можно один набор менять на другой лёгким движением руки.
                                                                                                6. в принципе тоже реализуемо, но через задницу
                                                                                                7. то же что и 5

                                                                                                так чем же плоха запись Так почему же плоха запись [font color=«red»]? да ничем. единственный минус — при отладке придётся копаться в каше презентационных тэгов. но xbl изящно решает и эту проблему. помимо кучи других, типа инициализации по мере загрузки элементов, расширения дом-модери и прочих. к сожалению работает он только в мозилле и остальные как-то не торопятся его реализовывать. все заняты прикручиванием к хтмл тэгов header и aside, а также нагромождением css в духе css-layout.
                                                                                                  +4
                                                                                                  Мне казалось мы здесь про реальный мир говорим, а не про твои XML-фантазии
                                                                                                    0
                                                                                                    тебя я тоже выдумал
                                                                                                      +2
                                                                                                      чёрт, ребята, он нас раскрыл.
                                                                                                  +3
                                                                                                  сАйтИКи доЛжнЫ быТь пРивлЕКаТЕльНЫМи
                                                                                                  Тут тоже отдельный класс для каждого символа? Если «это» напишется только раз только на одной странице? Статья классная, но так категорично я бы не утверждал.
                                                                                                    –2
                                                                                                    Просто надо пользоваться compass-style.org/docs/ и проблем не будет.
                                                                                                    В Compass нет перечисленных здесь проблем + он настолько удобен и гибок, что попробовав 1 раз уже никогда не откажешься от него.
                                                                                                      +1
                                                                                                      спасибо, мне, как начинающему верстальщику, очень не хватало подобного разьяснения, что хорошо, что плохо и почему. А комментарии некоторые вообще бесценны.
                                                                                                        +5
                                                                                                        Всё правильно, двумя руками «за».
                                                                                                        Мои 5 копеек про то, почему CSS-фреймворки — это плохая идея: pepelsbey.net/2008/04/css-frameworks/
                                                                                                          +2
                                                                                                          Цсс-фреймворки(в частности гридовые) — отличная альтернатива табличной верстке. Да, они и отступают от принципов семантичной верстки, да, навязывают свою систему имен для класснеймов, но они позволяют быстро и однозначно оформить документ.
                                                                                                            0
                                                                                                            Цсс-фреймворк хорош только в том случае, если ты сам его написал под свои нужды.
                                                                                                              –5
                                                                                                              Ааа, как так можно?

                                                                                                              На и так банально простую вещь использовать фреймоврки.
                                                                                                              Далее пойдет
                                                                                                              xhml framework, html4.0 framework.

                                                                                                              Попахивает бредом маненько.
                                                                                                                +7
                                                                                                                Не следует искать семантику там, где ее нет.

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

                                                                                                                Придумывать сетке сайта семантичные названия — занятие неблагодарное. Я говорю о сайтах больших, сложных. К примеру — cnn.com/
                                                                                                                960.gs — это фреймворк для сетки сайта.

                                                                                                                Не стоит нападать на инструменты — если не знаете для чего они были сделаны.
                                                                                                                  +1
                                                                                                                  +1000

                                                                                                                  причем сетка в идеале находится в отдельном темплейте (темплейтах) и легко правится, а стили контентных блоков не привязаны к сетке (т.е. блок можно перенести из сайдбара в контент и наоборот без потерь)
                                                                                                                  +1
                                                                                                                  А где же в Вашем примере семантика?
                                                                                                                  Давайте до конца:
                                                                                                                  1. Логотип так ли нужен в виде img?
                                                                                                                  2.
                                                                                                                  <li>Nutochka</li><li>выйти</li>
                                                                                                                  — смешали теплое с мягким
                                                                                                                  3.
                                                                                                                  <nav><ul>
                                                                                                                  — дешевле
                                                                                                                  <ul id='nav'>

                                                                                                                  4.
                                                                                                                  <li><span>посты</span></li>
                                                                                                                  — зря ссылку убрали
                                                                                                                    0
                                                                                                                    Говорю, как автор фреймворка ( https://launchpad.net/invisible ): они хороши для прототипов. Если клиент хочет посмотреть, как будет выглядеть сайдбар шириной 30%, а контент 70%, а что будет, если 25% и 75%, а что будет, если сайдбар слева, а не справа… Просто поменял пару классов в HTML и все.

                                                                                                                    lessframework.com хорош не только для этого, кстати.
                                                                                                                      –1
                                                                                                                      Подскажите как воспользоваться штуками типа LessCss и SASS тому кто знаком лишь с PHP? Нашел https://github.com/pornel/CSS-Preprocessor — но не поддерживает вложенные конструкции :(
                                                                                                                        0
                                                                                                                        Покажите пожалуйста пример проекта где css на 100% отделен от html. Я видел только один пример, и там за годы работы и «динамичности» нарос такой слой «старых» стилей, что разобраться в этом без толстого мануала было очень сложно.
                                                                                                                          +2
                                                                                                                          CSS Zen Garden :)
                                                                                                                            –1
                                                                                                                            это теория, я о реальном, коммерческом проекте, который сделан для юзеров а не как eye-candy или proof of concept
                                                                                                                          0
                                                                                                                          Пока только разбираюсь с семантикой html5, но, на мой взгляд, разметка секции «article» и «aside» получились немного не так, как задумывалось в спецификации html5. В секции «article» вполне можно использовать элемент «footer», вместо которого используется велосипед на "{Article.tags}{Article.footer}". В секции «aside» идут вполне законченные блоки, которые подразумевают из себя «nav», ибо блоки содержат в себе набор ссылок, вместо чего используется "" (и почему не id=«best»?).
                                                                                                                            +4
                                                                                                                            Когда можно будет сверстать две колонки, не вырвав себе на жопе все волосы, то тогда, и только тогда можно начинать говорить о вреде фреймворков и какой-то там семантике.
                                                                                                                              0
                                                                                                                              Какое отношение колонки имеют к семантике? Это чисто визуальный трюк.
                                                                                                                                +4
                                                                                                                                Прямое. То, что их невозможно сделать, не наворотив два-три уровня ненужных div'ов — как раз то, на что жалуется автор, говоря, что фреймворки — плохо.
                                                                                                                                  0
                                                                                                                                  Автор, насколько я понял, жалуется на то, что авторы не используют уже имеющиеся элементы и ради «сеточки» крутят дополнительные уровни вложенности с совершенно абстрактными именами классов.

                                                                                                                                  Семантика — это не «верстать всё на списках», это когда человек понимает что он делает: использование элементов по назначению, правильное и осмысленное именование, минимум экстра-разметки. Даже упомянутый сегодня CSS Zen Garden оставляет в конце шаблона пучок элементов для оформительских целей. Но не просто «элементов», а именно стерильных: <div> и <span> — в полном соответствии с языком.
                                                                                                                                    0
                                                                                                                                    Семантика — это как раз использование div'ов для div'ов, span'ов для span'ов, section'ов для section'ов и т.п.

                                                                                                                                    Так вот, пока нет вменяемого, человеческого, способа даже две колонки рядом поставить без наворачинвания дивов одного над другим, ни о каком «понимает что он делает: использование элементов по назначению, правильное и осмысленное именование, минимум экстра-разметки.» речи идти не может.

                                                                                                                                    Верстальщик был бы только рад вместо трех уровней div'ов написать один — но низзя :)

                                                                                                                                    А с своем комментарии выше я просто криво выразился. Автор сетует на вот ти все уровни вложенности, но в реальном мире без них нельзя.
                                                                                                                                      0
                                                                                                                                      я не могу вас понять. в чём проблема с двуми и даже тремя колониками?
                                                                                                                                        0
                                                                                                                                        Предлагаю сделать что-нибудь типа главной страницы erlanger.ru/ без div'ов, которые не имеют отношение к семантике. Но это — простой пример.

                                                                                                                                        Предлагаю сделать просто какой-нибудь трех-колоночный layout, а потом сделать его liquid. Но — внимание! — используя только семантическую верстку. Без этих всяких div#wrap и div#outer-wrap и т.п.
                                                                                                                                          –1
                                                                                                                                          эээ. и в чём проблема?
                                                                                                                                            0
                                                                                                                                            может, у меня что-то не то с компьютером, но не вижу никаких проблем.
                                                                                                                                              0
                                                                                                                                              Вперед, сделайте. Я хочу на это посмотреть
                                                                                                                                                +4
                                                                                                                                                freecr.ru/erlanger/ вот. в ie не проверял (у меня линукс), но должно работать.

                                                                                                                                                можете использовать под lgpl, раз профессионального верстальщика нету ;)
                                                                                                                                                • UFO just landed and posted this here
                                                                                                                                                    +1
                                                                                                                                                    использовал float где? inline-block, говорят, баговый в ie. хотя и есть способы заставить работать его, но у меня нету ИЕ, чтобы тестировать, потому использую float, так как уверен, что в любом браузере результат будет выглядеть одинаково.
                                                                                                                                                      0
                                                                                                                                                      ну и хаки, вроде, невалидные. некритично, не почему бы не использовать вариант, который лучше воспринимается валидатором при прочих равных?
                                                                                                                                                      • UFO just landed and posted this here
                                                                                                                                                          0
                                                                                                                                                          ну и так ответил)
                                                                                                                                                          у меня обычно флоатами верстается все без хаков.
                                                                                                                                                          у вас есть ие6? расскажите, мне интересно, как оно выглядит там)
                                                                                                                                                      • UFO just landed and posted this here
                                                                                                                                                          0
                                                                                                                                                          ну по ссылке так и написано (zoom:1;), видимо просто привычка. ничего не имею против способа с инлайн-блок
                                                                                                                                                          • UFO just landed and posted this here
                                                                                                                                                              0
                                                                                                                                                              чтобы все стили были в одном файле?
                                                                                                                                                      0
                                                                                                                                                      Красиво, не спорю. Хотя без одного несемантического элемента (div#overall) все равно не обошлось.

                                                                                                                                                      Но, как я сказал, erlanger.ru — это простой вариант, да еще прибитый гвоздями к пикселям. Шаг вправо-влево, все, приплыли.
                                                                                                                                                        0
                                                                                                                                                        Я считаю div#overall вполне семантическим. Но, раз вы настаиваете, переделал без него. Это не проблема.

                                                                                                                                                        Не знаю. У меня таких пробле никогда нету. На любой вёрстке. Вот недавно делал сайт, у которого обе колонки должны быть одинаковой высоты. И работать должен во всех браузерах. Без проблем.
                                                                                                                                0
                                                                                                                                А чем по вашему мнению название класса footer(взято из примера) хуже названия класса showgrid или append.
                                                                                                                                Что .footer вы будете прибивать к низу или располагать в самом низу, что grid.css из blueprint за вас вносит правила позиционирования блоков с определенными классами. Только правила эти написаны за вас и оттестированы огромным сообществом, а не 2-3 менеджерами, в лучшем случае тестерами неопределенной квалификации.
                                                                                                                                Требования к разметке в blueprint вполне вменяемые, имхо. Но в вашем примере тоже ul зачем-то завернуты в дополнительный див, когда можно задать стили для самого ul, если гнаться за минимизацией разметки.

                                                                                                                                Я и сам фреймворками не пользуюсь. Не нравится громоздкий css файл и ограничения. Хотя, вроде для fluid макетов что-то там обещали изобрести, но я особо не слежу. Просто у вас доводы высосаны из пальца, имхо. Кстати, по поводу начала статьи. «Hyper Text», как раз таки, и означает «больше, чем текст» :)
                                                                                                                                Ну, и в сравнении табличной и блочной разметки я не заметил роли css особой…
                                                                                                                                  +1
                                                                                                                                  Имхо, если макет сразу рассчитывался на сетку (960gs например) или можно выявить часто повторяющиеся закономерности расположения блоков — css-фрейворк в виде сетки должен использоваться. Если пытаться привязать фреймворк к случайному макету, выйдет слишком «дорого» и верстка будет нестабильной.
                                                                                                                                    –3
                                                                                                                                    да-да, давайте же перестанем пользоваться фреймворками, каждый должен иметь свой велосипед в котором заблудится другой. тем самым мы становимся незаменимыми для компании.
                                                                                                                                    фреймворки это не самый лучший способ разработки. но он оптимален в учётом поддержки, кустомизации, ловли багов и т.д. и т.п.
                                                                                                                                      +2
                                                                                                                                      А у меня свой фреймворк, с блекджеком. Я в нём понимаю всё.
                                                                                                                                        –2
                                                                                                                                        вот потому ты незаменимый, в нём понимаешь только ты.
                                                                                                                                        видимо, таких на хабре больше, не ты страну назвали индией
                                                                                                                                          0
                                                                                                                                          Вы занимаетесь демагогией. А на самом деле — просто троллите.
                                                                                                                                            0
                                                                                                                                            >>заискивание у народа
                                                                                                                                            посмотрись в зеркало, ты написал что фреймворки зло, это девиз джуниоров, которые неспособны освоить более-менее сложный инструмент. учитывая современную аудиторию хабра, это популистский ход. заглянув в твой профиль становится понятно, что ты пишешь то, что пипл хавает, результаты тоже на лицо.

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

                                                                                                                                            далее вы умолчали, что фреймворк — это лишь каркас, никто не мешает добавить свои классы с более семантичными именами.

                                                                                                                                            и финальный фокус с подменой понятий, когда вместо css фреймворка вы приводите фреймворк для создания *сетки*. вот первая ссылка из моего гугла css-framework.ru/doc/utilites/, заметь наличие семантики.
                                                                                                                                            — итог, нахватавшись по верхам и не вникнув в суть, вы делаете неверные «экспертные» выводы. я бы вам посоветовал всё же познакомиться с css фреймворками, но не буду, потому что меня тошнит от местных обычаев прикрывать свою недолёкость в вопросах за громким словом «тролль».

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

                                                                                                                                              Более-менее сложный инструмент? Не смешите меня. Потыкать в кнопочки и написать в трёх местах class="grid_12" — офигенно сложно разобраться. Есть более-менее сложные технологии, но css-фреймворки к ним совершенно не относятся.

                                                                                                                                              твой профиль становится понятно, что ты пишешь то, что пипл хавает, результаты тоже на лицо.

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

                                                                                                                                                0
                                                                                                                                                вот первая ссылка из моего гугла css-framework.ru/doc/utilites/, заметь наличие семантики.

                                                                                                                                                В этом примере не больше семантики, чем в первом сайте Василия Пупкина. .no-margin — это семантический класс? или .img-repl? вам надо разобраться, что такое семантика, чтобы не позориться.

                                                                                                                                                А теперь разберем ваше сообщение, которое сплошь пропитанно демагогией

                                                                                                                                                ты написал что фреймворки зло

                                                                                                                                                Подмена тезиса. Я писал, что css-фреймворки в том виде, в котором они сейчас есть(а не фреймворки впринципе) зло. Я за фреймворки впринципе (например, люблю KohanaPHP) и если бы были css-фреймворки, которые не имели недостатков blueprint и 960gs — я был бы рад.

                                                                                                                                                ты написал что фреймворки зло, это девиз джуниоров

                                                                                                                                                Апеляция к очевидности. Никаких подтверждающих фактов, что это девиз джуниоров — нету.

                                                                                                                                                это девиз джуниоров, [...] учитывая современную аудиторию хабра, это популистский ход.

                                                                                                                                                Ошибочные силлогизмы и софизмы. Т.к. высказывание «фреймворки — зло» — это девиз джуниоров, значит высказывание «существующие css-фреймворки — зло» — это популистичный ход? у вас плохо с логическими цепочками.

                                                                                                                                                Весь второй абзац — Апелляция к очевидности, ложная авторитетность. Кто такие «нормальніе специалисты»? кто такой «велосипедостроитель»? почему фреймворк «велостроителя» должен быть непонятен постороннему человеку?

                                                                                                                                                далее вы умолчали, что фреймворк — это лишь каркас, никто не мешает добавить свои классы с более семантичными именами.

                                                                                                                                                Манипулирование смыслом высказываний. Вы стараетесь сказать (убедить кого-то?) этим предложением, что css-фреймворки могут быть семантичными, если ввести паралельно фреймворку семантичные имена. Но, наличие семантичных тегов не означает отстутвие несемантичных тегов.

                                                                                                                                                и финальный фокус с подменой понятий, когда вместо css фреймворка вы приводите фреймворк для создания *сетки*

                                                                                                                                                Подмена тезиса. Во-первых, я не приводил никаких фреймворков.
                                                                                                                                                Но допустим, вы имели ввиду, что я согласен с автором топика, которая привела примеры 960gs и blueprint (предположение верное).
                                                                                                                                                Следовательно, вы стараетесь создать впечатление, что 960gs и blueprint — это не css-фреймворки, а
                                                                                                                                                фреймворк для создания *сетки*


                                                                                                                                                Тем не менее, согласно, например, списку css-фреймворков — они есть фреймворками.

                                                                                                                                                Более того, вы делаете ложное заявление (возможно, в силу незнания, возможно в попытке ввести в заблуждение читающего ваше сообщение), что примеры из css-framework.ru/doc/utilites/ содержат семантику.
                                                                                                                                                  0
                                                                                                                                                  ксожалению не могу соревноваться в скорости и количестве постинга
                                                                                                                                                  семантика вот

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

                                                                                                                                                  Подмена тезиса. Ты упорно приводишь grid, а не css фреймворки, даже в названии которых присутствует их назначение.

                                                                                                                                                  Апеляция к очевидности. Опытный специалист уже имел дело с фреймворками и использует их либо сторонние, либо свои наработки. Лишь новичёк может не обладать освоенным каркасом для разработки. От того что называешь правду правдой она не должна стать ложью.

                                                                                                                                                  Ошибочные силлогизмы и софизмы. Смотри выше, ты не описываешь существующие CSS фреймворки. Я лишь сократил «существующие css-фреймворки» до фреймворки, а не переврал их назначение.

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

                                                                                                                                                  Манипулирование смыслом высказываний. Ну, здесь вы постарались с фантазиями, я и не утверждал что фреймворк помогает достичь 100% семантичности, нельзя этого сделать с текущим html. И даже не утверждаю что это нужно.

                                                                                                                                                  Подмена тезиса. Микроскоп инструмент, молоток инструмент, микроскопом плохо забивать гвозди, инструменты не годятся для забивания гвоздей ??? вот так вы перевернули всё.
                                                                                                                                                  960 grid system — grid говорит сам за себя
                                                                                                                                                  Blueprint — print говорит само за себя, css фреймворк для печати и типографии.

                                                                                                                                                  и в конце вы зациклились вернувшись к первому обвинению, хотя я нигде не писал, что ФРЕЙМВОРК обеспечивает семантику и что он ОБЯЗАН это делать, фреймворк должен упрощать разработку и поддержку.

                                                                                                                                                  Вы пытаете доказать мой троллизм, а не опровергнуть утверждения? Если у существо серой окраски с коротким хвостом и большими ушами, то это не обязательно слон, может быть и заайцем. Читаю я много, а не увлекаюсь демогогией. И спорю не для того, чтобы доказать неправоту другого, а чтобы убедиться в своей правоте.
                                                                                                                                                    0
                                                                                                                                                    я понимаю, отрицательный рейтинг и ограничение на постинг раз в час, ничего страшного.

                                                                                                                                                    хорошо. допустим, вы действительно хотите вынести из этого разговора чего-нибудь полезное. учтите, если вы хотите исключительно «убедиться в своей правоте», то есть вам все-равно на мнение окружающих, то предупредите сразу. если вы хотите выслушать мои аргументы, привести свои аргументы и сделать выводы — с удовольствием продолжу беседу.

                                                                                                                                                    судя по вашему комментарию, вы не совсем понимаете мою мысль. я не против только grid-фреймворков. я осуждаю идеологию большинства современных css-фреймворков.

                                                                                                                                                    посмотрим, какие у нас есть типы фреймворков (по предназначению). Некоторые фреймворки могут совмещать в себе несколько типов:
                                                                                                                                                    1. reset. самый короткий вариант — * { margin : 0; padding : 0 }. Считаю очень удобным и пользуюсь всегда. Он вполне вписывается в идеологию CSS и HTML и не нарушает ни один из недостатков. Я пользуюсь вариантом от yui.

                                                                                                                                                    2. font-фреймворки, например Google Fonts Api. Тоже своего рода css-фрейморк. Ничего против не имею.
                                                                                                                                                    3. grid-фреймворки — уже обсудили
                                                                                                                                                    3. base-фреймворки — всякие базовые вещи, как .no-margin, .img-repl и .corners-10

                                                                                                                                                    пункт 2 и пункт 3 имеют приблизительно одну и ту же проблему.
                                                                                                                                                    вот давайте посмотрим на JQuery (обожаю этот фреймворк) и его UI.
                                                                                                                                                    отличное UI, подходящее для большинства мелких сайтов.
                                                                                                                                                    он базируется на хорошем, более-менее семантичном фреймворке.
                                                                                                                                                    конечно, не без недостатков, но, учитывая цели — вполне неплохо. посмотрите на класс .ui-corner-all, который в теме UI lightness выглядит так:
                                                                                                                                                    .ui-corner-all {
                                                                                                                                                    	   -moz-border-radius: 4px;
                                                                                                                                                    	-webkit-border-radius: 4px;
                                                                                                                                                    	        border-radius: 4px;
                                                                                                                                                    }
                                                                                                                                                    

                                                                                                                                                    А теперь представим, что jqueryui решили пойти по пути css-framework, назвав этот класс .corner-4.

                                                                                                                                                    И вот я, пользователь jqueryui, делаю свой бложек. Со временем я понимаю, что круглые уголки не вписываются в мой дизайн и меняю css:
                                                                                                                                                    .corner-4 {
                                                                                                                                                    	   -moz-border-radius: 0;
                                                                                                                                                    	-webkit-border-radius: 0;
                                                                                                                                                    	        border-radius: 0;
                                                                                                                                                    }
                                                                                                                                                    

                                                                                                                                                    Согласны, что получился феерический результат? Подход jquery, на самом деле тоже не без недостатков. Он обязывает меня использовать везде одинаковые уголки (а вдруг я хочу разные? — это можно сделать выйти за пределы фреймворка), но, согласен, там были причины так сделать.

                                                                                                                                                    Сам я не парюсь и использую что-то типа такой записи:
                                                                                                                                                    .ad-block {
                                                                                                                                                    	.information-block;
                                                                                                                                                    	.corners(4px);
                                                                                                                                                    	.box-shadow(#c00);
                                                                                                                                                    
                                                                                                                                                    	color: red;
                                                                                                                                                    	text-decoration: blink;
                                                                                                                                                    }
                                                                                                                                                    

                                                                                                                                                    Как считаете, не лучше ли оно, чем те некоторые несемантичные и трудноподдерживаемые вещи, которые есть сейчас во многих обычных фреймворках?
                                                                                                                                                      0
                                                                                                                                                      пункт 2 и пункт 3 имеют приблизительно одну и ту же проблему.

                                                                                                                                                      * пункт 3 и 4
                                                                                                                                                        0
                                                                                                                                                        теперь я понял отличие наших взглядов, вы хотите использовать фреймворки как основу и на нём выполнять задание. у меня подход несколько иной, более компонентный, я ожидаю от него помощь на сложных участках и отсутствие преград на сложных.
                                                                                                                                                        смена дизайна за счёт семантики в моей практике показал себя как утопический и принёс нам массу проблем и вестальщика, а проблемы после смены верстальщика усугубились. с тех пор у меня в проектах трёхуровневая иерархия шаблонов (только каркас html, «семантический» вариант с прописанными классами, шаблон проекта) из-за этой избыточности я избегаю оверворкинга и могу себе позволить проспать немного работу, уверенный что не сорвутся сроки.
                                                                                                                                                          0
                                                                                                                                                          вы так говорите, словно я со своим подходом постоянно недосыпаю и срываю сроки) это не так. ;) и семантика показала себя хорошо. другое дело — нужно знать css очень хорошо, чтобы смочь на одном и том же html сверстать качественный результат. большинство просто не углубляются в него.
                                                                                                                                                            0
                                                                                                                                                            нет, я верю что можно действительно достигать результы, но мы приходим к завязыванию на исполнителе, о чём был мой самый первый пост в ветке. если исполнитель оказывается не достаточно крутым или не может продолжать разработку, то получаем эпик фэйл и всё делаем с нуля.
                                                                                                                                                    0
                                                                                                                                                    угу, только сразу надо прочитать МАНУАЛ, а затем у них возникает ситуация, затем когда возникает ситуация не описанная в мануале и вовсе наступает апокалипсис, потому что в чужом они не умеют разбираться.
                                                                                                                                                    насмотрелся я уже таких на форумах, которые даже мануал одолеть не могут дальше cookbook и затем лажают готовые решения на каждом углу.
                                                                                                                                                    про пипл хавает дальше развивать не буду, это был ответ на тролля, мои или ваши индивидуальные качества не должны влиять на аргументы.
                                                                                                                                          0
                                                                                                                                          На самом деле inline-стили часто появляются независимо от желания пользователя, например при использовании WYSWYG-редакторов. Тут фреймворки ни при чем
                                                                                                                                            0
                                                                                                                                            Была еще такая лекция яндекса bit.ly/dBqAkb о фреймворках.
                                                                                                                                            Я с ними согласен, пытался изучать какой-то фреймворк, но понял — бессмысленно тратить время. Свой наработанный материал приятнее и понятнее. И цель быстрее достигается.
                                                                                                                                              0
                                                                                                                                              Идите к нам работать.
                                                                                                                                                0
                                                                                                                                                Ой, я бы с превеликим удовольствием, но сейчас работаю над одним проектом. Если вам не срочно, то сразу после новогодних праздников можем списаться)
                                                                                                                                                  0
                                                                                                                                                  Хорошо.
                                                                                                                                                    0
                                                                                                                                                    Напишите мне.
                                                                                                                                                  0
                                                                                                                                                  статья хороша до пункта «css-фреймворки»
                                                                                                                                                  css-фреймворки нужны! особенно на крупных проектах/порталах
                                                                                                                                                  и их нужно писать самостоятельно, а не использовать готовые

                                                                                                                                                  Only users with full accounts can post comments. Log in, please.