Efficiënte, gestroomlijnde CSS ontwikkelen
CSS kan worden vergeleken met de gereedschapsset van een beeldhouwer; net als beeldhouwers op het werk, gebruiken we ontwerpers CSS om gestructureerde lay-outs van websites te maken.
In de loop van de jaren is dit proces meer georganiseerd geworden; er zijn regels opgesteld om de beste werkwijzen voor codering te creëren.
In dit artikel zullen we enkele ideeën bekijken die u kunt gebruiken bij het schrijven van stylesheets om uw code te versnellen.
Efficiënte CSS is gemakkelijk te beheren en gemakkelijk te lezen en kan een hulpbron zijn voor webontwerpers. Georganiseerd worden is een grote stap, maar het gebruik van CSS kan iets gecompliceerder zijn dan dat.
Houd bij het lezen van dit artikel rekening met uw eigen voorkeuren; het beste advies dat u van een ontwikkelaar kunt krijgen is om uw eigen manier van werken te vinden. Combineer enkele van de technieken hier met uw eigen methoden om het meeste voordeel te behalen.
Waarom zou u CSS willen stroomlijnen?
Veel ontwerpers verwarren front-end- en back-end-talen wanneer ze het hebben over parseercodes. CSS en HTML zijn front-end designtalen die worden gebruikt om elementen op een website te formatteren en op te maken. Bestanden worden gedownload en geparseerd door de browser van de bezoeker, wat betekent dat front-end code een aanzienlijke laadtijd heeft.
Door de browser gedownloade en geparseerde code kost tijd om te worden gelezen en berekend, net als code geschreven in back-end-talen (zoals PHP of Ruby). Gestroomlijnde CSS kan een website ten goede komen omdat het de laadtijden verkort en de structurering van de pagina-elementen versnelt.
De voordelen zijn misschien niet vanzelfsprekend bij moderne hogesnelheidsverbindingen en geavanceerde besturingssystemen. Misschien wilt u uw website in een mobiele browser bekijken om de laadtijden te vergelijken en te zien hoe de website wordt geladen.
Wanneer CSS op efficiënte wijze is gecodeerd, zou u de vorm en stijl van website-elementen moeten zien terwijl ze worden verwerkt. Dit kan er anders uitzien van browser naar browser, maar het gebeurt nog steeds. Hoe meer u de code van uw website test, hoe meer u het ziet.
Houd uw code gestandaardiseerd en eenvoudig. Als je je blog of persoonlijke website een paar maanden na de eerste ontwikkeling bijwerkt, is het veel gemakkelijker om met CSS-stijlen te werken dan met nieuwe. Aanpassen aan gevestigde normen helpt op de lange termijn.
Hoe te werken met efficiënte code
Om te beginnen met het coderen van stijlen met de grootst mogelijke efficiëntie, moet u een aantal nieuwe ideeën aannemen. Dit zijn standaard CSS-technieken die vandaag worden gebruikt door de beste internetwebsites en app-ontwikkelaars.
Houd uw code eenvoudig
Dit kan gemakkelijk over het hoofd worden gezien. Houd het eenvoudig bij het in kaart brengen van een reeks gegevens voor uw stijlen. Maak datasets in een kolomstack als dat nodig is.
Begin met het maken van een lijst met verschillende secties om aan te werken in uw stijlen. U kunt tekst, formulieren, lay-outvakken, kopteksten, voetteksten en alles wat u nodig heeft opnemen. Om echt georganiseerd te worden, kun je het opsplitsen in een paar bekende stijlen, zoals een id of class voor navigatielinks.
Deze eerste stap helpt bij het maken van een blauwdruk voor uw website met gewone woorden, voordat u in een stijltaal gaat. Naderhand is het veel eenvoudiger om te gaan zitten om code te schrijven; als je de bronnenlijst voor je hebt, kun je de code bijna bovenmenselijk uitstorten.
Houd codesblokken gescheiden en dun
Er is een voortdurend debat over hoe CSS-code moet worden geschreven. Toen ik voor het eerst begon, gebruikte ik bloknotatie omdat dit alles was wat ik ooit had gezien. Maar de enkelregelige notatie is veel sneller als het gaat om het parsen van tekst en het leesbaar maken ervan.
Ik pleit niet voor het negeren van block-style CSS-verre van dat. Wanneer je te maken hebt met een belangrijk element of id die zes of zeven belangrijke eigenschappen bevat, zal het gemakkelijker zijn om het in geblokkeerde vorm te houden. Je isoleert de belangrijke delen van je stijl, waardoor ze in één oogopslag gemakkelijker te vinden zijn.
Het lezen van lange stijlen in bloknotatie is ook gemakkelijker omdat de meeste teksteditors lange regels omwikkelen, en het lezen van eigenschappen / waardeparen kan verwarrend worden wanneer u er 10 of meer hebt om door te gaan. Omdat je de webontwerper bent, moet je een beroep doen op de CSS-code. Houd de efficiëntie in het achterhoofd en gebruik uw gezond verstand.
Werken met andere ontwikkelaars
Als u een professionele webontwerper bent of ernaar streeft om er een te zijn, is de kans groot dat u vroeg of laat met een team werkt. Dit kan een zegen zijn of een vloek, afhankelijk van het team.
Ontwerpers zijn vaak terughoudend om grote veranderingen in hun werk aan te brengen. CSS-code is een beetje anders, omdat je probeert een mooie lay-out te maken met alleen de waarden van eigenschappen, en bestanden kunnen rommelig worden wanneer ze tussen een paar handen worden doorgegeven. Blijf dus georganiseerd.
Reacties zijn een belangrijke hulp. Als regels of codeblokken anderen kunnen verwarren of misleiden, kunt u uren besparen. Leg alles wat je in de stylesheet plaatst zo elegant mogelijk uit.
Zorg dat er geen dubbele of toegevoegde stijlen worden overschreven. Stel je voor dat de h1 naar h4 de koppen zijn hoog in een CSS-document gestileerd, maar dan verandert een deel van de code hun lettertypen. Dit kan enorm verwarrend zijn voor iemand die de code niet heeft geschreven en nu de fout moet oplossen.
Communicatie is ook cruciaal. Je zou de meest efficiënte code kunnen schrijven, maar een gebrek aan communicatie zal je team doen mislukken. Concentreer u op de taak en werk met de creatieve ideeën die door het team gezamenlijk zijn geproduceerd (niet alleen die van uzelf).
Bijhouden van afzonderlijke CSS-documenten
Een andere manier om code schoon en georganiseerd te houden, is door stijltypen gescheiden te houden. Dit werkt goed voor grote websites waarop het niet realistisch zou zijn om alle stijlen in één document vast te houden.
Facebook is een goed voorbeeld. Het heeft waarschijnlijk veel verschillende stijlen voor al zijn verschillende pagina's: profiel, zoeken, registratie, foto's, etc. Als de stijlen allemaal in één bestand werden geconsolideerd, zou ik niet de man willen zijn die de code moet doorzoeken alleen maar om een eenvoudige bug repareren.
Facebook krijgt veel meer verkeer dan uw website, maar de principes zijn hetzelfde. Als organisatie een probleem is, kunnen afzonderlijke stylesheets een lange weg gaan. Webontwerpers organiseren vaak code op basis van het aspect van het document dat het structureert (bijv. Layout.css , text.css , forms.css ).
Niet alle stijlen hoeven op elke pagina te worden geladen. En hier ligt het voordeel: de methode maakt meer maatwerk mogelijk bij het bouwen van uw website. U kunt de analysetijd aanzienlijk verkorten door afzonderlijke weergaven en stijlen te maken.
Ondersteuning testen voor IE
Webontwikkelaars hebben Internet Explorer altijd als de slechterik geschilderd, vooral met CSS. Gelukkig kun je voorwaardelijke opmerkingen (die eruit zien als normale opmerkingen voor de meeste browsers) op de HTML toepassen.
U kunt deze gebruiken om stijlen toe te passen in Internet Explorer. Bekijk conditionele opmerkingen als u niet bekend bent met hen; ze kunnen van onschatbare waarde blijken te zijn als CSS-eigenschappen niet goed werken en je een alternatief nodig hebt.
Met de release van Internet Explorer 9 Beta , we komen een beetje dichter bij een verenigde internetervaring. Het enige probleem is het aantal mensen dat nog steeds browsers heeft die al zo oud zijn als IE6 en IE7, die ernstige verwerkingsfouten bevatten (vanwege gebrekkige rendering engines) en soms externe stijlen vereisen. Gelukkig is de ondersteuning verbeterd en Microsoft lijkt de zaken te veranderen.
Een inhoudsopgave toevoegen
Deze stap is optioneel, maar ik vind dat het wonderen doet voor mijn stylesheets. U kunt de tabel buiten het CSS-document zelf opslaan, maar ik heb ondervonden dat dit enigszins contraproductief is, vooral omdat het toevoegen van opmerkingen inline zo eenvoudig is.
De belangrijkste redenen om een inhoudsopgave in uw stijlen te plaatsen, zijn dat het de toegang vergemakkelijkt en het bewerkingsproces stroomlijnt. Plaats markeringen aan het begin van uw document om de code te scheiden in logische indelingen.
Het maken van je eigen sleutels is een goede benadering. Als u bijvoorbeeld van plan bent om uw tabel te splitsen volgens de hoofdgebieden van het document (opmaak, lettertype, koptekst, navigatie, enz.), Kunt u de secties met unieke tekens intoetsen.
Je zou kunnen gebruiken =!layout en =!font om de lay-out en lettertype secties af te bakenen. Waarschijnlijk kom je die exacte reeksen tekens overal in de code niet tegen, dus het toevoegen van deze aan zowel je tabel als het begin van elke opmerkingensectie moet veilig zijn. Gebruik vervolgens de zoekfunctie in uw teksteditor om naar de gewenste sectie over te gaan.
Dit is ook een goede strategie voor projecten waarin veel mensen naar de code kijken. Het houdt alles georganiseerd en toegankelijk.
Er zijn veel manieren om code te optimaliseren en efficiënter te maken, en deze tips zijn een goed begin. CSS evolueert en er worden veel nieuwe ideeën over opgebouwd.
Je hebt passie en toewijding nodig om het in de ontwerpindustrie te maken. Als je je passie voor digitaal ontwerp kunt vasthouden, moet het bijhouden van de CSS-best practices niet moeilijk zijn. Anderen bereiken in deze enorme wereldwijde gemeenschap van webontwerpers kan een grote hulp zijn; industrie-experts delen hun technieken en innovaties graag met anderen.
Dit bericht is exclusief geschreven voor Webdesigner Depot door Jake Rocheleau , een gepassioneerde webontwerper en liefhebber van sociale media. Jake houdt van lezen en schrijven over de nieuwste digitale en internettrends en netwerken met de ontwerpgemeenschap. Om meer over zijn werk te horen, vind hem op Twitter @ jakerocheleau .
Wat zijn uw methoden voor het stroomlijnen van CSS? Eventuele suggesties voor nieuwe CSS-ontwikkelaars? Welke nieuwe functies of extra ondersteuning zou u willen zien in toekomstige versies van CSS?