CSS Methodologies. Analysis of effectiveness and usability based on web page implementation

Praca omawia trudności w pisaniu i utrzymaniu CSS (kaskadowych arkuszy stylów, służących do nadawania określonego wyglądu elementom HTML) i sposoby radzenia sobie z tymi problemami – metodyki CSS. Celem pracy była dogłębna analiza i porównanie najpopularniejszych metodyk na podstawie wykonanej pracy praktycznej. Metodyki CSS to koncepcje tworzenia kodu, które umożliwiają jego łatwiejsze pisanie i utrzymanie. Po omówieniu podstawowych problemów i przeglądzie istniejących metodyk, zostało wykonane porównanie trzech popularnych metodyk – BEM, Atomic Design oraz CSS-in-JS. Na podstawie implementacji strony (portalu informacyjnego) te trzy metodyki zostały poddane dogłębniejszej analizie i porównaniu pod względem efektywności i użyteczności. Każda z porównywanych metodyk miała swoje mocne i słabe strony, zatem praca nie wskazuje jednej najlepszej metodyki, wykazuje natomiast, że korzystanie z metodyk i przemyślane tworzenie kodu, owocuje bardziej efektywną pracą i łatwiejszym utrzymaniem projektu w przyszłości.

The work presents difficulties with writing and maintaining CSS (Cascading Style Sheets that serve to add a certain look to HTML elements) and ways to deal with those problems – CSS methodologies. The purpose of the work was a deep analysis and comparison of the most popular methodologies. This analysis was based on practical work.CSS methodologies are the ways of creating code that makes code easier to write and maintain. After demonstrating common issues and presenting an overview of existing methodologies, I’ve made a comparison of three of them – BEM, Atomic Design and CSS-in-JS. Based on the implementation of a web page, these three methodologies were deeply analyzed and compared in terms of effectiveness and usability.Each of three methodologies has advantages and disadvantages, so the work doesn’t choose the best methodology, but it shows that using of methodologies and well-thought-through creating of code, makes work more effective and maintaining the project easier in the future.