Expert talks | Tailwind vs Bootstrap vs inline CSS

Er bestaat veel verwarring over de verschillen tussen Tailwind CSS, Bootstrap en inline CSS. We leggen uit wat het verschil is tussen Mixing Concerns en Separation of Concerns, waarom de drie CSS 'manieren' de moeite zijn om eens te bekijken en waarom ze niet hetzelfde zijn.

Utility-first CSS-framework versus inline CSS

Laat ons beginnen met Tailwind CSS. Tailwind is een utility-first CSS-framework dat bestaat uit verschillende classes die rechtstreeks te implimenteren zijn in de HTML opmaak. Om jouw design te realiseren, combineer je de verschillende classes met elkaar.

Veel frontend developers hebben twijfels over het utility-first CSS-framework, nog voordat ze er zelf mee aan de slag zijn gegaan. Sommige developers vergelijken dit met de tijden van font tags en align attributes - niet echt een tijd waar we naar terug willen. Daarnaast wordt het utility-first CSS-framework ook vaak vergeleken met en als hetzelfde gezien als inline CSS. Niets is minder waar, bij utility-first CSS kies je uit verschillende, bestaande classes terwijl je bij inline CSS telkens een waarde moet toekennen aan jouw HTML tag.

Tijd voor een voorbeeld! Hieronder zie je hoe inline CSS beide p-tags een andere font grootte geeft, terwijl er bij utility-first CSS een keuze is gemaakt voor text-sm en text-xs. Dit zorgt ervoor dat je bij utility-first CSS niet met 100 verschillende soorten groottes zit. Daardoor creëer je meer consistancy in jouw website design.

Wat is het verschil tussen Separation of Concerns en Mixing Concerns?

Bij het aanleren van de relatie tussen HTML en CSS wordt er vaak enkel gesproken over Separation of Concerns. Separation of Concerns zou de enige juiste manier van programmeren zijn en enkel dit zou semantisch correct zijn. Bij Separation of Concerns wordt er geprogrammeerd met de denkwijze dat de styling en de opmaaktaal gescheiden moet zijn. Dit zorgt echter voor beperkingen. Wanneer je Mixing Concerns toepast, de andere denkwijze en toegepast bij Bootstrap, zal je zien dat er een hele nieuwe wereld voor je zal opengaan. Verschil tussen beide? Bij Separation of Concerns is de CSS afhankelijk van de HTML en bij Mixed Converns is dit net omgekeerd.

In de code hieronder zie je een voorbeeld van Separation of Concerns (bij het onderdeel 'Bootstrap' vind je en voorbeeld over Mixing Concerns). Om de CSS classes te benoemen gebruiken we de BEM notatie.

Hoe zit Bootstrap in elkaar?

Als laatste hebben we dan nog Bootstrap waar men gebruikt maakt van Mixing Concerns. Er zijn al een hele hoop classes voor handen die jouw markup eruit gaan laten zien zoals de bepaalde stijl van de class die je het toewijst. Bootstrap is een CSS framework dat voor een super snelle omzet van jouw design kan zorgen. Een minpunt van Bootstrap is dat je de classes niet kan combineren zoals je bij een utility-first CSS framework wel kan. Je botst dus al snel op problemen dat bepaalde Bootstrap classes niet overeenstemmen met jouw design. Er bestaat wel een mogelijkeid om de standaard variabelen te overschrijven, maar zelf dan bestaat de kans dat je de Bootstrap CSS moet overschrijven met jouw eigen CSS waarden. Goede use-cases voor Bootstrap zijn dus cleane websites waar weinig design aan te pas komt.

Hieronder zie je een simpel voorbeeld van het gebruik van de card component van Bootstrap (Mixing Concerns).

Conclusie

Wat kunnen we hier nu uit concluderen? Het zit hem in de manier waarop je naar CSS kijkt. Utility-first CSS-frameworks benader je op een heel andere manier dan inline CSS of Bootstrap. Afhankelijk van wat jouw prioriteit is en of dat jouw project nood heeft aan reusable CSS of herstijlbare HTML. Ga je voor de vrijheid van een Utility-first CSS-framework, zoals Tailwind, of kies je voor voorgeprogrammeerde classes in Bootstrap? The choice is up to you, maar wij zijn vooral fan van utility-first CSS-frameworks & Bootstrap!