aalto1 untyped-item.component.html
Survey of styling approaches for the web
Loading...
Files
Aalto login required (access for Aalto Staff only).
URL
Journal Title
Journal ISSN
Volume Title
Perustieteiden korkeakoulu |
Bachelor's thesis
Electronic archive copy is available locally at the Harald Herlin Learning Centre. The staff of Aalto University has access to the electronic bachelor's theses by logging into Aaltodoc with their personal Aalto user ID. Read more about the availability of the bachelor's theses.
Unless otherwise stated, all rights belong to the author. You may download, display and print this publication for Your own personal use. Commercial use is prohibited.
Authors
Date
Department
Major/Subject
Mcode
SCI3027
Degree programme
Language
en
Pages
41
Series
Abstract
Cascading Style Sheets (CSS), a style sheet language used to describe the presentation of web pages, holds a fundamental role in styling the web. However, developing CSS code can be challenging due to its unique and complex logical aspects, in addition to the several shortcomings in the design of the language. To alleviate the limitations of CSS, many other styling approaches have emerged with the goal of making web page styling easier by providing features extending the capabilities of standard CSS.
Different styling approaches for the web, including standard CSS, have not been thoroughly studied in academic research. To fill this research gap, this thesis examines CSS and five other styling approaches through a literature review. The aim of this research is to discover what are the advantages of each of these five approaches over standard CSS. The thesis focuses on the following styling approaches: preprocessors, BEM (Block Element Modifier), utility-first CSS, CSS-in-JS, and CSS Modules.
Through the evaluation of these styling approaches, the study identified five concrete CSS challenges that can negatively affect web development. These challenges are: global scope, naming collisions, code duplication, dead code elimination and specificity wars. While each of the five reviewed styling approaches were able to solve at least one of these identified challenges, three approaches solved all of them. These abilities form the advantages of the approaches. However, the approaches significantly differ from each other, solving the challenges mostly in unique ways.
Styling approaches that extend the capabilities of CSS can be beneficial for web development, especially in complex and large-scale applications. Currently, a diverse selection of options exist to styling websites. Still, standard CSS remains a fundamental technology in styling the web, and it would benefit from more academic research.
Cascading Style Sheets (CSS) on verkkosivustojen esitystavan määrittelemiseen käytetty tyylisivujen kieli, jolla on perustavanlaatuinen rooli webin tyylittelyssä. CSS-koodin kehitykseen liittyy kuitenkin useita haasteita johtuen kielen kehittyneiden mekanismien puutteesta sekä sen uniikeista ja monimutkaisista loogisista piirteistä. Tämän vuoksi useita muita verkkosivustojen tyylittelyyn tarkoitettuja lähestymistapoja on kehitetty, tavoitteenaan helpottaa tyylittelyä tarjoamalla CSS:n kyvyt ylittäviä ominaisuuksia.
Verkon erilaisia tyylillisiä lähestymistapoja, mukaan lukien CSS:ää, ei olla merkittävästi tutkittu. Täyttääkseen tätä tutkimusaukkoa, tämä kandidaatintyö tutkii CSS:ää ja viittä muuta verkon tyylittelyyn tarkoitettua lähestymistapaa kirjallisuustutkimuksen muodossa. Työn tavoitteena on selvittää, mitä etuja lähestymistavat tarjoavat standardiin CSS:ään nähden. Lähestymistavat joihin tutkimus keskittyy ovat: esiprosessorit, BEM (Block Element Modifier), atominen CSS, CSS-in-JS ja CSS Moduulit.
Lähestymistapojen katsauksen kautta tutkimuksessa identifioitiin viisi haastetta, jotka haittaavat CSS-koodin kehitystä. Nämä haasteet ovat: globaali luonne, nimitörmäykset, käyttämättömän koodin eliminointi, koodin kopiointi sekä spesifisyyssodat. Tutkituista lähestymistavoista jokainen pystyy ratkaisemaan ainakin yhden näistä haasteista ja kolme pystyvät ratkaisemaan ne kaikki. Nämä kyvyt ratkoa kyseisiä haasteita muodostavat lähestymistapojen edut standardiin CSS:ään nähden. Lähestymistavat eroavat kuitenkin toisistaan merkittävästi, ratkoen haasteita pääasiassa erilaisin keinoin.
CSS:n kykyjä laajentavat tyylilliset lähestymistavat voivat olla hyödyllisiä web-kehitykselle, etenkin kompleksisissa ja suuren mittakaavan applikaatioissa. Tällä hetkellä on olemassa suuri joukko erilaisia vaihtoehtoja verkkosivustojen tyylittelyyn. Standardi CSS on kuitenkin edelleen keskeinen teknologia verkkosivustojen tyylittelyssä ja se hyötyisi merkittävästi saadessaan enemmän huomiota akateemisessa tutkimuksessa.