CSS VS SCSS - NielsPeeters96/weekly-nerd-2021 GitHub Wiki

In deze Minor leerden we eerst basis-CSS, hoe een webpagina op te maken, hoe te reageren op mediaquery's of flexbox / grid, maar we leerden over de daadwerkelijke implementatie. In de eerste aflevering kwamen we erachter dat het bedrijf SCSS gebruikt. Net als CSS en niet wetend of je CSS of SCSS moet gebruiken, onderzoekt dit artikel de sterke en zwakke punten van CSS en SCSS.

CSS

CSS is een stijltaal die wordt gebruikt door front-enders (ontwikkelaars) voor website-ontwikkeling. Het wordt gebruikt om de website aantrekkelijker te maken en het is een van de drie fundamentele sleutels van webontwikkeling, de andere twee zijn: Javascript en HTML.

Voordelen van CSS

  1. Consistentie: Iedereen die begint met webontwikkeling gaat CSS gebruiken en kent de basis van CSS, hierdoor is CSS de tool om overal op elke website te gebruiken.

  2. Eenvoudig: CSS leren is gemakkelijk te leren en vereenvoudigt de ontwikkeling van websites, alle CSS-code staat in één bestand en op dezelfde plaats.

  3. Snelheid: CSS is erg snel wanneer de browser laadt, het laadt de CSS eigenlijk eerder dan de rest, CSS is erg licht in gebruik omdat het de enige tekst is die is geschreven om iets aantrekkelijker te maken.

  4. Responsive: In 2021 is responsiviteit een must voor elke website, een website moet toegankelijk zijn vanaf elk type apparaat dat de gebruiker gebruikt.

  5. Crawl: CSS helpt bij het inschakelen van SEO voor uw site. Door CSS in uw webpagina's op te nemen, wordt het voor de zoekmachine gemakkelijker om uw pagina in het zoekresultaat te vinden Google SEO, Mobile first

Nadelen van CSS

  1. Er zijn veel versies van CSS zoals CSS1, CSS2, CSS2.1 & CSS3, als je nieuw bent in CSS, kan dit om te beginnen verwarring veroorzaken over wat voor soort versie het beste is.

  2. Cross-browser: als het in de ene browser werkt, betekent dit niet dat het in elke andere browser werkt, er zijn verschillende browsers die de CSS kunnen zien lezen, anders dan de andere browser, je hebt bijvoorbeeld een Chromium-browser en een 'Firefox browser' die geen chroombrowser is, kan de CSS verwarrend zijn voor de browser en iets anders weergeven dan de browser waarmee u aan het testen bent.

SCSS

Met SASS is het mogelijk om met behulp van variabelen kleuren en andere eigenschappen van de pagina vast te leggen en deze overal in de stylesheet te gebruiken. SASS-bestanden eindigen op .scss in plaats van op .css, maar worden met behulp van zogenaamde compilers vóórdat het in de browser verschijnt omgezet naar native CSS. Een browser kan zelf namelijk alleen overweg met CSS-bestanden; het is enkel tijdens de productiefase een handig hulpmiddel om snel, efficiënte code te schrijven. Meestal wordt een kleur in websites gedefinieerd met een hexadecimale code, zoals #FFFFFF voor wit, #000000 voor zwart en #96be28 voor Ambrero-groen.

Beschouw variabelen als een manier om informatie op te slaan die u wilt hergebruiken in uw stylesheet. U kunt dingen opslaan zoals kleuren, lettertypestapels of elke CSS-waarde waarvan u denkt dat u deze opnieuw wilt gebruiken. Sass gebruikt het $-symbool om van iets een variabele te maken. Hier is een voorbeeld:

Wanneer de Sass wordt verwerkt, neemt het de variabelen die we definiëren voor de $font-stack en $primary-color en voert het normale CSS uit met onze variabelewaarden in de CSS. Dit kan buitengewoon krachtig zijn wanneer u met merkkleuren werkt en deze consistent houdt op de hele site.

Voordelen van SCSS

  • Het geeft overzichtelijke bestanden, met leesbare code
  • Wijzigingen in de stijl van een website kunnen snel worden doorgevoerd
  • Tijdbesparing door complexe CSS-code achterwege te laten
  • Meerdere thema’s voor een website is een stuk eenvoudiger te realiseren
  • Een veel betere onderhoudbaarheid voor andere programmeurs

Nadelen van SCSS

  • Debuggen van SCSS is moeilijker als programmeren
  • Grotere CSS-bestanden, aangezien u verschillende SCSS-bestanden met elkaar kunt importeren, is alles ergens anders genest wat voor grotere CSS-bestanden kan worden gebruikt
  • Verlies van voordelen: het gebruik van Sass kan ertoe leiden dat de voordelen van de ingebouwde elementinspecteur van de browser verloren gaan

Eigen ervaring

Voor deze minor had ik nog geen ervaring met zowel SCSS en CSS. CSS was wel een taal waar ik van had gehoord maar SCSS niet. Uiteindelijk heb ik CSS toegepast en heb ik SCSS nooit gebruikt en me nooit in verdiept. CSS is ook de taal die ik het leukst vind die ik geleerd heb tijdens de Minor en waar ik me het fijnst in voel en het meest mee kan. In de toekomst wil ik me zeker nog verdiepen in SCSS en mezelf hier verder in ontwikkelen. Ik sta er ambitieus in dat als ik mijn opleiding afgerond heb mezelf programmeren ga aanleren en cursussen ga volgen over Frameworks, back-end developpen en SCSS.