Otázky HTML a CSS

Nechcem zakladať nové témy tak bude len táto. Učím sa robiť stránky a pridávam vám obrázok podla ktorého som chcel urobiť stránku a kód. Chcem sa opýtať čo by ste urobili inak respektívne čo by sa nemalo robiť a čo áno. Chcem sa učiť na vlastných chybách a pridávať sem postupne na kontrolu a zároveň to môže pomôcť veľa začiatočníkom.

1. odporucam nepouzivat velke pismena v nazvoch suborov a priecinkov ex: CSS/style.css
2. vloz vdy nejaky reset css napr. https://necolas.github.io/normalize.css/
3. tento kod mas v css ".group:before, .group:after {...}" ale v html nemas nikde class group
4. vyhybat sa v css pouzivanie id a priamo elementom, snazit sa vsetko robit cez triedy. a teda ak zmenis <header class="header"> na <div class="header"> sa nic na zobrazovani nezmeni. a id pouzivat pri JS alebo pri anchor linkoch
5. na pomenovanie tried pre css odporucam system BEM, je to prehladne ci uz v css alebo aj priamo v html. https://css-tricks.com/bem-101/

A nepouzival by som px ako jednotky velkosti.

kralicek: to by som nechal na jeho volbe s cim sa mu bude lepsie robit. a takisto zalezi od makiet a celkoveho pristupu k projektu. ja osobne pouzivam hlavne px, obcas rem a em len v specifickych pripadoch (mam na to svoje dovody). a vw vh nie su bohuzial podporovane v ie8.

ale toto je na dlhu debatu bez konca, kazde ma svoje pre a proti. takze ani ju nechcem otvarat:)
iba zopakujem moj nazor: nech sa sam rozhodne s akymi jednotkami bude pracovat. kazdopadne je dobre poznat a vyskusat vsetky moznosti.

Dakujem za rady velke pismena z nazvov vyradim ten group to mam v kazdom css kode uz nastavene keby floatujem tak pouzijem ten reset css to tam vlozim a z kontroluje mi to ? Ten bem mi vygeneruje nazvy tried pre zaciatok chcem pouzivat px aby som vedel asi jak vyzera napr 100px

hatto13, na fonty by sa px ale vážne používať nemali, to nie je ani na debatu

Reset.css ti zrusi padding, margin atd na vsetlych elementoch aj h1 nastavi defaultne font na 16px atd.

Ja robim vsetko v EM. Teraz som napriklad kodoval jeden blog a pri nastavovani responzivity som len zmenil body elementu font-size na 90% a vsetko mi prepocitalo. Podla mna je lepsie ale prepisovat kazdy PX

Ja pouzivam uz dobrycas vw, o tom ze ho nejaky stary ie som ani nevedel. Ale obrazky urcite nie v px, ide skôr o to ze zariadenia maju rozne rozlisenia a co mas ty na 900px v strede monitora moze mat iny mimo obrazovky

A em a vw su ake jednotky viem ze okrem px su aj %este

1EM sa rovna velkosti fontu, ktory ma prehliadac defaultne nastaveny. To je 16px.

Ak sa mylim opravte ma

A moze byt aj 1,5 em ? Cize 2em je dvojnasobok fontu ze ? A vcom je em lepsie od px ?

mylis sa, 1em ja rovna 100% font-size svojho rodica

Ano mas pravdu, ale ked nastavis body elementu font-size: 100% tak by to malo byt 16px, kedze prehliadac ma nastavenu zakladnu velkost 16px, nie? a dalej sa uz nastavuje em podla rodica.

To je jedno, nakoľko by si sa nikdy nemal spoliehať na hodnotu, nad ktorou nemáš kontrolu.

mas kontrolu, ak zadas hodnotu v css pre html

O tom hovorím. Ide mi len o to, aby nepredpokladal, že tá hodnota bude taká navždy. Preto ju treba explicitne nastaviť.

Porsím vas ted strucne ktorá jednotka je najlepsia a preco oproti px?

strucne: ziadna nie je lepsia, kazda ma svoje uplatnenie
px - fixna hodnota
em - relativna, vyuziva dedicnost od rodica resp od html alebo nastavenia prehliadaca ak neexistuje rodic s font-size
rem - relativna, vyuziva dedicnost od body / nepodporovane ie8
vw,vh - relativna od sirky/vysky viewportu / nepodporovane ie8, ciastocne ie9
% - takmer to iste ako em, (tusim ze v em je urcita minimalna velkost aby to vzdy bolo citatelne)

Pridám ďalšiu stránku: bola zamerana na dost typov odlosnich textov dobre som to robil v html ci sa to dalo este jednoduchsie ?

Ten css rset som este nepouzil chcem sa opytat ten css reset urobi ze vsetky defaultne marginy su 0? cize h1 ma margin 0 a ten system BEM na oznacovanie classov som nepochopil neni nejaky slovensky navod ?

// Spojený príspevok 13.11.2015 1:15

To bem je toto http://www.vzhurudolu.cz/prirucka/bem ?

CSS reset neusúži primárne na to, aby boli okraje 0, slúži na to, aby boli rôzne veci rovnaké v rôznych prehliadačoch.

PS: Nepoznám nikoho, kto by pri CSS používal ten štýl BEM názvov (a ani som nevidel žiadny väčší projekt, ktorý by to používal).

LukIneskoNR: ano, presne to. len v tom clanku je to trochu light.

chrono: u nas vo firme sme na to pred casom presli a je to dobre, odporucam. a hlavne pri velkych projektoch.
je to semanticke, lepsie organizovane, v scss nemas x indentacii, vo vyslednom css nemas x selectorov ale iba jeden takze vysledne css je ovela 'krajsie' a prehladnejsie.

Tak to skusim cize ten css reset je nato proste kwd ho dam do tochto tak v kazdom pc ukaze stranku rovnako ze ? A tie texty su dobre potriedene ked kazdy je inam stylom. Span som dibre pouzil ?

hatto13, hlavne pri veľkých projektoch by som rád videl potom ten refaktoring... Indentácia v scss vzťah podľa mňa znázorňuje grafickou formou omnoho lepšie.
Nehovoriac o tých paskviloch, ktoré bem.info odporúča, viď napr "owner-name_mod-name_mod-val" .
Alebo toto "<span class="menu__item menu__item_visible menu__item_type_radio"></span>".
Ak je toto čitateľnejšie a prehľadnejšie tak už vážne neviem...

Ako môže niekto preferovať



pred týmto:


?

Maximálne sa tým nafúknu zdrojáky nielen css, ale aj html. Vytvára sa tam explicitná väzba medzi elementami, čím sa úplne ničí znovupoužiteľnosť tried atď.


LukIneskoNR, css reset slúži na "vynulovanie" defaultných hodnôt prehliadačov. Každý prehliadač má totiž nejaké defaultné hodnoty pre elementy a css reset sa snaží nastaviť tieto hodnoty na nejakú jednotnú hodnotu. Je to len vytvorenie akoby čistého štartovacieho bodu, pričom ty ale potom potrebuješ dodať konkrétne hodnoty. Css reset ti nespraví to, že by sa magicky postaral o to, že nemusíš riešiť cross-browser kompatibilitu. Rozdiely sa tým nezmažú a názory na používanie css resetu sa rôznia. Miesto správneho naštýlovania elementov najskôr aplikuješ css reset a potom tvoje štýly. Čo to spôsobuje je to, že to nafúkne stránku a aj debugovanie by som potom neoznačil za najpríjemnejšie, nakoľko v devtools prehliadačov ti vyskočia resety a nie len tvoje štýly.

Ides ma presviedcat o niecom ze nie je lepsie, ked si to este neskusil? ja som donedavna robil tak ako v druhom priklade, a potom som presiel na system bem a vidim v nom vyhody.

rozdiel je ten ze v tvojom pripade vysledne css vyzera (kludne spocitaj znaky ktore je viac nafuknute)
.snippets .item .title { }

a v prvom
.snippets__title { }

1. v scss mas maximalne 3-4 vnorenia
2. pozri si v tvojich projektoch, kolkokrat musis atributy takej triedu .title prepisovat, kedze predpokladam ze ju pouzivas casto a teda ti bude dedit. a teda vo vyslednom css mas o tolko pravidiel / riadkov naviac. alebo mas scss s X vnoreniami aby bolo vsetko izolovane. takze v pripade bem je css naopak kratsie a pri html tych par znakov naviac nevadi.

tu mas priklad http://www.levelshoedistrict.com kludne si pozri ako 'neprehladne' a 'nafuknute' je html alebo css.

Prosím vás hneď na začiatku som zastal jak ten obrázok zarovnám na stred skusal som margin 0 auto aj text-align a nic.

nastuduj si o css atributoch display . html elementy su bud typu block alebo inline. img je inline a a preto margin auto fungovat nebude, to funguje pri 'block' elementoch. pri inline pomocou text-align. ale text align sa nastavuje pre rodica, nie priamo pre element.

H1 je block element že ? A keď chcem dať h1 padding a background ako to urobím aby nebol na celu šírku rodiča?

nastavis mu nejaku sirku a vysku.
odporucam pisat taketo veci hned do google. prva stranka na vrchu bude stackoverflow kde je zodpovedane pre tvoje potreby vsetko. nemusis cakat na odpoved z fora..
just a tip, ked ta to bavi tu tak kludne

bud s tou sirkou alebo nastavis display: inline-block

Takže urobil som ďalšiu stránku ten nadpis hlavny som urobil cez width lebo ked dam inline-block nešlo zarovnať na stred a inač som nevedel. Len či to mám dobre a ako sa vkladá ten reset.css to skopirujem a dma do css alebo dam v html dalsi link na dalsie css ?