Števo VadóczFront End Developer

ARCHITEKTÚRA CSS PRE PRÁCU V TÍME

Nočná mora

Manažovatelný

Dobrý systém.

Udržiavatelný

Škálovatelný

Menej kódu, menej starostí a chýb.

Je jednoduché začať dobre, ale dopadnúť zle.

CSS specificity.ID.Rozličný štýl pisania CSS.Preprocesory.

CSS Guidelines

CSS Guidelines

https://github.com/csswizardry/CSS-Guidelines

Atomic designGranular

Rozbiť kód na atómy.

Atómy sa môžu spájať do molekúl.

Molekuly do organizmov.

Atomic designGranular

QuarkAtomic design

.btn {display:inline-block;vertical-align:middle;white-space:nowrap;font-family:inherit;font-size:100%;cursor:pointer;border:none;

}

.btn--search {padding: 5px 10px;background-color: red;

}

<button class=”btn btn--search”></button

Single responsibilityprinciple

Robím jednu vec a tú robím dobre.

Open/closed principle

Základný objekt je otvorený na rozšírenie, ale uzavretý na

modifikáciu.

Preprocesory

Fyzicky delíme kód na menšie časti.Kontrola CSS specificity.Dedičnosť.

Preprocesory

sass/variables/partials/components/modules/main.scss

CSS je nuda.

BEMBlock, Element, Modifier

.block {}

.block__element {}

.block--modifier {}

.dom {}

.dom__izba {}

.dom__izba--spalna {}.dom--panelak {}

BEM

<ul class="pagination"><li class="pagination__item">

<a class="pagination__prev" href>prev</a>

</li><li class="pagination__item">

<a class="pagination__link" href>1</a>

</li><li class="pagination__item--last">

<a class="pagination__next" href>next</a>

</li></ul>

Knižnica modulov

Single vs Multi class

.btn--search {@extend .btn;

padding: 5px 10px;background-color: red;

}

.btn--search {padding: 5px 10px;background-color: red;

}

<button class=”btn--search”>

<button class=”btn btn--search”>

Komenty

/** * Koment * * 1. Detailný popis určitého štýlu */

.foo {padding: 10px; /* [1] */

}

Ďakujem