1. OOCSS - Object Oriented CSS. Polega na ustawianu styli domyślnych dla poszczególnych elementów, np. dla buttona i potem osobno styli szczegółowych, zmieniających poszczególne rodzaje buttonów, np: .btn { display: inline-block; text-align: center; border-radius: 3px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000; padding: 5px 10px; } .btn-primary { background: #47c4ff; } .btn-cancel: { background: #b5b5b5; color: #fff; } .btn-special: { background: #ff0000; font-size: 20px; } <button class="btn btn-primary">Submit</button> <button class="btn btn-cancel">Cancel</button> 2. BEM - Block Element Modifier. Opiera się przede wszystkim na poniższym podziale elementów na stronie na: - bloki - na przykład formularz albo menu - elementy - poszczególne elementy bloku takie jak: input czy przycisk formularza albo link w menu - modyfikatory - specyficzne warianty elementów: input o określonym zadaniu, przycisk “Anuluj” lub aktywny link w menu Zapisywanie klas odbywa się według schematu: .block - pierwsze słowo w nazwie oznacza, że klasa dotyczy danego bloku __element - słowo poprzedzone dwoma “podkreślnikami” oznacza, że dana klasa dotyczy danego elementu --modifier - słowo poprzedzone dwoma myślnikami określa kasę będącą modyfikatorem Więcej na stronie: https://www.nafrontendzie.pl/metodyki-css-2-bem