Kateryna Mischenko, Principal HTML/CSS Developer & Competence Lead in the Design Department, presented her speech "Clean code – algorithms that everyone can understand".

1. CLEAN CODE:
algorithms that everyone can understand

2. Hi there
2
KATERYNA
MISHCHENKO
§ Principal HTML/CSS developer at Sigma Software
§ Competence Lead

3. § For newcomers to understand unfamiliar projects;
§ For team members to communicate effectively with each other;
§ Easily make small edits;
§ Quickly adapt to the changing requirements of the customer;
§ Replace technology without fear that everything will fall apart.
WHY IT’S IMPORTANT
3

4. GOOD HTML CODE
4
§ The simplest and most understandable code
§ Elegant solutions with nothing extra
§ Just solves the problem
The only measurements of code quality:
WTFs/minute
CODE INSPECTION CODE INSPECTION

5. Keep it simple, stupid (KISS) is a design principle which
states that designs and/or systems should be as simple
as possible. Wherever possible, complexity should be
avoided in a system — since simplicity guarantees the
greatest levels of user acceptance and interaction.
KEEP IT SIMPLE,
STUPID
5
WHAT IF THIS TASK
CAN BE SOLVED BY A FRAMEWORK

6. 6
IT’S CLEAR
Properly chosen CSS methodology and
relevant class naming

7. § It’s not about compatibility.
§ You should have a clear understanding how
each component of the module will work,
and what data will come.
It’s not enough to markup a module just
as it was designed.
IT WORKS
7
CSS
IT WILL GO!

8. CSS METHODOLOGIES

9. NOT ONLY BEM

10. 10
§ BEM - Block Element Modificator
§ OOCSS - Object Oriented CSS
§ SMACSS - Scalable and Modular
Architecture for CSS
§ ITCSS - Inverted Triangle CSS
§ Atomic CSS
SETTINGS
TOOLS
GENERIC
ELEMENTS
OBJECTS
COMPONENTS
TRUMPS
CSS METHODOLOGIES 2022
IT CSS

11. CSS FRAMEWORKS

12. MY TOP OF CSS FRAMEWORKS
12
Bootstrap
Foundation
Bulma
UIKit
Materialize
Tailwind
BONUS UI COMPONENTS LIBRARIES:
§ Bootstrap § Material design § Ant design

13. 5 RULES OF GOOD CODE

14. 14
If something goes wrong - most likely, it does not work in
your conditions, and you need to try something else.
ANY METHODOLOGY YOU CHOOSE
SHOULD SOLVE A SPECIFIC PROBLEM:
– TO SPEED UP DEVELOPMENT.

15. 15
NO NEED TO CHOOSE A METHODOLOGY,
FOR THE SAKE OF METHODOLOGY
Sometimes it happens that following the rules is elevated in the forefront
and becomes a problem for the project.
Since the development process somehow becomes more complicated –
endless disputes on code review on class naming, file separation, etc.
If it takes a lot of time for you to argue within the team, you need to get back to point 1.

16. 16
GOOD CODE SHOULD BE
UNDERSTANDABLE
By you, your entire dev team (from front-end to back-end)
even when you return to it in a year.

17. COOL HTML CODE
17
This is when the markup is implemented with a minimum sufficient elements.
I was taught that way and now I teach my team the same.
To clarify, this means that there are no unnecessary elements in your code, but there
are no such situations when so many different styles are hung on one DIV that any
change in the markup leads to a crash.

18. CSS IS ABOUT STYLES
18
Preprocessors are needed to manage variables, nesting and mixins.
The rest is anti-patterns.

19. THANK YOU FOR ATTENTION!