Gorki List pelinkovec 0,7l
[hr-97]

11.49€

Gorki List pelinkovec 0,7l
Napiši oceno

Nazaj

CSS rules Želim da CSS za ovaj projekat bude pisan od nule, bez korišćenja eksternih CSS framework-a kao što su Bootstrap, Tailwind ili slični sistemi. CSS mora biti organizovan, modularan, predvidljiv i lak za održavanje. Cilj nije samo da stranica trenutno izgleda dobro, već da se napravi stabilan vizuelni sistem koji može da se koristi kroz ceo sajt, za različite stranice, komponente, jezike i količine sadržaja. Na početku CSS-a treba definisati osnovni design system kroz CSS varijable u :root. Tu treba postaviti boje, fontove, spacing vrednosti, maksimalnu širinu containera, border radius vrednosti, z-index nivoe i druge globalne tokene koji će se koristiti kroz ceo projekat. Ne želim da se iste boje, razmaci i veličine ponavljaju nasumično kroz CSS, već sve treba da ide kroz varijable kao što su --color-bg, --color-text, --color-accent, --space-md, --radius-lg i slično. Potrebno je dodati osnovni CSS reset / normalize deo. Svi elementi treba da koriste box-sizing: border-box. Body treba da ima margin: 0, osnovni font, osnovnu boju teksta i pozadinu. Slike, video, svg i drugi media elementi treba da budu responsive, odnosno display: block i max-width: 100%. Form elementi kao button, input, textarea i select treba da naslede font. Klase treba da budu jasno imenovane i da imaju prefiks projekta. Za TasteBrandy koristi prefiks tb-. Na primer: tb-header, tb-button, tb-product-card, tb-pdp-hero, tb-section, tb-container. Ne koristi generičke klase kao card, button, title ili section bez prefiksa, jer to može dovesti do konflikta sa postojećim CSS-om, pluginovima, CMS sadržajem ili budućim third-party kodom. Koristi BEM-like strukturu imenovanja za komponente. Blok treba da bude osnovna komponenta, elementi treba da koriste __, a modifikatori --. Na primer: tb-product-card, tb-product-card__image, tb-product-card__title, tb-product-card__price, tb-button--primary, tb-button--secondary. CSS ne treba da zavisi od duboke HTML strukture kao što je .card div div span, već svaki važan element treba da ima svoju jasnu klasu. Ne koristiti ID-jeve za CSS styling i izbegavati !important. ID-jevi imaju previsoku specifičnost i kasnije se teško override-uju. !important koristiti samo u izuzetnim slučajevima, na primer za utility klase ili za kontrolisani override third-party stilova. Selektori treba da budu što jednostavniji i sa niskom specifičnošću. CSS treba organizovati po sekcijama: variables, reset, base typography, layout, buttons, header, footer, reusable components, page-specific components, utilities i responsive deo. Ako CSS bude podeljen u više fajlova, redosled učitavanja treba da bude: variables, reset, base, layout, components, page-specific styles, utilities i responsive overrides. Layout treba graditi kroz reusable klase kao što su tb-container i tb-section. Container treba da kontroliše maksimalnu širinu sadržaja i horizontalni padding, dok section treba da kontroliše vertikalni razmak između blokova. Ne treba svaka sekcija da ima ručno i nasumično definisan margin/padding. Koristiti mobile-first pristup. Prvo napisati CSS za mobilne ekrane, a zatim kroz media query-je dodavati layout za tablet i desktop. Breakpoint-e držati jednostavno, na primer 576px, 768px, 1024px i 1280px. Ne praviti previše breakpoint-a ako nisu potrebni. Za glavne layoute koristiti CSS Grid, posebno za hero sekcije, PDP layout, product grid, related products, producer blokove i veće sekcije. Za manje elemente unutar komponente koristiti Flexbox, na primer za navigaciju, red sa cenom, badge-eve, dugmad i male horizontalne grupe elemenata. Komponente treba da budu nezavisne. Dugme treba da bude samo dugme, kartica treba da bude kartica, a spacing oko njih treba da kontroliše parent element. Ne treba pisati stilove kao .tb-pdp .tb-button osim ako zaista postoji dobar razlog. Bolje je imati klase kao tb-pdp-hero__actions koje kontrolišu razmak oko dugmadi. Tipografija treba da bude sistemska. Ne koristiti nasumične veličine fontova za svaki naslov. Definisati tipografsku skalu kroz klase ili varijable, na primer heading-xl, heading-lg, heading-md i body text. Za responsive naslove koristiti clamp() gde ima smisla. Fontovi, line-height i razmaci treba da budu konzistentni. Koristiti rem za fontove i veće spacing vrednosti gde je moguće, jer je bolje za skaliranje i accessibility. Pixel vrednosti su prihvatljive za fine detalje, ali osnovni sistem treba da bude skalabilan. Posebno voditi računa o multilingual sadržaju. Dizajn ne sme da puca ako je tekst duži u nemačkom, francuskom, hrvatskom ili nekom drugom jeziku. Izbegavati fiksne visine osim kada su stvarno potrebne. Umesto height koristiti min-height. Naslovi, opisi i kartice treba da mogu da prime duži tekst bez lomljenja layouta. Slike treba kontrolisati preko object-fit. Za product slike najčešće koristiti object-fit: contain, jer boca/proizvod mora biti vidljiv u celosti. Za lifestyle/editorial slike koristiti object-fit: cover. Svaka slika treba da bude responsive i da ne ruši layout ako je drugačijih dimenzija. Potrebno je definisati reusable komponente kao što su tb-button, tb-card, tb-badge, tb-section-heading, tb-product-card, tb-review-card, tb-producer-card i slično. Te komponente treba koristiti kroz PDP, PLP, homepage i druge stranice, umesto da se za svaku stranicu piše potpuno novi CSS. Accessibility mora biti uključena od početka. Ne uklanjati focus outline bez zamene. Dodati :focus-visible stil koji je jasno vidljiv. Klikabilni elementi treba da imaju dovoljno veliki touch target, posebno na mobilnim uređajima. Animacije treba da poštuju prefers-reduced-motion. Animacije koristiti umereno. Premium dizajn ne treba da bude agresivan. Dozvoljeni su blagi hover efekti, suptilne tranzicije i diskretno podizanje kartica, ali bez preteranog pomeranja, treperenja ili efekata koji odvlače pažnju od kupovine. Boje, senke i radius vrednosti treba da prate premium/light luxury vizuelni pravac. Ne koristiti mnogo različitih nijansi iste boje. Definisati ograničenu paletu kroz CSS varijable i držati se nje. Senke treba da budu meke i suptilne, ne agresivne. Z-index vrednosti ne smeju biti nasumične. Definisati ih kroz varijable, na primer --z-header, --z-drawer, --z-modal i --z-toast. Ne koristiti z-index: 999999 osim ako ne postoji izuzetno opravdan razlog. JavaScript stanja treba kontrolisati kroz state klase kao što su is-open, is-active, is-loading, is-disabled i has-error. CSS treba jasno da definiše osnovno stanje i aktivno stanje. Na primer mobile menu može imati osnovno zatvoreno stanje, a kada dobije klasu is-open prikazuje se. Inline style ne koristiti osim u izuzetnim slučajevima. Svi stilovi treba da budu u CSS klasama. To omogućava lakše održavanje, promenu dizajna i ponovnu upotrebu komponenti. Ne pokušavati da se aplikaciona logika rešava CSS-om. Ako proizvod nema reviews, producer info, stock info ili neku drugu sekciju, backend/PHP treba da ne renderuje tu sekciju. CSS treba da stilizuje postojeći sadržaj, ne da sakriva loše renderovan ili prazan HTML. CSS treba testirati na više širina: mobile oko 375px, tablet oko 768px, laptop oko 1024px i desktop oko 1440px. Takođe treba testirati slučajeve kada nema slike, kada je naslov jako dugačak, kada opis ima mnogo teksta, kada proizvod nema recenzije, kada ima discount cenu, kada nema stock info i kada postoji veći broj badge-eva. Najvažniji princip je da CSS mora biti predvidljiv, modularan i lako promenljiv. Ne treba praviti CSS koji samo trenutno izgleda dobro, već sistem koji može da izdrži 200+ proizvoda, mnogo jezika, različite tipove sadržaja i buduće izmene dizajna. Sve klase treba da budu razumljive drugom developeru i dovoljno izolovane da jedna izmena ne pokvari druge delove sajta.