Значимое CSS: Стиль Like You Mean It

Категория: Разработка сайтов | Опубликовано: 2016-05-07 14:46:57

На сайте, страдающем от classitis, каждый божий тег разразится в своем собственном опухшие, пятнистая класса. Classitis является корь разметке, заслоняя значение, поскольку это добавляет ненужный вес каждой страницы.-Jeffrey Зельдман, Проектирование с использованием веб-стандартов, 1-е изд.

CSS дает так много энергии для атрибута "класса", что авторы могут создавать свои собственные "языки документа" на базе элементов с почти не ассоциированным представлением (таких как DIV и SPAN в HTML) и назначив информацию о стиле посредством атрибута "класса" ... Авторам следует избегать такой практики, поскольку структурные элементы языка документа часто признаются и принимаются значения и автор определенные классы не могут. (Курсив мой)Так почему же, собственно, делает наши классы злоупотребления CSS так безжалостно, и почему мы подстилка наша разметка с автором определенных классов? Почему наш CSS не может быть столь же семантические и значимым, как разметке? Почему оба не могут быть более семантические и содержательным, двигаться вперед в тандеме?Создание лучших объектовДолгое время назад, когда мы вышли из первых дней CSS и начали строить все более крупные сайты и системы, мы изо всех сил, чтобы разработать некоторые звуковые конвенции пререкаться наши постоянно растущие файлы CSS. Из этого беспорядка пришел объектно-ориентированный CSS. Наши системы для безопасного строительного комплекса, многократно используемые компоненты создали метастазирования classitis проблем до точки, где наша разметка сегодня слишком часто написан на службе нашего CSS, а не наоборот. Если мы попытаемся написать семантический, доступную разметку, мы до сих пор вынуждены лавировать на автора определенных значений, чтобы удовлетворить наших CSS. И наша разметка и наш CSS отражают время, когда мы могли определить только объекты с тем, что мы имели: дивы и классов. Если есть сомнения, добавить больше обоих. Это было безопаснее, особенно для старых браузеров, поэтому мы ориентированы на самых общих объектов, которые мы могли бы найти. Сегодня мы можем двигаться дальше. Мы можем определить лучшие объекты. Мы можем создать смысловую, описательную и содержательную CSS, который понимает, что он описывает и как богатый и доступный как лучший современный разметки. Мы можем определить слона вместо того, чтобы говорить такие вещи, как .pillar и .waterspout.Очистка несколько вещей вверхНо прежде чем мы обратимся к определению лучших объектов, давайте вернемся немного и говорить о том, что случилось с нашими объектами на сегодняшний день, с небольшой помощью карикатуриста Гари Ларсона.Ларсон однажды нарисовал карикатуру дальняя сторона, в которой человек таскает краски и отмечает все, что он видит. капает "дверь" через его входной двери, "Дерево" отмечает свое дерево, и его кот четко обозначена «Кошка». Удовлетворенный, человек говорит: "Это должно очистить несколько вещей вверх."Мы все Ларсона лейбла счастливый человек. Мы пишем и без малейшего колебания. Глядя на Github, можно найти множество примеров . Но почему? Вы не можете иметь более одного основного элемента, так что вы уже знаете, как ссылаться на него непосредственно. Новые элементы в HTML5 почти десять лет старый сейчас. У нас нет оправданий для них не используя хорошо. У нас нет никакого оправдания для не ожидая наши товарищи разработчики знать и понимать их.Зачем изобретать смысловые значения, которые уже определены в спецификации в наших классах? Почему дублировать их, или мутить их?Конечный пользователь может не заметить или волнует, если вы воткнуть класс формы на вашем элементе формы, но вы должны. Вы должны заботиться о вздутие разметку и замедление работы пользователей. Вы должны заботиться о читабельности. И если вы получать деньги, чтобы сделать этот материал, вы должны заботиться о том, своего рода профессионал, который не пишет избыточную помои. "Почему я должен заботиться" был предсмертный хрип тех, кто выступает за столом на основе макетов, тоже.

Start semantic

The first step to semantic, meaningful CSS is to start with semantic, meaningful markup. Classes are arbitrary, but HTML is not. In HTML, every element has a very specific, agreed-upon meaning, and so do its attributes. Good markup is inherently expressive, descriptive, semantic, and meaningful.

If and when the semantics of HTML5 fall short, we have ARIA, specifically designed to fill in the gaps. ARIA is too often dismissed as “just accessibility,” but really—true to its name—it’s about Accessible Rich Internet Applications. Which means it’s chock-full of expanded semantics.

For example, if you want to define a top-of-page header, you could create your own .page-header class, which would carry no real meaning. You could use a header element, but since you can have more than one header element, that’s probably not going to work. But ARIA’s [role=banner] is already there in the spec, definitively saying, “This is a top-of-page header.”

Once you have , adding an extra class is simply redundant and messy. In our CSS, we know exactly what we’re talking about, with no possible ambiguity.

And it’s not just about those big top-level landmark elements, either. ARIA provides a way to semantically note small, atomic-level elements like alerts, too.

A word of caution: don’t throw ARIA roles on elements that already have the same semantics. So for example, don’t write , because the semantics are already present in the element itself. Instead, use [role=button] on elements that should look and behave like buttons, and style accordingly:

button,

[role=button] {

}

Anything marked as semantically matching a button will also get the same styles. By leveraging semantic markup, our CSS clearly incorporates elements based on their intended usage, not arbitrary groupings. By leveraging semantic markup, our components remain reusable. Good markup does not change from project to project.

Okay, but why?

Because:

If you’re writing semantic, accessible markup already, then you dramatically reduce bloat and get cleaner, leaner, and more lightweight markup. It becomes easier for humans to read and will—in most cases—be faster to load and parse. You remove your author-defined detritus and leave the browser with known elements. Every element is there for a reason and provides meaning.

On the other hand, if you’re currently wrangling div-and-class soup, then you score a major improvement in accessibility, because you’re now leveraging roles and markup that help assistive technologies. In addition, you standardize markup patterns, making repeating them easier and more consistent.

You’re strongly encouraging a consistent visual language of reusable elements. A consistent visual language is key to a satisfactory user experience, and you’ll make your designers happy as you avoid uncanny-valley situations in which elements look mostly but not completely alike, or work slightly differently. Instead, if it looks like a duck and quacks like a duck, you’re ensuring it is, in fact, a duck, rather than a rabbit.duck.

There’s no context-switching between CSS and HTML, because each is clearly describing what it’s doing according to a standards-based language.

You’ll have more consistent markup patterns, because the right way is clear and simple, and the wrong way is harder.

You don’t have to think of names nearly as much. Let the specs be your guide.

It allows you to decouple from the CSS framework du jour.

Here’s another, more interesting scenario. Typical form markup might look something like this (or worse):

What’s Your Name

And then in the CSS, you’d see styles attached to all those classes. So we have a stack of classes describing that this is a form and that it has a couple of inputs in it. Then we add two classes to say that the button that submits this form is a button, and represents the primary action one can take with this form.

об авторе

Тим БакстерТим Бакстер дизайнер, разработчик, спорщика контента, менеджер по продукции, или стратег, в зависимости от которого он шляпы, случается, носить в любой день. Он часто можно найти ковыряться в сообществе Django, на Github, или на Twitter.

Принимаем уникальные статьи