Epiecs

Pseudo css

Als webdeveloper kom je dagelijks in contact met css. Alhoewel css een mooie tool is, wordt er nog vaak gezondigd of zijn er sporadische excessen in het gebruik ervan.

Een van de grootste fouten die beginnende css gebruikers maken is het overvloedig gebruiken van classes en id's in elementen. An sich is dit niet zo een groot probleem wanneer je een pagina hebt zonder (veel) javascript in, of een pagina die niet door iemand moet beheerd worden die dreamweaver als 'cms' gebruikt.

Nu, ik hoor al enkele mensen hardop lachen met het feit dat dreamweaver als cms wordt gebruikt, en ikzelf vind dit ook niet bepaald de meest elegante optie, maar als je kijkt naar het gebruiksgemak voor de eigenaar van de site qua beheer zolang er geen interactieve elementen zijn, dan zie je dat dit soms wel een viabel alternatief is aan een web based cms.

Dit terzijde wil ik even de aandacht schenken aan de reden waarom ik deze blogpost schrijf. Mijn laatste project ( www.financieringhogeronderwijs.be ) is een statische site met 8 pagina's die met de hand moesten geschreven worden en een van de requirements was dat de website moest beheerbaar blijven door dreamweaver. Een van de problemen is dat wanneer je classes en id's toewijst aan een element. Op het begin kan de beheerder mooi copypasten, maar later in de levensduur van het project ga je html errors krijgen doordat sommige classes niet mooi worden mee overgecopypaste.

De oplossing hiervoor is psuedo css te gebruiken, css selectors en cleane html zonder id's of classes. Uiteraard mag je voor je hoofd-divs nog altijd id's en classes gebruiken, ik bedoel hier meer specifiek van geen enkele id of class te gebruiken in de content.

De hele content maakt in dit geval gebruik van standaard html tags zoals h2, p, quote, q, b, i ( ja ik weet dat b en i slecht zijn en ik hiervoor in de hel brand, echter plaatst dreamweaver deze tags ook, en de meeste web based wysiwyg editors ook), en andere tags... Een voordeel hiervan is dat je later niet veel problemen hebt met het valideren van je website voor section 508, wai en mobile readers daar je website nog altijd perfect werkt zonder de css. Dit is ook handig om bijv jquery elementen in te werken daar je niet de jquery code moet herschrijven om gebruik te maken van jouw classes en id's.

Eens je schone html hebt geschreven kan je css technieken gebruiken zoals de :first selector, recursieve elementen oproepen zoals bijv. #header a, etc... Voor een voorbeeld hiervan kan je altijd eens de website bekijken van financieringhogeronderwijs.be voor een overzicht van de gebruikte technieken.

Fat models

Nee, dit is geen reclame of oproep voor de nieuwste reclame van Nivea of Dove, maar een oproep aan alle mvc developers om eens te kijken naar hun eigen applicatie en te evalueren of zij wel zich aan het fat models paradigma houden.

Fat models houdt in dat de meeste dataverwerkingslogica in het model steekt, en de controller alles route naar de views.

In de meeste gevallen (en ik maakte mij hier op het begin ook schuldig aan), duwde ik zoveel mogelijk logica in mijn controllers en gebruikte ik mijn models vooral voor validatie en relaties te bouwen tussen de andere models in mijn applicatie. Het probleem hierbij echter was dat de onderhoudbaarheidsfactor (lang woord) van mijn applicaties hieronder leed.

Op het begin met een gewone website merk je hier niet zoveel van, maar als je later ajax calls hebt, of xml output etc..., dan word je nogal snel verstrengeld in spaghetticode.

Is het niet gewoon simpeler om ipv een ton controlercode gewoon een functietje aan te maken in het model dat deze data haalt zodat je deze gewoon kan gebruiken in de controller om zo alles door te passen naar de view? Bekijk jouw huidige applicatie eens en zie zelf eens waar het beter kan.