Metodyki w CSS

Czym jest metodyka ?

Metodyka CSS

W dzisiejszym artykule chciałbym przedstawić Ci dwie najczęściej używane metodyki w CSS czyli OOCSS oraz BEM.

Czym w ogóle jest metodyka ? 

Skrótowo jest to zbiór metod, ustandaryzowane dla wybranego obszaru podejście do rozwiązywania problemów. W naszym przypadku będzie to sposób tworzenia CSS – tak, aby mógł być on przejrzysty dla innych osób, a co najważniejsze dla Ciebie. W wielu przypadkach po jakimś czasie pisze do nas klient o drobną zmianę, nie zawsze wiążę się to z ingerencją w CSS, czasem jest to poprawienie kodu HTML, implementacja jakiś funkcji, jednak gdy zachowamy najważniejsze reguły pisania kodu, będziemy mogli w łatwy sposób się w nim później odnaleźć.

OOCSS (Object Oriented CSS) 

Jeśli kiedykolwiek miałeś styczność z jakimkolwiek językiem programowania myślę, że sama nazwa jest dla Ciebie o tyle intuicyjna, że z łatwością spodoba Ci się tego typu kod.

Zawsze staramy się, aby nasz kod był optymalny, a także zrozumiały – wyobraź sobie dość abstrakcyjną sytuację.

Na stronie chcesz umieścić trzy „bloki”, które będą reprezentowały tą samą grupę schematyczna np. przycisk, link. Spójrz na przykład poniżej:

Ten przykład ukazuję nam, jak wygląda owy sposób:

.button{
 width: 140px;
 height:40px;
 line-height:40px;
 display:inline-block;
 text-align:center;
 border: 2px solid rgba(0,0,0,0.5);
}


.button-red{
 background: red;
}


.button-blue{
 background: blue;
}
  1. Wychodzimy z założenia jakie cechy wspólne będą miały przycisk (od sposobu wyświetlania, po rozmiar fonta,koloru kończąc na marginach i paddingach
  2. Tworzymy klasę CSS rodzica, w tym przypadku button
  3. Przypisujemy style do „Rodzica/Obiektu głównego”
  4. Następnie deklarujemy klasy, o nazwie dziedziczącej z obiektu  np. button-red
  5. Do niego przypisujemy różnice, która będzie występować np. kolor

Wykorzystanie zdeklarowanych klas w HTML’u:

 <a href="#" class="button button-red">Czerwony przycis</a>
 <a href="#" class="button button-blue">Niebieski przycisk</a>

Jest oczywiście wiele więcej informacji odnośnie tej metodyki w internecie pod frazą Object Oriented CSS – zainteresowanych zapraszam do re searchu 🙂 !

BEM (Block Element Modifier)

W moim odczuciu jest to dobra alternatywa dla OOCSS. Jak sama nazwa dzieli się na :

  • bloki ( .blok )
  • elementy ( __element  )
  • modyfikatory ( –modyfikator )

Przykładowy wygląd kodu BEM:


.formularz{
 padding: 20px 10px;
 background: #fefefe;
 font-size: 1.2em;
 margin: 0 auto;
 max-width: 80%;
}

.formularz__input{
 padding: 10px 5px;
 border: 2px solid #000;
 background: rgba(0,0,0,0.2);
 outline: none;
}

.formularz__input--date{
 border: 2px solid green;
}

.formularz__button{
padding: 5px;
background: #000;
color: #fff;
}

.formularz__button--reset{
 background: red;
 color: #fff;
}

Użycie w html:

<form class="formularz" method="..">
     <input class="formularz__input" type="text" placeholder="imie">
     <input class="formularz__input formularz__input--date" placeholder="Wpisz datę*">
     <button class="formularz__button">Wyślij</button>
     <button class="formularz__button formularz__button--reset">Restartuj</button>
</form>

W wielkim skrócie:

  • Stworzyliśmy element blokowy o nazwie formularz
  • Następnie stworzyliśmy style dla „elementu” zagnieżdżonego w klasie formularz tj. input i button
  • Następnie przypisaliśmy im dwa modyfikatory warianty dla inputa jest to date, a dla buttona jest to reset, która nadała specyficzny wygląd owym elementom tak, aby mogłe one zostać wyróżnione
  • Ostatnim krokiem było stworzenie html’a, który mam nadzieję jest większości znany (zaczęliśmy od stworzenia formularza (blok), przypisania mu klasy, następnie stworzyliśmy dwa pola tekstowe oraz dwa przyciski, owym elementom przypisaliśmy poszczególne klasy, a na samym końcu przypisaliśmy odpowiednie modyfikatory

Jeśli chcecie poczytać więcej odnośnie metodyk zapraszam na stronę, która posiada dokładnie opisaną każdą metodykę (nafrontendzie.pl)

Strefa komentarzy