Cílem bakalářské práce je využít správných postupů při psaní objektově orientovaného CCS (OOCSS) kódu v HTML5 za pomocí metodiky BEM při vývoje frontendu. OOCSS je způsob, jak snadno psát srozumitelný kód, který se může použít hned několikrát, lehce spravovatelný a nezabírá v souboru příliš mnoho místa. Metodika BEM nám určuje postupy, které využijeme na správné pojmenovaní jednotlivých bloků, elementů nebo modifikátorů. Dohromady mají celkově zjednodušit práci při psaní kódu CSS nejen pro člověka, který ho píše, ale i pro další členy týmu. V rámci práce budu porovnávat psaní kódu CSS jako objektově orientovaného, výhody používaní metodiky BEM a nepoužití ani jednoho z postupů.
Výstupem práce bude webová prezentace obsahující použití OOCSS s BEM metodologií, časovou náročnost, datovou velikost a obtížnost pro vývojáře.
Anotace v angličtině
The aim of this thesis is to use the right approach when writing object-oriented CSS (OOCSS) code in HTML5 and using the methodology of BEM while developing frontend. OOSCC is a way to write easily understandable code which can be used multiple time is simple to manage and does not take much space. BEM methodology gives us an approach that is used to correctly name different blocks, elements or modifiers. Both of them together can be used to simplify writing CSS not only for the person writing it but also for everyone else on the team. In this thesis I will be comparing writing object-oriented CSS, benefits of using BEM methodology and not using either of these approaches.
The outcome of this work will be a web presentation consisting of OOCSS with BEM methodology, time consumption, data size and difficulty of development for developers.
Klíčová slova
CSS, OOCCS, BEM, frontend
Klíčová slova v angličtině
CSS, OOCCS, BEM, frontend
Rozsah průvodní práce
63 s.
Jazyk
CZ
Anotace
Cílem bakalářské práce je využít správných postupů při psaní objektově orientovaného CCS (OOCSS) kódu v HTML5 za pomocí metodiky BEM při vývoje frontendu. OOCSS je způsob, jak snadno psát srozumitelný kód, který se může použít hned několikrát, lehce spravovatelný a nezabírá v souboru příliš mnoho místa. Metodika BEM nám určuje postupy, které využijeme na správné pojmenovaní jednotlivých bloků, elementů nebo modifikátorů. Dohromady mají celkově zjednodušit práci při psaní kódu CSS nejen pro člověka, který ho píše, ale i pro další členy týmu. V rámci práce budu porovnávat psaní kódu CSS jako objektově orientovaného, výhody používaní metodiky BEM a nepoužití ani jednoho z postupů.
Výstupem práce bude webová prezentace obsahující použití OOCSS s BEM metodologií, časovou náročnost, datovou velikost a obtížnost pro vývojáře.
Anotace v angličtině
The aim of this thesis is to use the right approach when writing object-oriented CSS (OOCSS) code in HTML5 and using the methodology of BEM while developing frontend. OOSCC is a way to write easily understandable code which can be used multiple time is simple to manage and does not take much space. BEM methodology gives us an approach that is used to correctly name different blocks, elements or modifiers. Both of them together can be used to simplify writing CSS not only for the person writing it but also for everyone else on the team. In this thesis I will be comparing writing object-oriented CSS, benefits of using BEM methodology and not using either of these approaches.
The outcome of this work will be a web presentation consisting of OOCSS with BEM methodology, time consumption, data size and difficulty of development for developers.
Klíčová slova
CSS, OOCCS, BEM, frontend
Klíčová slova v angličtině
CSS, OOCCS, BEM, frontend
Zásady pro vypracování
Cílem bakalářské práce je představit možnosti využití správných postupů při psaní objektově orientovaného CCS (OOCSS) kódu v HTML5 za pomocí metodiky BEM při vývoji front-endu webu. OOCSS je způsob, jak snadno psát srozumitelný kód, který je možné použít i opakovaně, je lehce spravovatelný a nezabírá v souboru příliš mnoho datového prostoru. Metodika BEM určuje postupy, které lze využít ke správnému pojmenování jednotlivých bloků, elementů nebo modifikátorů. Tyto prvky společně zjednodušují práci při psaní CSS kódu nejen pro autora, který ho píše, ale i pro další spolupracující členy týmu. V rámci práce bude porovnána tvorba objektově orientovaného CSS kódu s využitím metodiky BEM s klasickým postupem bez použití uvedených technologií. Výstupem práce bude webová prezentace, vytvořená s využitím OOCSS s BEM metodologií, bude otestována časová náročnost, datová velikost a obtížnost práce pro vývojáře.
Zásady pro vypracování
Cílem bakalářské práce je představit možnosti využití správných postupů při psaní objektově orientovaného CCS (OOCSS) kódu v HTML5 za pomocí metodiky BEM při vývoji front-endu webu. OOCSS je způsob, jak snadno psát srozumitelný kód, který je možné použít i opakovaně, je lehce spravovatelný a nezabírá v souboru příliš mnoho datového prostoru. Metodika BEM určuje postupy, které lze využít ke správnému pojmenování jednotlivých bloků, elementů nebo modifikátorů. Tyto prvky společně zjednodušují práci při psaní CSS kódu nejen pro autora, který ho píše, ale i pro další spolupracující členy týmu. V rámci práce bude porovnána tvorba objektově orientovaného CSS kódu s využitím metodiky BEM s klasickým postupem bez použití uvedených technologií. Výstupem práce bude webová prezentace, vytvořená s využitím OOCSS s BEM metodologií, bude otestována časová náročnost, datová velikost a obtížnost práce pro vývojáře.
Seznam doporučené literatury
BEM [online]. Moskva: Yandex, 2017 [cit. 2018-04-05]. Dostupné z: https://en.bem.info/
Get BEM [online]. BEM?- Block Element Modifier, 2018 [cit. 2018-04-05]. Dostupné z: http://getbem.com/
OOCSS: objektové psaní CSS. Vzhůru dolů [online]. Praha: Martin Michálek, 2017 [cit. 2018-04-05]. Dostupné z: https://www.vzhurudolu.cz/prirucka/oocss
BEM: Pojmenovávací konvence pro třídy v CSS. Vzhůru dolů [online]. Praha: Martin Michálek, 2017 [cit. 2018-04-05]. Dostupné z: https://www.vzhurudolu.cz/prirucka/bem
An Introduction To Object Oriented CSS (OOCSS). Smashing magazine [online]. Freiburg: Smashing Media, 2011 [cit. 2018-04-05]. Dostupné z: https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/
Seznam doporučené literatury
BEM [online]. Moskva: Yandex, 2017 [cit. 2018-04-05]. Dostupné z: https://en.bem.info/
Get BEM [online]. BEM?- Block Element Modifier, 2018 [cit. 2018-04-05]. Dostupné z: http://getbem.com/
OOCSS: objektové psaní CSS. Vzhůru dolů [online]. Praha: Martin Michálek, 2017 [cit. 2018-04-05]. Dostupné z: https://www.vzhurudolu.cz/prirucka/oocss
BEM: Pojmenovávací konvence pro třídy v CSS. Vzhůru dolů [online]. Praha: Martin Michálek, 2017 [cit. 2018-04-05]. Dostupné z: https://www.vzhurudolu.cz/prirucka/bem
An Introduction To Object Oriented CSS (OOCSS). Smashing magazine [online]. Freiburg: Smashing Media, 2011 [cit. 2018-04-05]. Dostupné z: https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/
Přílohy volně vložené
1 DVD ROM, Webová stránka: http://home.pf.jcu.cz/ smrzja02/