A CSS szabályok azok az utasítások, amelyek segítségével beállíthatjuk a weblapunk HTML elemeinek vizuális megjelenését, ezekhez szükségünk van valamilyen kiválasztásra, esetünkben most az Osztály alapú kiválasztásra.

Ezeket a ponttal (.) deklaráljuk. (hozzuk létre).

tipusszelektor .osztaly {tulajdonsag: ertek;}

Ha pedig több szelektorra (Type selector: h1) szeretnénk alkalmazni a stílust, akkor típus szelektor és class (Class Selector) csoportosítást kell végrehajtani, azaz vessszővel elválasztva felsorololjuk a kívánt szelektor class párosokat, ezzel átadva az adott stílusdeklarációt. pl.:

tipusszelektor .osztaly1, tipusszelektor .osztaly2 {tulajdonsag: ertek;}

Egy nagyobb projektben webfejlesztés során sok osztálynevet használunk, és ahogy a programozási nyelvekben az objektum osztályok nevei egyediek, értelmesek kellenek hogy legyenek, így itt is törekedni kell a szemantikusságra, értelmezehetőségre és arra, hogy az adott osztály neve irja le az adott element (html tag) tulajdonságát. Pl.

 <main class="content container">...</main>

Ez egy csomagoló elem amiben a fő content van, annak vannak property-jei. pl.:

main.content p {  color: #ddd; }

és:

 main.container {
  width: 80%;
  margin: auto;
  display: block;
}

Ezek a class nevek addig egyediek, amig nem emeljük be az adott projektet egy külsős projektbe, mert ott már előfordulhat névütközés, és akkor egymásra hatással lesznek a tulajdonságok. Ilyen esetekre javasolt a névtér csoportosítás, amikor egy adott egyedi classból hivatkozunk az összes többi class-ra a content-ben. pl.: Projekt weboldalának a neve VRT

<main class="vrt-content vrt-container">...</main>

  main.vrt-content .table {
  background-color: #ddd;
}

Viszont ha ezeket, mint egy library később is fel szeretnénk majd használni, másik projektben, ki lehet találni egy saját class nevet, ami a hozzánk tartozik. PL.: A weboldalam neve: geekrabbits.hu

<main class="gr-content gr-container">...</main>

Eleinte amikor tanultam a web alapjait, volt amikor percekig ültem egy blokk felett, hogy akkor milyen class nevet is adjak az adott HTML tag-nek.

Ilyenkor az a legjobb ha arra gondolunk hogy az adott elemünk mire kell nekünk. Általános programozásban pl. objektumorientált szemlélet mentén (OOP) a névtereket (namespace) is csoportosithatjuk és bővithetjük, és ott is pl felbontjuk az adott névtereket és elhelyezzük az objektum-osztályokat. Csak egy kis példa erre:

 namespace Kepernyok {
    class Felbontas { ... }
    class Szinmelyseg { ... }
 }

namespace Grafika {
    class Haromszog { ... }
    class Meret { ... }
 }

 Html-ben ugyanezt a logikát használjuk, amikor pl létre szeretnénk hozni az oldalon egy bal oldali menüt.

<aside class="sidebar">
 <nav class="sidebar-nav">
   <ul class="sidebar-navbar">
    <li class="sidebar-item">
       <a class="sidebar-nav-link" href="#">Text</a>
    </li>
    <li class="sidebar-item">
       <a class="sidebar-nav-link" href="#">Text</a>
    </li>
   </ul>
 </nav>
</aside>

Case-Sensitive (kis és nagybetű érzékenység)

A class és az id-kat azonositásra használjuk, ezért célszerű a beszédes nevekre törekedni, ill. az összetett szavakat class-ban és id-ban megkülönböztetni. pl: class: .nav-link, pl: id: #navLink

A HTML viszont nem case-sensitive, tehát nem fog hibát dobni, ha NaVlInK lesz a class nevünk. Viszont olvashatóság miatt ez borzalmas, :) de a HTML és a CSS együtt már case-sensitive.

Tehát ez hibás

<a href="#" class="NaVlInK">WARNING!</a>
a.naVlInK {color: red; background: yellow;}

ez pedig a jó:

<a href="#" class="NaVlInK">WARNING!</a>
a.NaVlInK {color: red; background: yellow;}

*Viszont ahogy fentebb is irtam, törekedjünk az olvashatóságra. *

Kódminőség, Kódolási konvenkciók (pl. naming conventions )

Amint fentebb is említettem ezek a megkötések inkább a magasabb színtű programozási nyelvekben fordulnak elő, de itt is vannak írott és íratlan szabályok amiket jobb bertartani, hogy minden hajszálunk megmaradjon a projekt végére. Tehát ne kezdődjön nagybetűvel, ne kezdődjön számmal, kötőjellel, használjunk angol neveket, hiszen angol az informatika közös nyelve, és kerüljük az ékezeteket etc..

De mi van a kötőjelekkel vagy az alsó aláhúzással? Ezeket használhatjuk, pl összetett szavaknál, vagy csoportoknál. Sok féle metodika van erre. PL. az egyik legelterjedtebb, amit pl az Angular is használ az SCSS fájljaiban (CSS továbbfejlesztése) az a BEM módszer.

A BEM alapvetése, hogy a felület összetartozó elemeit blokkokba csoportosítva összefogja. Erre a dupla aláhúzást határozza meg (__) a módszer.

pl.: HTML

<article class="article">
  <div class="article__title">…</li>    
  <div class="article__lead">…</li>
</article>

 .article {…}
 .article__title {…}
 .article__lead {…}

.article {
    […]
    &__title {…}
    &__lead {…}
 }

ITT MINDENKI AZT HASZNÁLJA, AMI A SZÁMÁRA A LEGJOBB, KÖVETHETŐBB, VAGY AMIT ÉPP A PROJEKT MEGKÖVETEL. :)

Szakirodalom a témában:

Bem naming conventions

Clean Code: A Handbook of Agile Software Craftsmanship, Robert C. Martin

vagy ugyanez magyarul:

Tiszta kód - Az agilis szoftverfejlesztés kézikönyve (Clean Code) Könyv, Robert C. Martin