liu.seSök publikationer i DiVA
Ändra sökning
RefereraExporteraLänk till posten
Permanent länk

Direktlänk
Referera
Referensformat
  • apa
  • ieee
  • modern-language-association-8th-edition
  • vancouver
  • oxford
  • Annat format
Fler format
Språk
  • de-DE
  • en-GB
  • en-US
  • fi-FI
  • nn-NO
  • nn-NB
  • sv-SE
  • Annat språk
Fler språk
Utmatningsformat
  • html
  • text
  • asciidoc
  • rtf
Improving maintenance of CSS through structure and refactoring strategies
Linköpings universitet, Institutionen för datavetenskap.
2022 (Engelska)Självständigt arbete på avancerad nivå (masterexamen), 20 poäng / 30 hpStudentuppsats (Examensarbete)Alternativ titel
Förbättrat underhåll av CSS genom struktur och refaktoreringsstrategier (Svenska)
Abstract [en]

This study assesses how maintainability can be improved by manual and automatic refactoring strategies. Firstly, the structure of the CSS is important and CSS rules should conform to a certain order depending on their purpose. Secondly, dead code makes files unnecessarily large and more difficult to read. Removing dead code is an important step for improving maintenance. These refactoring strategies were taken from the book CSS Refactoring by Lindstrom. The refactoring strategies were tested on a large CSS code base from an ASP.NET application called AktiveraMera.

The structure was manually applied by following a step by step process where each CSS rule was classified and sorted into files and folders. For example, rules styling a specific button were put in a file which is then placed in the \emph{component-styles} folder. All these separate files are then concatenated into one file which is then minimized in order to keep it small when it is later served to the user. The divided structure makes it easier for developers to add new component-, structure-, or browser-specific CSS in the correct place. It also makes it easier to keep refactoring limited and the developer knows all rules that are relevant to a certain element are kept in the same place. The new structure introduced some visual regression. It is difficult to assess how much extra time it adds if all visual regression must be remedied, but some of the changes could probably be ignored while fixing the more egregious changes. Either way, some extra work needs to be done but according to interviewed developers it would probably be worth it. The assessment is that the new structure does improve maintainability.

The tool CSS-analyser was then used to find and remove duplicated CSS, a form of dead CSS code, in order to reduce the size of the CSS files. Smaller file size (fewer lines of code) is correlated to readability and by extent maintainability since it is less code to read through and understand. However, while the results did show a reduction in file size it did introduce a lot of very obvious visual regression which means a lot more work. In an industry setting there are often time constraints and if something adds more work it might not be a good strategy. The visual regression was akin to a broken website where the entire layout is changed, so it could not be ignored if it was used on the live application in question.

Maintainability can be improved by introducing some structure to the CSS code in the form of a folder structure with sorted and classified CSS rules. Removing dead CSS code is difficult to do automatically without introducing website breaking visual regression. It is much more important to make sure the structure of the CSS is good than to directly try to remove dead code, especially since the structure can make other refactoring strategies more effective.

Ort, förlag, år, upplaga, sidor
2022. , s. 51
Nyckelord [en]
CSS, Maintainability, Maintenance, Refactoring, Refactoring Strategies, Visual Regression, Dead Code, Refactoring Tools, CSS Structure
Nationell ämneskategori
Programvaruteknik
Identifikatorer
URN: urn:nbn:se:liu:diva-183733ISRN: LIU-IDA/LITH-EX-A--22/009--SEOAI: oai:DiVA.org:liu-183733DiVA, id: diva2:1646020
Externt samarbete
MindRoad AB
Ämne / kurs
Datavetenskap
Handledare
Examinatorer
Tillgänglig från: 2022-04-13 Skapad: 2022-03-21 Senast uppdaterad: 2022-04-13Bibliografiskt granskad

Open Access i DiVA

fulltext(7245 kB)772 nedladdningar
Filinformation
Filnamn FULLTEXT01.pdfFilstorlek 7245 kBChecksumma SHA-512
018c6991887f34a4c6984d00818759ebaca2512fc8a2075b9cd309b708f1eb4971ad59c3d7991753b6c5d3704d83930eb8eff33b35ef314ede09fc974c379f2c
Typ fulltextMimetyp application/pdf

Sök vidare i DiVA

Av författaren/redaktören
Rydfalk, Villiam
Av organisationen
Institutionen för datavetenskap
Programvaruteknik

Sök vidare utanför DiVA

GoogleGoogle Scholar
Totalt: 772 nedladdningar
Antalet nedladdningar är summan av nedladdningar för alla fulltexter. Det kan inkludera t.ex tidigare versioner som nu inte längre är tillgängliga.

urn-nbn

Altmetricpoäng

urn-nbn
Totalt: 733 träffar
RefereraExporteraLänk till posten
Permanent länk

Direktlänk
Referera
Referensformat
  • apa
  • ieee
  • modern-language-association-8th-edition
  • vancouver
  • oxford
  • Annat format
Fler format
Språk
  • de-DE
  • en-GB
  • en-US
  • fi-FI
  • nn-NO
  • nn-NB
  • sv-SE
  • Annat språk
Fler språk
Utmatningsformat
  • html
  • text
  • asciidoc
  • rtf