Par CSS selektoriem

Šorīt paskatos spogulī - kas tas par briesmoni man skatās pretī?

Ja jānostilo viena vienkārša lapa - piemēram, šī pati dienasgrāmata - rīkojamies ļoti vienkārši - sadalām lapu daļās/elementos/ķieģelīšos, katram no tiem piešķiram id vai class atribūtu (atkarībā no tā, vai atkārtojas, vai nē), un atsevišķā css failā katru daļu nostilojam.

Piemēram, šajā lapā varētu izdalīt unikālos, neatkārtojošos blokus - "header","footer","content" (josla, kurā iet ieraksti),"sidebar". No tiem, kas atkārtojas, mums šeit varētu būt klase "entry". Šeit nerodas nekādi īpaši jautājumi par elementu nosaukumiem - katru nodēvējam pēc tā, kas viņš ir un ko viņš attēlos.

Interesantāk ir ar lielām vietnēm ar daudziem atšķirīgi stilojamiem objektiem un ar css failiem ar kopējo rindiņu skaitu tūkstošos. Problēma ir - kā dēvēt jaunās klases?

Lasītajās css pamācībās (nevarētu teikt, ka es ļoti cītīgi rtfm, bet tāpat sanāk), parasti ir daudz un smalki runāts par tehniku - kā rakstīt selektorus, kādas viltības iespējamas ar katru html objektu utml. Nav necik daudz par to, kā būtu jādēvē css klases, vai jāspiež uz universālām, visās lapās izmantojamām klasēm, vai labāk taisīt katrai lapai specializētas. Viena lieta, kas gan visur tiek pieminēta - ja no jaunas klases veidošanas var izvairīties - to arī vajadzētu darīt. Un ka CSS ne par velti saucas "*Cascading* Style Sheets". Bet tas viss jau tikai loģiski.

Gudroju, kā tad būtu pareizi. Saturs - tas ir html markups, izskats - tās ir css definīcijas.

• Saturu no izskata jāatdala
• Saturs ir primārais - atkarībā no skatītāja (kāds pārlūks, kāds ekrāns, vai vispār ir ekrāns utml.) izskats atšķirsies, saturs nē
• Tā kā saturs ir primārais, izskatu jābūvē ap saturu, nevis otrādi. Saturam jābūt "self-contained", izskatam to jāpapildina.

Tālāk jau viss ir skaidrs. CSS klases jādēvē pēc tā, kam tās tiks pielietotas, nevis pēc tā, kā tās izskatīsies. Piemēram, ja vēlamies klasīti kaut kā īpaši svarīga uzsvēršanai (rādīsim sarkanā krāsā), to būtu jāsauc par "important" vai "attention" nevis par "red". Tad arī nesanāks smieklīgas situācijas, kad, ja vietnei ir vairākas vizuālās tēmas, piemēram, zilās tēmas CSSā stāv rakstīts - ".red { color: blue }".

Klases "left", "right", "center", "bold" utml. ir ļaunas (kaut arī pēc nosaukumiem ir skaidrs, ko tās darīs). Visas klases formā "i_will_make_my_element_look_this_and_that" ir ļaunas. Savukārt, klases "caution", "menu", "application_form" ir ļoti labas (kaut arī pēc nosaukumiem nav pārāk skaidrs, ko tās darīs). Vispārīgā formā - "i_will_be_used_in_that_specific_place".

Vēl paliek problēma ar milzīgo CSS apjomu. Kā, kopumā ņemot, būtu pareizāk darīt - rakstīt universālas, atkalizmantojamas klases (piem. "very_nice_table", "simple_box") vai katrai specifiskai vietai paredzētas (piem. "user_table", "login_box"). Pašlaik otrais variants šķiet pareizāks. Tad, CSS paliek diezgan apjomīgs (dalām pa vairākiem failiem), toties nav jezga ar to, ka, veicot izmaiņas CSS'ā lai salabotu vienu vietu, salaužu desmit citas. Un mazāk neglītu haku un workaroundu.

Un visgudrāk, laikam, būtu lietot abu variantu saprātīgu apvienojumu. Ļoti globālās un kādai objektu grupai kopīgās lietas (piem. krāsu un fonta izmēru) definējam globāli izmantojamās klasēs, bet specifiskākas lietas kā platumus un augstumus definējam katrā konkrētā vietā kā vajadzīgs.

Cerams, neko galīgi muļķīgu nesarakstīju.