Let’s talk about CSSNikola Drobac

Ukratko o meni

5 godina u Frontend svetu Iz sveta dizajna došao među kodere, ali PHP ipak ostavio kolegama… Za nekoliko dana slavi 1.000.000 linija CSSa Bio član development timova projekata različite veličine, od malih do

najvećih Sada uglavnom piše mixine, development tool-ove i naškraba poneki

wireframe

CSS SpecifičnostOptimizacija kaskada, fajlova, manje glavobolja…

Izvori CSS pravila

Za početak, imamo 3 izvora: User-Agent Stylesheet Author Stylesheet User defined Stylesheet

Specifičnost elemenata Služi da razreši konflikte u

kaskadiSelektor Specifično

st* {} 0,0,0,0li {} 0,0,0,1li::first-line {} 0,0,0,2ul li {} 0,0,0,2ul ol+li {} 0,0,0,3h1 + *[rel=up] {}

0,0,1,1

ul ol li.red {} 0,0,1,3li.red.level {} 0,0,2,1div#main {} 0,1,0,1style="" 1,0,0,0

Kolone s desna na levo: Elementi i pseudo elementi Klase i atribut selektori IDevi Inline style

!important nadjačava sve…

Problemi sa specifičnosti CSS Preprocessors

Nesting primer:

!important to know Ovo je metoda za override specifičnosti Vrlo često je srećemo u CSSu kada neko ne uspe da reši problem

konflikta kaskada uz pomoć specifičnosti Quick and dirty fix, koji će zadati glavobolje kada se počne prečesto

javljati

Gde se onda on upotrebljava? Kada imamo potrebu da definišemo pravilo koje treba da bude

„garantovano“ istovetno

Rešenje za nesting problem

BEM Pristup nazivanja klasa u CSSu Ostaje nam niska specifičnost Dobijamo bolju organizaciju i strukturu CSSa

Override inline style

Grupisanje elemenata

Pseudo SelektoriPseudo klase, pseudo elementi, ideje i koncepti…

Šta su pseudo klase i elementi?

Pomažu nam da lakše i bolje stilizujemo HTML Klase su za element state Elementi imaju svoje mesto u HTMLu

Klase obeležavamo sa :active Elemente obeležavamo sa ::before

Razlika između :: i :

Oba su pravilna za pseudo elemente, ali je dobra praksa da elementima dajemo :: kako bi bili jasnije odvojeni

:: ne možemo koristiti za pseudo klase.

Primena pseudo klasa

Primer stilizacije checkbox-a

Primena pseudo elemenata

Primer clearfix bez pseudo elemenata

Primena pseudo elemenata

Primer clearfix

Još korisnih primera pseudo elemenata Ikonica tipa fajla iz linka za download

Media query za štampu, ispisivanje url-ova pored linkova

Još korisnih primera pseudo elemenata Icons

CSS only Modal? Zahvaljujući pseudo klasi :target

Manje poznati pseudo selektori

ul li:not(.active) – upotreba negacije kako bi isključili određeni element iz selektora

ul li:empty – koristimo ga naravno kada imamo element koji ne sadrži nijedan node unutar sebe u DOMu

p:only-of-type – koristimo kada u html-u gađamo element koji nema siblings istog tipa

:root – koristimo da gađamo root element, koji je u 90% slučajeva HTML tag

CSS PromenljiveBez upotrebe pre-processor-a

Zašto bez pre-processor-a?

Nasleđen kod gde se ne koristi pre-processor i nismo u mogućnosti da ga dodamo

Potrebno nam je da dinamički menjamo CSS na interakciju korisnika Brzina implementacije rešenja

PHP kao pomoćno sredstvo

Najbrža metoda za implementaciju, ali je svakako potrebna dobra saradnja sa Back-end developerom

Najčešće se koristi na Wordpress sajtovima Takođe i gde imamo potrebu da čuvamo CSS customizacije u bazi kao

zasebne vrednosti (npr. boje, pozadinske slike itd.) Dodavanjem <style> bloka unutar template fajla, i štampanjem

vrednosti kroz PHP unutar <style> bloka…

PHP eksterni CSS fajl

Pure CSS variables

U pitanju je working draft Očekuje nas u budućnosti još bolja integracija i više mogućnosti

Downside: Edge još uvek nije podržan

Pure CSS Variables

Imaju scope, kaskade i nasleđivanje Moguće ih je promeniti u browser-u Dostupne su u JavaScript-u

Pure CSS Variables Definisanje promenljivih:

--variable-name: variable-value;

Pozivanje promenljivih:

var(--variable-name);

Pozivanje sa default setovanjem:

css-value: var(--variable-name , declaration-value);

Pure CSS Variables Matematičke operacije su takođe podržane:

font-size: calc(var(--block-font-size)*1.5);

Pozivanje promenljivih unutar promenljivih:

--new-variable: var(--variable-name);

JavaScript pristup promenljivama:

document.documentElement.style.setProperty('—variable-name', value);

Pure CSS Variables

Hvala vam na pažnji!

Resursi:http://cssguidelin.es/http://csswizardry.comhttp://nicolasgallagher.com/http://blog.gospodarets.comhttp://w3c.org