Vývoj efektivity zápisu CSS

Trocha historie

V roce 1994 přišel Håkon Wium Lie na to, že je potřeba vytvořit jazyk, který bude vytvářet možnosti, jak vizuálně upravovat dokumenty na webu. Hlavní myšlenka byla postavena na tom, že je potřeba oddělit obsah od prezentace. Stalo se tak to, že se spolu s dalšími autory podíleli na vytvoření první verze CSS, které postupem času implementovaly všechny prohlížeče, a po HTML se z CSS se stal druhý standardizovaný jazyk pro W3.

ViolaWWW browser (source)

Co bylo před tím, než přišlo CSS?

Postupem času začali autoři webových stránek tvořit první pokusy o to, čemu dnes říkáme webdesign. Častým příkladem stránky z 90. let je stránka Space Jam. Stránka slavného animovaného filmu od WarnerBros je stále i po 24 letech online v původním stavu a tak je možné si ji projít a prozkoumat.

Space Jam website from 1996 (source)
<body bgcolor=”#000000" text=”#ff0000" link=”#ff4c4c” vlink=”#ff4c4c” alink=”#ff4c4c”>
Old CSS, new CSS (source)
<table width=500 border=0>
<TR>
<TD colspan=5 align=right valign=top>
</td></tr>
<tr>
<td colspan=2 align=right valign=middle>
<br>
<br>
<br>
<center>
<a href="cmp/pressbox/pressboxframes.html"><img src="img/p-pressbox.gif" height=56 width=131 alt="Press Box Shuttle" border=0>
</a>
</center>
</td>
...
</tr>
...
</table>

Nástup CSS

Nástup kaskádových stylů byl v té době revoluční. Eric Meyer — který se spojil s ostatními — začal v roce 1998 popisovat, jak je možné implementovat a používat kaskádové styly. Postupem času se tak CSS dostalo na první webové stránky a začalo se plně využívat pro designování webových stránek. Třeba tímto způsobem.

<STYLE type=”text/css”>
BODY {
font-family: serif;
background-color: silver;
}
H1 {
font: x-large Verdana, sans-serif;
color: olive;
border-bottom: thin black solid;
}
TABLE {
margin: 0;
}
.sidebar {
background-color: olive;
padding: 0.5em;
}
.sidebar UL LI {
list-style-type: none;
margin-left: 0;
margin-right: 0.5em;
}
.sidebar UL LI A {
color: #ffcccc;
}
.body {
background: white;
}
IMG.icon {
border: outset gray 3px;
padding: 0;
}
P {
margin: 0em 0.5em;
text-indent: 1em;
}
</STYLE>

Problémy s CSS

Jaké komplikace můžou vznikat při psaní CSS? Hlavně pro začátečníky může být psaní stylů těžkým oříškem. Na jednu stranu jsou kaskádové styly díky své přímočarosti velmi jednoduché na pochopení, na druhou stranu je pak dost komplikované styly udržovat, upravovat a strukturovat. Problémů se může objevit mnoho. Zkusím tak některé z nich stručně popsat.

Modular CSS: Best practices to improve your coding workflow (source)

Hluboké zanořování selektorů a vysoká specificita

S tímto problémem se určitě setkal každý, kdo alespoň někdy s CSS pracoval.

<ul class="seznam">
<li><a href="prvni.html">Odkaz 1</a></li>
<li><a href="druhy.html">Odkaz 2</a></li>
<li><a href="treti.html">Odkaz 3</a></li>
</ul>
.seznam li a {
font-size: 20px;
color: blue;
}
body #content .page ul li a {
font-size: 16px;
color: red;
font-weight: bold;
}
body #content .page ul.seznam li a {
font-size: 16px;
color: red;
font-weight: bold;
}

Závorkové peklo alias „Nesting hell”

Většina vývojářů si málokdy uvědomuje, že psaním CSS zapisujeme design webových dokumentů a aplikací. S nástupem popularity preprocesorů se tak psaní kaskádových stylů kousek přiblížilo programovacím jazykům (díky možnosti používat proměnné, cykly nebo např. mixiny). Preprocesory přišly taky s jednou novinkou, a tou bylo zanořování selektorů do sebe.

.Checkbox--toggle {
padding: $chekcbox-toggle-diameter / 10 0;
.Checkbox {
&-input {
&:checked {
& + .Checkbox-label {
@extend .Checkbox-toggle — active;
}
}
&:not(:checked) {
&:focus {
& + .Checkbox-label {
&::before {
background-color: $checkbox-toggle-active-handle-bg;
}
}
}
& + .Checkbox-label {
background-color: rgba($checkbox-toggle-bg, 0.46);
}
&[disabled], &[readonly] {
& + .Checkbox-label {
@extend .Checkbox-toggle — disabled;
}
}
}
&-label {
@extend .Checkbox-toggle;
}
}
.button {
padding: 10px;
@include breakpoint(tablet) {
padding: 8px;
}
&:hover {
background: blue;
}
&.is-active {
color: red;
}
&-icon {
max-width: 16px;
}
&-text {
font-size: 0.875rem;
}
}

Kaskáda — pořadí zápisu pravidel a struktura souborů

Na pořadí záleží. Dalším typickou chybou při psaní CSS je ignorování faktu, že musíme dbát na to, v jakém pořadí selektory zapisujeme. Tato vlastnost CSS odrazuje mnoho vývojářů v tom, aby se psaním stylů zabývalo a dál rozvíjelo, protože jednoduše nemají pochopení pro tyto vlastnosti a nedokážou se s ní vypořádat.

Combining the Powers of SEM and BIO for Improving CSS (source)

Metodologie a architektury CSS

Za účelem řešení vlastní složitosti CSS byly zavedeny různé druhy osvědčených postupů a technik, které nám pomáhají vytvářet smysluplný, udržitelný a rozšiřitelný kód pro design našich webů a aplikací.

OOCSS

V roce 2008 si Nicole Sullivan vypůjčila koncept objektově orientovaného designu za účelem poskytnutí struktury do CSS. Na přednášce Web Directions North představila svůj koncept OOCSS.

.product-detail h2
.product-detail-heading {
...
}
.hero .heading-secondary {}.page-detail h2 {}
// v tomto případě porušujeme rovnou i první pravidlo

SMACSS

Scalable and Modular Architecture for CSS je metodologie a stejnojmenná kniha od Jonathana Snooka. Hlavní myšlenkou SMACSS je kategorizace systému pravidel CSS.

body, form {
margin: 0;
padding: 0;
}
a {
color: #039;
}
a:hover {
color: #03F;
}
#header { … }#primarynav { … }#maincontent { … }
.module > h2 {
padding: 5px;
}
.module span {
padding: 5px;
}
.is-tab-active {
background-color: white;
color: black;
}

BEM

BEM je metodologie pro psaní CSS, za kterou stojí vývojáři z ruské korporace na internetové služby. BEM znamená Block Element Modifier, který shrnuje použitou konvenci pojmenování a celkový přístup k organizaci.

ITCSS

ITCSS neboli Inverted Triangle CSS je architektura (nebo metodologie udržování organizace jednotlivých CSS souborů) od Harryho Robertse, která nám pomáhá organizovat naše CSS soubory podle určitých pravidel. Díky ní docílíme správnému zařazení a dovolí nám tak psát smysluplné a dlouhodobě udržitelné styly.

ITCSS: Scalable and Maintainable CSS Architecture (source)
  1. Settings
    Prostor pro preprocesory — nastavení proměnných jako např. barvy, design tokeny, typografie, gridu.
  2. Tools
    Vrstva s mixiny, funkcemi, media queries.
  3. Generic
    Zde vkládáme styly pro knihovny třetích stran jako normalize, reset, definice box-sizing.
  4. Elements:
    Selektory pro holé HTML elementy jako <h1>, <p>, <article>, <a>.
  5. Objects
    Definice tříd pro layout, mřížku, odsazení — znovupoužitelné nedekorativní styly.
  6. Components
    Specifické komponenty napříč projektem — accordion, buttons, breadcrumbs, tooltip.
  7. Trumps (Utilities)
    Utility třídy, které mají za úkol ovlivnit jednu konkrétní vlastnost CSS a jsou ve většině případů zapisovány s nejvyšší důležitostí.

JavaScript a CSS

Jak se s těmito problémy perou progresivní přístupy psaní stylů v JavaScriptových aplikacích jako CSS Modules, JSS nebo styled-components? To je téma na samostatné články a není mým cílem je tady všechny zmínit a popsat. Přichází však doba, kdy se díky dobré práci komunity okolo JavaScriptu rodí nové přístupy, které můžou v určitých případech dávat velký smysl v použití.

Závěrem

CSS má za sebou dlouhý vývoj a díky neustálému vylepšovaní (na kterém pracují ti nejzkušenější v oboru) se daří vylepšovat a rozvíjet jeho funkcionality a možnosti. Drží si tak stabilní místo vedle svých kolegů pro vývoj webových dokumentů a aplikací.

--

--

Product designer and developer — deeply interested in design systems, technology and product experience. A few words about me: www.ondrejkonecny.cz

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ondřej Konečný

Ondřej Konečný

4 Followers

Product designer and developer — deeply interested in design systems, technology and product experience. A few words about me: www.ondrejkonecny.cz