CSS i SASS

Źle zaprojektowany interfejs może przeszkodzić użytkownikowi w znalezieniu potrzebanych informacji lub wykonaniu akcji. Dlatego ważne jest, aby stosować dobre praktyki przy projektowaniu interfejsów zgodnie z zasadami User Experience (UX) i User Interface (UI). Oto kilka kluczowych kwestii, które warto uwzglnić:

1. Nazwy klas CSS: Nazywaj klasy w sposób, który jest intuicyjny i opisowy. Używaj zasad SMACSS (Scalable and Modular Architecture for CSS), która proponuje system klasowania, będący odpowiedzią na potrzeby różnego skalowalności i modularności w stylach CSS. SMACSS dzieli stylizację na:

   • Primitives (Elementy): Klasy nazywane zgodnie z etykietami HTML, np .button, .input-field.
   • Modules (Komponenty): Bardziej specjalistyczne klasy, które definiują konkretny wygląd lub zachowanie, np .btn--primary dla przycisku głównego.
   • States (Stany): Klasy określające stany komponentów, np .btn--disabled.
   • Tyles (Style): Definiują one sposób wyświetlania wielu różnych elementów na stronie, np .font-size--large.
   • Base (Podstawa): Zasady oparte na normalizacji CSS, które definiują jednolite zasady dla całego projektu, np .m0 dla marginów ustawionych na 0.

2. Konsysja: Używaj spójnych nazewnictwa klas w całym projekcie. To sprawia, że kod będzie bardziej zarządzalny i leżący do zrozumienia dla innych programistów.

3. Zmienność: Umożliwiają stosowanie tych samych klas w różnych kontekstach, zależnie od potrzeb. Na przykład .btn może być używany dla różnych typów przycisków, ale z różnymi stanami (--primary, --secondary, --disabled itp.).

4. Skalowalność: Ułatwia to mocne i elastyczne projektowanie interfejsu, który będzie łatwy do modyfikacji w przyszłości.

5. Dokumentacja: Dodawaj komentarze do swojego kodu CSS, aby wyjaśnić, dlaczego dana klasa została stosowana w ten sposób i jak powinna być używana.

6. Responsive Design: Upewnij się, że interfejs jest odpowiednio dostosowany do różnych urządzeń i rozdzielczości ekranów. Użyj media query w CSS do adaptacji wyglądu do różnych środowisk.

7. Performance: Optymalizuj swoje style, aby obciążenie strony było minimalne. Unikaj zbyt dużych plików CSS i używaj sposobów zarządzania stylami, takich jak CSS Modules czy Styled Components, jeśli pracujesz w środowisku JavaScriptowe.

8. Aksesibilność: Uważna jest też aksesybilność, czyli możliwość używania interfejsu przez osoby z różnymi potrzebami, w tym osoby o ograniczonej zdolności wizualnej.

9. Praktyki Angular: Jeśli pracujesz z frameworkiem Angular, używaj jego narzędzi do stylizacji, takich jak Angular Material dla komponentów skorzystanych z Angular.

10. Współpraca: Pracuj w druku i udostępniany zarządzaniu kodem (np. Git), aby wszystkie zmiany były widoczne i dostępne dla innych członków zespołu.

Pamiętaj, że projektowanie interfejsów jest procesem iteracyjnym. Regularnie testuj swoje działanie w różnych przeglądarkach i na różnych urządzeniach, aby upewnić się, że interfejs jest intuicyjny, estetyczny i dostępny dla użytkowników.