Keskustelu: Yleinen keskustelu: Oikea koodaustyyli?

Hei, millä tavalla kirjoitatte esim. muuttujien nimet?

Esim.:

$iAmLate
$IamLate
$i-am-late
$i_am_late
$i_am_Late
$IamLate
$IAmLate
$iamlate

Hmm.. nyt ei tule muita mieleen paitsi $minaOlenLate .. tai $Mina-Olen_Myohassa .. elikkä onko vakiintunut jokin tietty tapa nimetä, tyyliin englanniksi, mahdollisimman lyhyt, mutta kuvaava, kamel case jne. jne. kiitän!

Yleensä kaikki pienellä, joskus alaviiva erottimena
$username, $page_name (vrt. "page.name")

Tietokannassa kaikki pienellä, id myös pienellä, joskus harvoin alaviiva erottimena sarakkeiden nimissä.
userid, messageid. Taulujen nimet aina monikossa messages, users

Tiedostojen nimet myös pienellä.

CSS:ssä kaikki pienellä, erottimena viiva (-) jos lapsi-elementti
Myös sisennys lapsi-elementeille.

#topbar {}
    #topbar-left {}

Funktioiden nimet kirjoitan puolestaan tähänTapaan();.
Lisäksi on varsin luonnollista aloittaa funktio jollain tekemistä kuvaavalla sanalla kuten getData(), deleteSometehing(), removeSomething().

Koodi on aina englanniksi. Mahdollisimman paljon pienellä kirjoittamista, alaviiva erottimena joskus. CSS:ssä tosin viiva ja funktioissa luettavuudenKannaltaNäin

Hmm.. onko tällä tyylillä nimeä? Mihin se perustuu..? näyttää joka tapauksessa ihan hyvältä ja loogiselta. Eli esim: $page_name ..mainitsemallasi tavalla ei niin kuin alla:

$page-name
$pageName

macroTykkääKirjoittaaMuuttujatTälläTavalla.

Itse teen näin.

Muuttujat:

int tassaJokuPitkaMuuttujaNimi = 0;

CSS:ssä yhdistelmä p99o:n tapaa ja tätä

Tiedostonimet:

tassa_joku_pitka_tiedostonimi.txt

Miksi nimeätte muuttujat eri periaatteella esim. PHP vs CSS ? Eli onko joku Zen-tyyli tai vastaava Framework tyyli, joka yleisesti web-ammattilaisten käytössä?

Mulla se riippuu lähinnä kielestä. Esim

C:

int funktio_a();
int muuttuja_b;

C++/Java/C#:

int funktioA();
int muuttujaB;
class LuokkaC {
...
};

Tervetuloa lukemaan tarpeettoman pitkää vastausta.

camelCase on vakiintunut käytäntö JavaScriptissä. jQueryllä laajennetuille muuttujille on vakiintunut dollari edessä.

var $window = jQuery(window);

CSS:ssä taas oli pitkään selainyhteensopivuusongelmienkin takia suositeltua käyttää väliviivaa luokkien nimissä, koska mm. alaviiva ei vaan joillakin selaimilla joskus muinoin toiminut. camelCase ei ole koskaan vakiintunut CSS:ssä. Ehkä yhtenä syynä voi pitää sitä, että näin CSS erottuu helposti JavaScriptistä. DOMin puolellahan CSS:n ominaisuudet muuttuvat camelCaseen, esim. background-color -> elementti.style.backgroundColor.

Nykyisellään CSS:ään on muotoutunut erilaisia käytäntöjä ja tilanne oikeastaan elää aika paljon juuri nyt. Yksi selkeästi suosiotaan nostanut käytäntö on BEM, jossa luokat ovat tyyliä lohko__elementti--määrite ja tämä mahdollistaa isoille tiimeille varsin tarkan ja yksiselitteisen yhteisen tavan tehdä CSS:ää. Etuina mm. ristiin vaikuttavien tyylien välttäminen ja pienenä sivuetuna luokat ovat ystävällisiä myös vanhojen selainten kanssa, joissa muut CSS-valitsimet voivat olla aika rajallisia (IE8 ja vanhemmat). Toisaalta taas lopputulos on aika class-täytteistä ja pitkälukuista HTML:ää, kun luokkien nimistä voi tulla pituudeltaan hirveitä.

BEMin pohjalta on jo ehtinyt kehittyä pidemmälle pohdittuja käytäntöjä, mutta en nyt ulkomuistista enää muista nimeltä. Nyt pidemmän aikaa BEMiä käyttäneenäkin täytyy todeta, että täysin puhdas BEM ei ole mieleen. Varsinkin HTML5 laajemman elementtivalikoimansa kanssa antaa mahdollisuuden määrittää tyyli tarkemmin elementin roolin mukaan jo ihan tagin perusteella. Ei ole enää lähes puhdasta divispanisoppaa, joihin luokkien määrittäminen on aika pakollista, että ne saa eroteltua toisistaan. Ja sitten on vielä yksi iso muutos CSS-maailmassa, joka on lähiaikoina tullut: esiprosessoijat kuten SCSS.

Niiden ominaisuuksia hyväksikäyttäen syntyy kohtalaisen helppolukuisia rakenteita kuten vaikka:

// kevyesti JavaScriptillä kuorrutettu välilehtikomponentti, joka
// säilyttää käytettävyytensä moderneilla selaimilla ilman JavaScriptiä
.tabs {
    // FYI: & on tässä yhtä kuin .tabs
    & > input {
        // piilota
    }
    & > .tabs-menu {
        & > ul {
            & > li {
                & > a {
                    & > label {
                        // for input-elementtiin
                    }
                }
            }
        }
    }
    // $x pitäisi olla silmukan sisällä, mutta vähän KISSiä tähän hätään
    & > input:nth-of-type($x):checked ~ .tabs-menu li:nth-of-type($x) {
        // valitun painikkeen tyyli
    }
    & > .tabs-wrapper {
        & > * {
            // välilehtielementti saa olla vaikka main, article, section, aside jne.
        }
    }
    & > input:nth-of-type($x):checked ~ .tabs-wrapper > *:nth-child($x) {
        // valitun välilehtielementin tyyli
    }
}

On nyt vähän pseudohko esimerkki, mutta näkee tuosta sen verran, että valitsimet pysyvät ihmiselle suht lyhytlukuisina ja CSS vastaa HTML:n rakennetta, mikä helpottaa elementtipuun havainnollistamista. Syntyvä CSS:hän on taas hyvinkin pitkälukuista, mutta pakattuna se haitta katoaa aika tehokkaasti.

Jotta CSS-maailmassa tapahtuu jatkossakin, mutta väliviivakäytäntö pysyy ja uudet asiat rakennetaan sen käytännön päälle.

Putka ei osaa värittää SCSS:ää. Nyyh.

Php:lla yleensä alotan kaikki pienellä ja seuraava 'sana' isolla, esim. $helloWorld.
C#:lla julkiset muuttujat ja funktiot aloitan isolla ja privaatit pienellä, esim. private string helloWorld ja public string HelloWorld.

...yksi hienoimmista postauksista putkan historiassa (suurkiitos Merri).. juuri jotain tällaista syvällistä pohdintaa haluaisin synnyttää, enkä riitaa siitä mikä on "oikea tyyli koodata", kiitos vielä kerran!

..tuota tuota, tekisi samaan hengen vetoon kysyä vielä että: Sass vai LESS, tältä Ruuneberiäkin etevämmältä kynä-Virtuoosilta ja toki kaikilta muiltakin? Olen itse opetellut Sass/Compass -käyttöä, vasta tämän joulukuun, mutta jo nyt ihmetellyt miten tyylitiedosto voi lyhentyä ja selkeentyä niinkin paljon. Varsinkin muuttujat, periyttäminen ja nestaaminen ovat tehneet vaikutuksen.

Alla esimerkki:

// Alaosa <footer>
footer {
	background-color: $whi;
	// Some
	.some {
		margin: 7px 0 0 10px;
		width: 24px;
		height: 24px;
	}
	.linkedin {
		@extend .some;
		background: url("../images/icon-linkedin-48.png");
		background-size: 24px 24px;
	}
	.twitter {
		@extend .some;
		background: url("../images/icon-twitter-48.png");
		background-size: 24px 24px;
	}
}

..ainoa outous tuossa esimerkissä on se että tuo background-size täytyy määritellä jotenkin tuossa samassa, eikä yllä, koska muuten en saa toimimaan oikein. Itse käytän CSS/SCSS -tiedostoissa tuota väliviivaa. Muuttujissa olen tehnyt 2 väriä $whi ja $bla, mutta muuten toki mieluiten jokin 'primary color -muuttuja' jne. Teen - mikäli ketään nyt kiinnostaa - niin tuon Foundation 5 Frameworkin varaan uusi kotisivujani.

Foundation 5 SCSS-esimerkki:

// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
$block-grid-media-queries: true;

Käytän erilaisia tyylejä kielestä ja projektista riippuen. En muistaakseni ole moneen vuoteen pohtinut valintaa alaviivojen ja väliviivojen tai kamelin välillä. Ajalle on parempaakin käyttöä.

late kirjoitti:

Muuttujissa olen tehnyt 2 väriä $whi ja $bla

Saavutatko jotain näillä lyhennyksillä? Miksei $white ja $black?

Muutenkin tuollainen nimeäminen on usein huono idea. Jos muuttujien arvot ovat #FFF ja #000, vakioiden käyttö olisin aivan yhtä selkeää (jos arvot ovat jotain muuta, nimet ovat suorastaan harhaanjohtavia). Esimerkiksi $footer-background-color kertoisi suoraan muuttujan merkityksen, ja värin vaihtaminen onnistuisi helposti muuttamalla pelkästään muuttujan arvoa. Nyt jos haluat vaihtaa footerin taustaväriä, joudut ensin tekemään uuden muuttujan $yellow ja lisäksi vaihtamaan nimeä muuttujan käyttöpaikoissa. Usein käy niin, että kiireessä muutetaan vain muuttujan arvoa, ja parin vuoden päästä ylläpitäjä hakkaa päättän seinään kun $whi on musta ja $bla on harmaa.

Hmm.. nuo musta ja valkoinen ovat ainoat (#fff, #000). Mutta olet varmaankin oikeassa, mietin hieman tuota muuttujan nimeämistä uudestaan.

Liekö kannattaa noin yksityiskohtaisia nimiä käyttää? En tiedä graafisesta suunnittelusta juuri mitään, mutta arvelen niin, että leiskassa kannattaa käyttää vain muutamaa pääväriä ja niiden ohella toista "muutamaa" korostusväriä. Usein varmasti halutaan säilyttää eri komponenttien välillä sama väri. "Footer background" kuulostaa aika epäintuitiiviselta nimeltä, jos samaa väriä käytetään useassa paikassa.

Henkilökohtaisesti en näe yhtä ainoa tapaa, joka olisi aina parempi kuin muut. Usein leiskat tehdään valmiin graafisen esityksen pohjalta, jolloin värit ja niiden käyttötarkoitukset on jo päätetty. Monesti on varmasti kätevämpää pystyä näkemään elementin määrittelyistä, että värinä on käytetty lightGreeniä tai darkBlueta link-hover-colorin tai button-3d-borderin sijaan.

The Alchemist kirjoitti:

Usein varmasti halutaan säilyttää eri komponenttien välillä sama väri. "Footer background" kuulostaa aika epäintuitiiviselta nimeltä, jos samaa väriä käytetään useassa paikassa.

Toki, mutta en jaksanut tehdä oletuksia laten näyttämän koodipätkän ulkopuolisista asioista. Pointtini oli vain se, että käyttötarkoituksen mukainen nimi on (usein) parempi kuin $white — samasta syystä kuin esimerkiksi int SIX = 6; on huono.

The Alchemist kirjoitti:

Monesti on varmasti kätevämpää pystyä näkemään elementin määrittelyistä, että värinä on käytetty lightGreeniä tai darkBlueta link-hover-colorin tai button-3d-borderin sijaan.

Itse olen aina pyrkinyt pitämään tässä välissä abstraktiotason, niin että värien vaihto onnistuu loogisesti. Voi olla, että se menee joissain tapauksissa turhan ylisuunnittelun puolelle.

Itse näkisin tuon värien nimeämisen abstrakteilla nimillä hyödyllisenä lähinnä silloin, kun on selvä tarkoitus tehdä useita eri väriversioita yhdestä ulkoasusta tai kun tehdään hyvin monimutkaisia sovelluksia tai geneerisempää kehystä itselle tai muille. Kun kyse on vanhan leiskan suurremontista eli käytännössä uuden leiskan tekemisestä, niin värikoodien helppo vaihtaminen on merkityksetöntä.

Alla Foundation 5 tapa nimetä ja hallita värejä:

// We use these as default colors throughout
$primary-color: yellow;
$secondary-color: brown;
$alert-color: red;
$success-color: green;
$warning-color: orange;
$info-color: silver;

..tästä lähtien en käytä enään $black tai $white -muuttujia, huonompi homma jatkokehityksen kannalta.