Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)
Это звучит как оксюморон или, по крайней мере, невозможность, не так ли? Как может быть объектно-ориентированный статический язык, который больше похож на разметку, чем на программирование? В этом уроке я расскажу вам об идее объектно-ориентированного CSS, покажу вам, как это работает, и попытайтесь убедить вас, что вы тоже должны его использовать!
Что такое объектно-ориентированный CSS?
Объектно-ориентированный CSS, по своей сути, просто помогает писать более чистый, DRYer CSS. Это не совсем другой язык: все тот же старый CSS, который мы все знаем и любим. Это всего лишь парадигма. Действительно, объектно-ориентированный CSS - это несколько простых шаблонов и лучших практик.
Итак, зачем называть его объектно-ориентированным? Итак, согласно Википедии,
Объектно-ориентированное программирование (ООП) - это парадигма программирования, которая использует «объекты» - структуры данных, состоящие из полей данных и методов, - и их взаимодействия для разработки приложений и компьютерных программ.
Если бы мы переписывали это определение для объектно-ориентированного CSS, оно могло бы сказать что-то вроде этого:
Объектно-ориентированный CSS - это парадигма кодирования, которая стилизует «объекты» или «модули» -нормативные фрагменты HTML, которые определяют раздел веб-страницы, с надежными, многоразовыми стилями.
Это в основном означает, что у вас есть стандартный «объект» (структура HTML). Затем у вас есть классы CSS, которые вы применяете к объектам, которые определяют дизайн и поток объекта.
Непонятно? Давайте посмотрим немного теории.
Какая за этим стоит теория?
Существует два основных принципа [в объектно-ориентированном CSS]: во-первых, чтобы отделить структуру от скина, а вторая - отделить контейнер от содержимого.
Я цитирую Николь Салливан, которая придумала объектно-ориентированный CSS. Итак, как эти два принципа работают?
Разделение структуры от скина означает, что ваш стиль макета и дизайн вашего дизайна являются отдельными частями. Один очень практичный способ сделать это - использовать сетчатую систему; есть много вариантов, или вы можете создать свой собственный. Если вы не используете сетку, вы, вероятно, просто определите структуру основного объекта на своей странице; это то, что мы будем делать сегодня.
Разделение контейнера из содержимого означает, что любой объект (контейнер) должен быть способен адаптироваться для принятия любого содержимого; например, ему не нужно иметь h3 сверху, за которым следует неупорядоченный список, чтобы он выглядел правильно. Это обеспечивает гибкость и возможность повторного использования, что имеет первостепенное значение.
Зачем мне это делать?
Есть несколько веских причин, по которым вы хотели бы написать свой CSS объектно-ориентированным способом. Одно из самых больших преимуществ - и мы уже упомянули об этом - это то, что ваш CSS можно будет многократно использовать. Но ваши таблицы стилей также должны стать намного меньше. Объектно-ориентированный CSS должен упростить изменение дизайна сайта.
Написание вашего стиля таким образом также может придать вам душевное спокойствие: будет намного проще менять части вашего сайта, ничего при этом не нарушая. Объектно-ориентированный CSS также позволяет вам последовательно менять свой сайт.
Как практиковать объектно-ориентированный CSS?
Ну, если вы зашли так далеко, вам интересно, как именно вы пишете CSS с объектно-ориентированным мышлением. Вот так!
Первым шагом является подготовка к CSS: вы должны определить свой HTML-объект. Как правило, ваш объект будет иметь заголовок, тело и нижний колонтитул, хотя верхний и нижний колонтитулы необязательны. Вот очень простой объект.
<div class="object">
<div class="head"></div>
<div class="body"></div>
<div class="foot"></div>
</div> Прежде чем вы закричите «DIVITIS!» поймите, что это не так плохо, как кажется; учтите следующее:
<article>
<header></header>
<section></section>
<footer></footer>
</article> Используя HTML5, теперь у нас есть объект с семантическим смыслом и суп-подобными характеристиками. На самом деле, это тот объект, который мы будем сегодня использовать.
Если мы собираемся написать некоторый CSS, нам нужно что-то по стилю, так что давайте использовать очень простой шаблон: домашнюю страницу блога и одну страницу для поста. Мы будем использовать несколько элементов HTML5 и некоторые стили CSS3!
index.htm
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Object Oriented CSS</title>
<!--[if IE]><script src="http://nettuts.s3.amazonaws.com/450_ooCss/http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!-- This makes IE recognize and use the HTML5 elements -->
<link type="text/css" rel="stylesheet" href="css/reset.css" />
<link type="text/css" rel="stylesheet" href="css/text.css" />
<link type="text/css" rel="stylesheet" href="css/styles.css" />
</head>
<body>
<article id="container">
<header>
<h1>Object Oriented CSS</h1>
<h2 class="subtitle">(really just a bunch of best practices and patterns; not a new language)</h2>
<nav>
<ul>
<li><a href="index.htm" class="selected">Home</a></li>
<li><a href="=post.htm">Archives</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<section>
<article class="post">
<header>
<span class="date">September 10, 2009</span>
<h2><a href="post.htm">Check out WorkAwesome!</a></h2>
</header>
<section>
<img src="http://nettuts.s3.amazonaws.com/450_ooCss/img/wa.jpg" alt="Work Awesome" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
</section>
<footer>
<ul>
<li><a href="#">Read More . . .</a></li>
<li><a href="#">Retweet!</a></li>
<li><a href="#">Comments (4)</a></li>
</ul>
</footer>
</article>
<article class="post ext">
<header>
<span class="date">September 7, 2009</span>
<h2>The Intro Post</h2>
</header>
<section>
<img src="http://nettuts.s3.amazonaws.com/450_ooCss/img/wa.jpg" alt="Work Awesome" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
</section>
<footer>
<ul>
<li><a href="#">Read More . . .</a></li>
<li><a href="#">Retweet!</a></li>
<li><a href="#">Comments (4)</a></li>
</ul>
</footer>
</article>
<article class="post">
<header>
<span class="date">September 5, 2009</span>
<h2>Welcome</h2>
</header>
<section>
<img src="http://nettuts.s3.amazonaws.com/450_ooCss/img/wa.jpg" alt="Work Awesome" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
</section>
<footer>
<ul>
<li><a href="#">Read More . . .</a></li>
<li><a href="#">Retweet!</a></li>
<li><a href="#">Comments (4)</a></li>
</ul>
</footer>
</article>
</section>
<aside>
<article class="side-box">
<header>
<h2>Archives</h2>
<p>look into the past</p>
</header>
<section>
<ul>
<li><a href="#">August 2009</a></li>
<li><a href="#">July 2009</a></li>
<li><a href="#">June 2009</a></li>
<li><a href="#">May 2009</a></li>
<li><a href="#"> . . . </a></li>
</ul>
</section>
</article>
<article class="pop-out side-box">
<header class="post-it">
<h2>Recent Comments</h2>
<p>see what folks are saying</p>
</header>
<section>
<ul>
<li>
<p>I think oocss is really cool!</p>
<p class="meta">By J. Garret on Sept 12, about "The Intro Post"</p>
</li>
<li>
<p>Are you kidding? CSS can't ever be Object Oriented.</p>
<p class="meta">By Joe Thomas on Sept 11, about "The Intro Post"</p>
</li>
<li>
<p>Envato has done it again; workAwesome is simply awesome!</p>
<p class="meta">By GV on Sept 10, about "Check out WorkAwesome"</p>
</li>
<li>
<p>I really like the site's desing; another work of art from Collis.</p>
<p class="meta">By Anonymous on Sept 10, about "Check out WorkAwesome"</p>
</li>
</ul>
</section>
</article>
</aside>
<footer>
<ul>
<li>Standard</li>
<li>Footer</li>
<li>Information</li>
<li>Yada</li>
<li>Yada</li>
<li>© 2009</li>
</ul>
</footer>
</article>
</body>
</html> Я знаю, что это долго, так что вот диаграмма нашей базовой структуры:
Выглядит знакомо? Это наш объект, добавленный в сторону боковой панели. Мы посмотрим на страницу поста немного позже, но давайте перейдем к некоторым CSS прямо сейчас!
Вы заметите, что мы связываемся с тремя таблицами стилей: reset.css, text.css и styles.css. Reset.css - перезагрузка Эрика Мейера. Text.css важен: вторым этапом объектно-ориентированного CSS является создание нескольких ключевых базовых элементов; Обычно это текстовые элементы, такие как заголовки и списки. Стилизация этих объектов важна, поскольку она определяет последовательный внешний вид сайта; эти элементы, по большей части, не получат никакого дополнительного прямого стиля.
Вот что у нас есть в нашем text.css:
body { font: 13px/1.6 Helvetica, Arial, FreeSans, sans-serif;}
h1, h2, h3, h4, h5, h6 { color:#333; }
h1 { font-size: 50px; text-shadow:1px 1px 0 #fff; font-family:arial black, arial}
h2 { font-size: 23px; }
h3 { font-size: 21px; }
h4 { font-size: 19px; }
h5 { font-size: 17px; }
h6 { font-size: 15px; }
p, h1, h2, h3, h4, h5, h6, ul { margin-bottom: 20px; }
article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } (Шляпы отключены до 960 Grid System, чей файл text.css выделен.)
Теперь мы начнем создавать styles.css; здесь начинается объектно-ориентированная магия. Тем не менее, я сначала просто вложу несколько стилей верхнего уровня, просто чтобы установить фон body и некоторые стили ссылок и списков.
body
{ background:url(../img/grad.jpg) repeat-x #c0c0c0;
}
/*Note: All the image will be in the downloadable source code. */
a
{ text-decoration:none;
color:#474747;
padding:1px;
}
a:hover
{ background:#db5500;
color:#fff;
}
.selected
{ border-bottom:1px solid #db5500;
}
li
{ padding-left:15px;
background:url(../img/bullet.png) 0 5.9px no-repeat;
} Наш первый заказ состоит в том, чтобы определить структуру страницы:
#container
{ margin:40px auto;
width:960px;
border:1px solid #ccc;
background:#ececec;
}
#container > header, #container > footer
{ padding:80px 80px 80px;
width:800px;
overflow:hidden;
border: 1px solid #ccc;
border-width:1px 0 1px 0;
}
#container > header
{ background:url(../img/header.jpg) repeat-x #d9d9d7;
}
#container > header li, #container > footer li
{ float:left;
padding:0 5px 0 0;
background:none;
}
#container > section
{ background:#fdfdfd;
padding:0 40px 40px 80px;
float:left;
width:493px;
border-right:1px solid #ccc;
}
#container > aside
{ padding-top:20px;
float:left;
width:346px;
}
#container > footer
{ padding:40px 80px 80px;
background:#fcfcfc;
}
#container > footer li:after
{ content:" |"
}
#container > footer li:last-child:after
{ content:""
} Обратите внимание, что мы создаем наш контейнерный объект, используя все наши селекторы с #container. Однако это особый случай: обычно вам нужно использовать классы, потому что они могут свободно использоваться повторно.
Мы можем использовать селектор классов для нашего стиля поста:
.post
{ overflow:visible;
margin-top:40px;
}
.post > header
{ margin:0 0 20px 0;
position:relative;
}
.post .date
{ padding:2px 4px ;
background:#474747;
color:#ececec;
font-weight:bold;
transform:rotate(270deg);
-moz-transform:rotate(270deg);
-webkit-transform:rotate(270deg);
position:absolute;
top:60px;
left:-105.5px;
}
.post img
{ float:left;
margin-right:10px;
}
.post.ext img
{ float:right;
margin:0 0 0 10px;
}
.post footer
{ overflow:hidden;
}
.post footer li
{ float:left;
background:none;
} Давайте посмотрим, что делает этот CSS объектно-ориентированным. Во-первых, мы не ограничиваем класс конкретным элементом; мы могли бы добавить его ко всему. Это дает нам максимальную гибкость. Затем обратите внимание, что мы не установили ни высоты, ни ширины; что является частью отделения структуры от скины; мы уже описали стили структуры, так что этот объект будет заполнять все пространство, которое дает структура.
Кроме того, мы разработали все элементы независимым образом: родительские элементы не требуют, чтобы некоторые дети выглядели правильно; хотя мы разработали дочерние элементы, ничто не сломается, если их там нет. А дочерние элементы, по большей части, не зависят от их родителей; Я не писал h2 в post-объекте, потому что он должен быть согласованным по всему сайту; мы уже позаботились об этом в text.css.
Есть еще один важный момент, часть, наиболее похожая на объектно-ориентированное программирование: расширенные классы. Вероятно, вы видели, что у нас есть стиль для обоих .post img и .post.ext img. Я уверен, вы знаете, что они будут делать, но вот доказательство:
Просто добавив еще один класс к вашему объекту, вы можете изменить незначительные части внешнего вида; Я должен упомянуть, что Николь Салливан создала класс под названием .postExt, а затем применила бы и к объекту; Я предпочитаю делать это так, потому что это позволяет мне использовать одно и то же имя класса («ext») для всех моих расширений, и я думаю, что это делает HTML более чистым. Вы просто должны помнить о том, чтобы не помещать пробел в селектор; «.post .ext» будет искать элемент в классе ext внутри элемента в классе post. Без пробела он будет искать элемент в обоих классах.
На боковой панели
Теперь, когда у нас есть основная область содержимого, давайте посмотрим на боковую панель. У нас есть два объекта на боковой панели: список архивов и список последних комментариев. Для начала мы создадим для них класс .side-box:
.side-box
{ padding: 20px 80px 20px 40px;
}
.side-box:not(:last-child)
{ border-bottom:1px solid #ccc;
}
.side-box > header h3
{ margin-bottom:0;
}
.side-box > header p
{ text-transform:uppercase;
font-style:italic;
font-size:90%;
} Опять же, вы должны принять к сведению, что мы стараемся следовать двум правилам: мы отделили структуру от скина, не установив высоту или ширину; объект течет, чтобы заполнить все необходимое пространство. И мы отделили контейнер от контента, не создавая дочерние элементы, необходимые для правильного стиля. Да, я скорректировал стиль h3, что делает этот конкретный h3 похожим на бокс-бокс класса; в большинстве случаев это нежелательно, но в этом случае это не слишком страшно.
Но давайте создадим расширение для этого; однако, поскольку мы хотим сделать большую визуальную настройку, мы не будем расширять класс side-box напрямую; мы создадим новый класс.
.pop-out > section > *
{ display:block;
background:#fefefe;
border:1px solid #474747;
padding:20px;
position:relative;
width: 120%;
left:20px;
} Так что же это делает? Обратите внимание на селектор: мы нацеливаем каждый элемент непосредственно внутри тела нашего объекта; при стилизации объекта вы всегда применяете класс к самому объекту. Этот CSS будет «удалять» контент вправо.
«ЭЙ, вы задали ширину! А как насчет выделения структуры из скина?» Я устанавливаю ширину, потому что мы нацеливаем элементы внутри тела нашего объекта; поскольку у объекта есть отступы, этот внутренний элемент немного узкий сам по себе. Это звучит как предлог для нарушения правила, но я не думаю, что я действительно нарушил правило: я установил ширину в процентах, которая все еще зависит от стиля структуры в каскаде.
Вот как это выглядит.
Я просто сказал вам, что вы всегда должны применять классы к объектам верхнего уровня и использовать дочерние селекторы для формирования внутренних элементов. Но часть объектно-ориентированного CSS позволяет легко смешивать и сопоставлять стили. Вполне возможно, вам захочется использовать аналогичный заголовок на двух объектах, которые каким-либо образом не связаны. Идеально иметь коллекцию классов заголовка и нижнего колонтитула, которые вы применяете непосредственно к верхнему или нижнему колонтитулу объекта. Таким образом, вы не добавляете подобный код к нескольким несвязанным классам, а абстрагируетесь от него и применяете его в соответствующем месте. Давайте создадим абстрактный заголовок.
Вы заметите, что мы дали заголовку наших недавних комментариев объект класса, называемого «post-it». Давайте создадим этот класс сейчас.
.post-it
{ border:1px solid #db5500;
padding: 10px;
font-style:italic;
position:relative;
background:#f2965c;
color:#333;
transform:rotate(356deg);
-moz-transform:rotate(356deg);
-webkit-transform:rotate(356deg);
z-index:10;
top:10px;
box-shadow:1px 1px 0px #333;
-moz-box-shadow:1px 1px 0px #333;
-webkit-box-shadow:1px 1px 0px #333;
} 
Некое подобие поста!
Важно подчеркнуть, что, хотя мы планируем использовать это для заголовка, мы не указали это в селекторе. Если это напоминает общий дизайн нашего сайта, мы можем потерять этот стиль для чего-то другого; например, мы могли бы расширить его с помощью классов, которые регулируют цвет и поворот, а также использовать их на wall или на bulliten, или что-то подобное.
Не блокируйте свои селекторы; вы никогда не знаете, когда захотите эти стили!
Часто вы хотите использовать его больше, чем просто классы заголовка и нижнего колонтитула; библиотека компонентов - это огромная часть объектно-ориентированного CSS; основным правилом может быть следующее: всякий раз, когда вы хотите применить один и тот же стиль в нескольких несвязанных местах, абстрагируйте его. Конечно, вы можете найти после жесткого кодирования что-то в объекте, что было бы более полезно, если бы вы могли использовать его в другом месте; не бойтесь рефакторинга. Это всегда на вашу пользу.
Вы увидите эти компоненты в заголовке страницы и в последнем окне комментариев.
.meta
{ font-size:75%;
font-style:italic;
}
.subtitle
{ text-transform:uppercase;
font-size:90%;
font-weight:bold;
letter-spacing:1px;
text-shadow:1px 1px 0 #fff;
} Ну, мы закончили с нашей индексной страницей; давайте посмотрим на немного более объектно-ориентированную страницу поста. Просто скопируйте эту индексную страницу, переименуйте ее в «post.htm» и замените заголовок и раздел страницы для этого кода.
<header>
<h1>Object Oriented CSS</h1>
<p class="subtitle">(really just a bunch of best practices and patterns; not a new language)</p>
<nav>
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="#" class="selected">Archives</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<section>
<article class="post">
<header>
<span class="date">September 10, 2009</span>
<h2>Check out WorkAwesome!</h2>
</header>
<section>
<img src="http://nettuts.s3.amazonaws.com/450_ooCss/img/wa.jpg" alt="Work Awesome" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
</section>
<footer>
<ul>
<li><a href="#">Digg!</a></li>
<li><a href="#">Share!</a></li>
<li><a href="#">Like!</a></li>
</ul>
</footer>
</article>
<article class="comments">
<header><h2>Comments</h2></header>
<section>
<article class="comment">
<header><p>First-commenter</p><p class="meta">Sept 10</p></header>
<section><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,</p></section>
</article>
<article class="reply comment">
<header><p>Reply-commenter</p><p class="meta">Sept 12</p></header>
<section><p>diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar</p></section>
</article>
<article class="comment">
<header><p>Second-commenter</p><p class="meta">Sept 10</p></header>
<section><p>tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus </p></section>
</article>
<article class="author comment">
<header><p>The author</p><p class="meta">Sept 11</p></header>
<section><p>diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar</p></section>
</article>
<article class="comment">
<header><p>Fourth-commenter</p><p class="meta">Sept 12</p></header>
<section><p>imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi</p></section>
</article>
</section> Теперь мы можем видеть, где происходит повторное использование; мы можем использовать класс post для здесь; это тот же класс post, который мы использовали для домашней страницы; потому что мы не указали структуру, но пусть объект расширяется, чтобы принять то, что мы ему даем, он может обрабатывать весь пост.
Комментарии
Теперь обратим наше внимание на комментарии на этой странице; комментарии - отличное место для использования объектно-ориентированного CSS. Начнем с добавления этого:
.comment
{ border:1px solid #ccc;
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
padding:10px;
margin:0 0 10px 0;
}
.comment > header > p
{ font-weight:bold;
display:inline;
margin:0 10px 20px 0;
} Это само по себе дает нам некоторые псевдо-привлекательные комментарии; но мы можем сделать больше. В нашем HTML есть классы для ответов и комментариев автора.
.reply.comment
{ margin-left:80px;
}
.author.comment
{ color:#ececec;
background:#474747;
} Убедитесь, что между двумя именами классов нет пробела. Это немного отличается от того, что мы делали ранее: вместо изменения стиля класса комментариев мы фактически расширяем его (так что, возможно, это настоящие расширенные классы).
И готовые комментарии...
И пока мы здесь, давайте добавим форму комментариев в нашу библиотеку компонентов.
.comments-form p
{ padding:5px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.comments-form p:hover
{ background:#ececec;
}
.comments-form label
{ display:inline-block;
width:70px;
vertical-align:top; }
.comments-form label:after
{ content: " : ";
}
.comments-form input[type=text],
.comments-form button,
.comments-form textarea
{ width:200px;
border:1px solid #ccc;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:2px;
}
.comments-form button[type=submit]
{ margin-left:70px;
} Это дает нам хорошую форму с округлым углом с эффектом мягкого зависания.
Я как бы разорван здесь; фундаментальная концепция объектно-ориентированного CSS - это способность добавлять класс к различным элементам; но как насчет этого случая? Этот класс в основном был бы бесполезен ни на чем, кроме формы; следует ли изменить селектор на form.comments-form? Как вы думаете?
Ну, это действительно охватывает идеи объектно-ориентированного CSS.
Обзор основных шагов
- Определите свой объект.
- Установите сброс, базовые элементы и стили базового объекта.
- Применяйте классы к объектам и компонентам для желаемого внешнего вида.
Я не использовал стандартный пример сообщения, но это действительно отличный способ попасть в объектно-ориентированный CSS. Попробуйте создать класс сообщений, который можно применить к различным элементам, например абзацу, элемента списка или полного объекта. Затем расширьте его с помощью классов ошибок, предупреждений и информации. Посмотрите, насколько гибко вы можете это сделать.
Объектно-ориентированный CSS всегда полезен?
Я не думаю, что ответ на этот вопрос - это просто «да» или «нет»; вероятно, потому, что объектно-ориентированный CSS - это не язык, а набор шаблонов и лучших практик. Вы не всегда можете применить идею стандартного объекта HTML, но большинство принципов CSS всегда действительны. Если вы подумаете об этом, вы увидите, что это действительно то место, где вы хотите оптимизировать: вы можете кодировать HTML-код минималистично, с несколькими идентификаторами для обработчиков и легко стилизовать его; но CSS не будет повторно использоваться, и сайт может сломаться позже, когда вы придете, чтобы изменить ситуацию. Или вы можете написать немного больше HTML и оптимизировать CSS с принципами, которые мы рассмотрели в этом уроке.
Я хочу немного расширить свой HTML-код, чтобы писать CSS, который можно использовать повторно, гибко и dry. Каково ваше мнение на этот счет?
Другие источники
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post
