Share
Zoals je zult hebben verzameld uit de vorige items in deze serie, gaat PostCSS helemaal over de plug-ins. De plug-ins die u kiest, zullen uw ervaring met PostCSS volledig definiëren.
Gezien het feit dat ze zo integraal en fundamenteel zijn, gaan we, voordat we doorgaan met het daadwerkelijk produceren van stylesheets via PostCSS, na hoe je het PostCSS-pluginecosysteem kunt verkennen. Hierdoor krijg je ook een beeld van hoe krachtig PostCSS is en hoe het functionaliteit biedt die niet op dezelfde manier kan worden gecreëerd via andere bestaande middelen.
We bespreken waar u naartoe kunt gaan om de nieuwste en beste plug-ins bij te houden, de categorieën waar deze plug-ins doorgaans onder vallen en overwegingen om al deze plug-ins op een logische manier in projecten te laden.
Naarmate je meer begint te werken met PostCSS, zijn er drie locaties waar je goed opletten voor het vinden van goede plug-ins.
De hoofdpagina van de Gitub-repo van PostCSS onderhoudt momenteel een uitgebreide gecategoriseerde lijst met plug-ins. Deze lijst wordt vaak bijgewerkt, dus het is een vrij betrouwbare plaats om te zien welke plug-ins beschikbaar zijn voor verschillende aspecten van ontwikkeling.
https://github.com/postcss/postcss#pluginsEen relatief nieuwe en zeer welkome toevoeging aan de PostCSS-wereld is de site postcss.parts, die een doorzoekbare catalogus van PostCSS-plug-ins biedt.
http://postcss.partsOp dit moment ziet PostCSS regelmatig nieuwe en interessante plug-ins verschijnen. De bovenstaande twee locaties markeren geen nieuwe plug-ins, dus in één oogopslag weet u niet of er items zijn die u nog niet eerder hebt gezien. Om die reden is het een geweldig idee om @PostCSS op Twitter te volgen of regelmatig te bezoeken.
https://twitter.com/postcssDe functionaliteit in plug-ins die met PostCSS kunnen werken is enorm, dus het is een goed idee om een inleiding te hebben tot het algemene types van plug-ins die u waarschijnlijk tegen zult komen voordat u een van hen gaat testen.
Het fundamentele kenmerk van PostCSS is dat het modulaire CSS-verwerking biedt. Daarom worden individuele plug-ins aangemoedigd om alleen een kleine, strak gedefinieerde set van functionaliteit te dekken. Megalithische multifunctionele plug-ins die alles tegelijk doen, zijn ontmoedigd.
Dat gezegd hebbende, soms wilt u wel een lange lijst met functies opnemen in een project en hoeft u liever niet twintig verschillende plug-ins te installeren en configureren. Dit is waar "packs" in het spel komen. Packs brengen verschillende modulaire plug-ins samen onder een thematische paraplu, zodat ze allemaal tegelijk kunnen worden geïnstalleerd en ingezet.
Het PreCSS-pakket combineert bijvoorbeeld negen afzonderlijke PostCSS-plug-ins om Sass-achtige functionaliteit te creëren. Het cssnano-pack gebruikt ongeveer twintig PostCSS-plug-ins om CSS-minificatie en -optimalisatie te bieden. Door deze pakketten te gebruiken, bespaart u uzelf om elk van de plug-ins handmatig te installeren en te laden.
Toekomstige CSS heeft alles te maken met het schrijven van syntaxis waarvan we weten dat deze in de W3C-specificatie verschijnt, maar mogelijk nog niet volledig wordt ondersteund in browsers.
U wilt bijvoorbeeld de aankomende acht- of viercijferige hexadecimale notatie kunnen gebruiken om ondoorzichtige kleuren te maken. Als u een enigszins transparant blauw wilt genereren, kunt u een kleurcode gebruiken # 0000ffcc, of zijn afgekorte vorm # 00fc, en voer de postcss-color-hex-alpha-plug-in uit om die in het breed ondersteunde formaat om te zetten rgba (0, 0, 100%, 0.8).
De meest prominente aanwezigheid in PostCSS toekomstige CSS is het cssnext-pakket, dat een groot aantal spec conforme toekomstige CSS naar de tafel brengt. Momenteel neemt ontwikkelaar Maxime Therouin het pakket echter mee in een belangrijke transitie van de werking ervan. Als zodanig houden we in vuur en vlam dat we u een toekomstige CSS-zelfstudie bieden totdat de overgang is voltooid.
Waar toekomstige CSS gaat over het maken van de code van morgen in de browsers van vandaag, gaat het voornamelijk om het maken van de code van vandaag in de browsers van gisteren. In een perfecte wereld zouden we nooit moeten denken aan oude en verouderde browsers, maar de realiteit is dat er nog steeds enkele projecten zijn waarvoor het ondersteunen van oudere browsers essentieel is. De fallbacks-categorie van PostCSS-plug-ins kunnen helpen waar dat het geval is.
Al deze plug-ins worden handsfree uitgevoerd, waarmee ik bedoel dat u uw code schrijft volgens de huidige normen, en de plug-ins zullen code vinden die oude fallbacks nodig heeft en deze automatisch invoegen indien nodig.
U kunt bijvoorbeeld platte kleuren toegevoegd hebben als fallbacks voor RGBA () kleuren door de plug-in postcss-color-rgba, of voeg voor IE8 compatibele fallbacks toe ondoorzichtigheid via de postcss-opacity plug-in. De meest bekende van deze plug-ins is Autoprefixer, die desgewenst voorvoegsels van leveranciers toevoegt, op basis van gegevens van CanIUse.com.
In deze reeks leert u meer over terugval-plug-ins in de komende handleiding 'Voor compatibiliteit met Cross-Browser-compatibiliteit'.
Taaluitbreidingsplugins voegen functionaliteit toe aan CSS die anders niet aanwezig zou zijn. Ter vergelijking: u zou kunnen overwegen dat de meeste preprocessors volledig uit taalextensies bestaan. In feite zullen gebruikers van Sass, Stylus en LESS zich waarschijnlijk redelijk thuis voelen met veel taaluitbreidingen van PostCSS, zoals degene die mixins, variabelen, conditionals, loops, nesting, verlenging enzovoort toevoegen..
Omdat PostCSS echter volledig flexibel is, zijn er ook taalextensies die functionaliteit bieden die niet vaak voorkomt in preprocessors. De postcss-bem-plugin voegt bijvoorbeeld een syntaxis toe specifiek voor het maken van CSS die de BEM / SUIT-methodologie volgt (meer hierover in een later zelfstudie). Met de invoegtoepassing postcss-define-property kunt u uw eigen aangepaste eigenschappen maken of native eigenschappen opnieuw definiëren. En met de plug-in postcss-match kunt u niet alleen voorwaardelijke woorden gebruiken, maar ook logica voor het matchen van patronen in uw code.
Met deze variëteit zijn alle indicaties dat PostCSS zal rijpen tot het punt waarop het een groot deel van de functionaliteit kan bieden waar velen van ons naar zoeken in preprocessors, maar ook met aanzienlijke functionaliteit die verder gaat dan dat.
Veel van de kleurenplug-ins die momenteel beschikbaar zijn voor PostCSS, hebben betrekking op het transformeren van kleuren van het ene formaat naar het andere, bijvoorbeeld uit # hex.a naar RGBA (), HCl (H, C, L) naar #rgb, of pantone aan #rgb. Daarnaast behandelen enkele van de handigste plug-ins kleurmanipulatie, zoals het mengen van twee kleuren of het schalen van de lichtheid of duisternis van hen.
Een bepaalde favoriet van mij geeft je de mogelijkheid om je bestaande kleurenschema te nemen en vervolgens een versie uit te voeren die lijkt op mensen met specifieke vormen van kleurenblindheid. Er gaat niets boven het ervaren van iets uit de eerste hand om u te helpen bepalen hoe toegankelijk uw ontwerpen zijn.
We zullen meer in detail ingaan op kleur-plug-ins in onze latere voorbewerkingen, stenografieën en "diverse goodies" tutorials.
Deze categorie plug-ins verwerkt veel optimalisatietaken, zoals het inpakken van Base64-gegevens, het genereren van CSS sprite-sheets en SVG-optimalisatie. U vindt ook verschillende andere soorten hulpmiddelen voor afbeeldingen en lettertypen, zoals automatische SVG naar PNG-conversie voor IE8, automatische WebP-beeldgeneratie en integratie voor ondersteunde browsers, @ Font-face snelkoppelingen, snelkoppelingen naar de retina-ondersteuning en meer.
De ontdekking dat grid-systemen kunnen worden geschreven in PostCSS, zonder dat voorafgemaakte stylesheets hoeven te worden geladen of preprocessor-mixins moeten worden gebruikt, was het eerste dat me echt opriep hoe krachtig PostCSS is. Ik had eerder gedacht dat PostCSS voornamelijk ging over het filteren en wijzigen van bestaande CSS, maar grid-systemen laten zien dat het kan worden gebruikt om hele bibliotheken met externe stijlen te maken.
Er zijn momenteel drie netwerksystemen beschikbaar voor PostCSS:
PostCSS-optimalisatie-plug-ins vallen in twee algemene categorieën: verkleining en codewijziging. Via deze plug-ins kunt u miniatuurtaken uitvoeren zoals stripping van witruimte en opmerkingen, en kunt u ook meer complexe aanpassingen laten uitvoeren zoals het combineren van overeenkomende mediaquery's, inlining @importeren stylesheets, het optimaliseren van lettertypen, het verwijderen van lege of dubbele regels, enzovoort.
We behandelen meer over deze categorie PostCSS-plug-ins in de komende handleiding 'Voor verkleinen en optimaliseren'.
Als preprocessor-gebruiker vond ik altijd een van de grootste voordelen de mogelijkheid om de hoeveelheid code te verminderen die ik moest doorschrijven met behulp van variabelen en mixins. Via PostCSS heb ik nog uitgebreidere middelen ontdekt om het schrijven van code efficiënter te maken via de lange lijst met beschikbare snelkoppelingen en steno-plug-ins.
U kunt kiezen om stenografie te gebruiken voor eigenschappen, bijvoorbeeld door uw eigen te definiëren of een bestaande steno te gebruiken, bijvoorbeeld w in plaats van breedte, h in plaats van hoogte enzovoorts. Je kunt uitvoeren @ Font-face code, transformeren code, driehoeken en cirkels allemaal op één regel elk. En u kunt allerlei soorten algemene taken afsnijden, waaronder koppelingstyling, centreren, clearfixing, positionering, dimensionering, spatiëring en uitvoer van kleurcodes.
We zullen dieper ingaan op deze plug-ins in de tutorial "Shortcuts and Shorthand".
PostCSS kan ook worden gebruikt voor meer dan het transformeren van CSS, het kan ook worden gebruikt om feedback te geven terwijl u uw CSS ontwikkelt. Sommige van de beschikbare plug-ins voor analyse en rapportage bevatten een linter voor BEM / SUIT-code, een plug-in om u een analyse van uw code te geven via CSSstats, "DoIUse" om u te laten weten hoe uw code overeenkomt met gegevens van Can I Use, en een Modernizr-bestandsgenerator.
Er zijn een aantal geweldige PostCSS-plug-ins die niet helemaal in een specifieke categorie passen, maar veel te goed zijn om over te dragen. We hebben bijvoorbeeld een nasynchronisatiehandleiding die automatisch een stijlgids genereert op basis van uw CSS. Er is ook de rtlcss-plug-in, gebruikt door WordPress, die een rechts naar links-versie van uw stylesheet genereert.
We zullen enkele van deze geweldige plug-ins bespreken in de zelfstudie "Diversen-goodies".
De categorie 'leuk' bevat bijvoorbeeld edelstenen als postcss-spiffing waarmee u de Britse spelling kunt gebruiken kleur in plaats van kleur, en welgemanierde syntaxis zoals !alsjeblieft in plaats van !belangrijk.
Het is onwaarschijnlijk dat een van de plug-ins van deze categorie wordt gebruikt in een echt project, maar een echt voordeel dat ze bieden is om op te treden als eenvoudig te begrijpen voorbeelden voor aspirant-ontwikkelaars van plug-ins. Omdat ze vrij eenvoudig en kort zijn, zijn ze perfect om naar binnen te kijken en de essentie te zien van hoe PostCSS-plug-ins worden gemaakt.
Een van de belangrijkste overwegingen die u moet maken bij het laden van de reeks PostCSS-plug-ins is de volgorde waarin u ze uitvoert. Je moet even pauzeren en nadenken over je lijst. Bepalen of de ene plug-in na de andere moet worden uitgevoerd om te doen wat je wilt.
U kunt bijvoorbeeld een plug-in gebruiken zoals postcss-simple-vars die ondersteuning voor variabelen toevoegt, en u kunt deze gebruiken om een RGBA () waarde zoals zo:
/ * broncode * / $ kleur: rgba (0, 0, 0, 0,5); .style achtergrond: $ kleur; / * compileert naar: * / .style background: rgba (0, 0, 0, 0.5);
Misschien wil je ook een plug-in gebruiken als postcss-color-rgba-fallback om een platte hexcode als fallback toe te voegen, waardoor je:
/ * compileert naar: * / .style background: # 000; achtergrond: rgba (0, 0, 0, 0,5);
In dit geval zou u moeten controleren of u de invoegtoepassing voor variabelen hebt uitgevoerd voor de fallback-plug-in.
Als u eerst de fallback-plug-in uitvoert, wordt deze gewoon gevonden achtergrond: $ kleur; in je CSS en niet weten dat er een was RGBA () waarde om mee te werken.
Echter, door eerst de variabelen in te pluggen, zal de fallback-plug-in die vinden achtergrond: rgba (0, 0, 0, 0,5); en ga door en voeg de vereiste fallback toe.
De laadvolgorde voor plug-ins is iets dat met elke set plug-ins zal veranderen, dus je zult misschien merken dat je soms een beetje moet experimenteren om alles goed te laten samenwerken.
Samenvattend met het verkennen van PostCSS-plug-ins:
We hebben onze "Snelstartgids" voor PostCSS voltooid en we zijn klaar om in de praktijk te stappen en een paar echte CSS-codes te produceren.
In de volgende zelfstudie zullen we beginnen met het gebruik van PostCSS om compatibele codes voor meerdere browsers te genereren door middel van automatische invoeging van voorvoegsels van leveranciers en een aantal terugval van eigenschappen met oudere browsers, met name IE8.
Tot ziens in de volgende zelfstudie!
Accentsconagua