CSS layout ja pelkkä layout

CSS-tyylien nimeämisellä on vaikutuksia arkkitehtuuriin, vrt BEM.

Asioiden nimeämiseen voi suhtautua huolimattomasti. Nimillä on kuitenkin ohjaava vaikutus, ja jos nimeämisessä ei ole riittävästi logiikkaa, on vaikea tunnistaa, mikä tekee mitäkin. Tämä pätee niin funktioihin, moduleihin kuin myös CSS tyyleihin.

Korjaillessani vanhan PHP sovelluksen ulkoasua osoittautui vaikeaksi tietää, vaikuttaako jokin tyylimäärittely muihinkin asioihin kuin siihen, jota juuri säädän. Siksihän on esimerkiksi BEM-metodologia kehitetty.

Havahduin kuitenkin sivun layout tyyliä uudistaessani siihen, että ensinnäkin, layoutin sekaan ei pitäisi työntää mitään muuta visuaalista ohjausta, vaikka se niin helposti sujuisi. Toinen oivallus liittyi nimeämiseen. Useimmat esimerkit layout-tyyleistä sisältävät tyylejä, joiden nimi on esimerkiksi ”footer”. Mutta kas, tuo nimi sisältää jo oletuksen siitä, mihin tuo olio sijoitetaan ruudulla! Samoin ”sidebar” ja moni muu vastaava. Siinä voi syntyä yllättäviä sekaannuksen mahdollisuuksia, kun ”sidebar” komentomenu halutaankin siirtää ruudun yläreunaan, tai vaikkapa dropdown valikoksi.

Anna layout-tyyleille nimet logiikan, ei sijoittelun mukaan, esimerkkinä tämä SASS määrittely.

// The classes for layout
// Do not call them "footer" or "sidebar" or such, because that is entirely defined by layout!
.layout {
    display: flex;
    flex-direction: row;
    // Take entire screen
    height: 100vh;
    width: 100vw;

    &__command-bar {
        height: 100%;
        flex: 0 0 170px; // Kiinteä leveys
        padding: 16px;
    }

    &__main {
        height: 100%;
        flex: 1; // Ottaa kaiken jäljelle jäävän tilan
        display: flex;
        flex-direction: column;
    }

    &__main-pre {
        width: 100%;
        padding: 16px;
        margin-bottom: 16px;
    }

    &__main-content {
        flex: 1; // Ottaa pääosan pystysuunnassa
        width: 100%;
        padding: 16px;
    }

    &__main-post {
        width: 100%;
        margin-top: 16px;
        padding: 16px;
    }
}

Vastaava twig template käyttää näitä tyylejä sitten näin

	<body>
		<div class="layout">
			<div class="layout__command-bar">
				{% include 'command_bar.html.twig' %}
			</div>
			<div class="layout__main">
				<div class="layout__main-pre">
					{{ notice }}
					{{ h1 }}
					{{ page_help }}
				</div>

				<div class="layout__main-content">
					{% block content %}
						{{ content }}
					{% endblock %}
				</div>

				<div class="layout__main-post">
					{{ copyright }}
					{{ contact_info }}
				</div>
			</div>
		</div>
	</body>

Tämä vapauttaa SASS/CSS koodin sijoittelemaan lohkot vapaasti.

Kun ajattelee nimeämisen selkeästi, tapahtuu samalla myös itse sovelluksen logiikan selkiytymistä. Ohjelmistoarkkitehtuurin keskeisiä toimia on varmistaa, etteivät niin sanotusti ”puhtaat ja likaiset vedet” mene sekaisin – eli että ”layout” nimisessä tiedostossa määritellään vain layouttia, ei värejä, javascriptejä tai muuta logiikkaa.

Selkeä puhe tuottaa selkeää koodia.