Nye konsepter i front-end webdesignarkitektur

Den front-end web design modellen har eksistert lenge nok til at forskjellige tanker, og til og med noen kontroverser har dukket opp om retningen, og måten vi kode våre CSS og HTML i dag.

Når det gjelder CSS, begynner vi å se en adskillelse av kode der innholdsstilene blir delt fra utseendet og stilene, og muligens utgjøre et skifte i måten vi planlegger vår utvikling for nettdesign i front. Basearkitekturen tar på seg en ny karakter der CSS-stilegenskaper ikke blir gjentatt i stilarket, men kodet en gang og gjort. Buzz-ord og uttrykk inkluderer HTML-semantikk, navngivningsmønstre i klassen, Object Oriented CSS (OOCSS), BEM-systemtilnærming, CSS Lint, skalerbar og modulær arkitektur for CSS, og mer.

Dette innlegget vil prøve å løfte frem flere nye konsepter fra den nylige bevegelsen til front-end webdesignarkitektur fra noen av menneskene som jobber med dem.

HTML5 kjeleplate, ren CSS og HTML semantikk

Nicholas Gallagher er Front-End Engineer på Twitter, som også bruker fritiden sin viet til åpen kildekode-programvare som Normalize.css, som gjør at nettlesere gjengir alle elementer mer konsekvent og i tråd med moderne standarder. Han bruker på samme måte tid på utvikling med HTML5 Boilerplate, den populære front-mal for å bygge nettsteder ved å bruke HTML5-standardmalen, som jeg fremhevet i denne bloggen for flere måneder siden.

Nicholas kjører også slags eksperimenter i "Laboratory", der du kan se på en rekke demonstrasjoner og prosjekter han har jobbet med. Han kjører eksperimenter på ting som CSS SUIT Utilities, CSS3 Social Sign-in Buttons og Pure CSS sosiale medieikoner, som bruker enkel, semantisk HTML uten tomme elementer, ingen unødvendige ekstraelementer, ingen JavaScript og ingen bilder. Figur B viser et eksempel.

Du må se den underliggende CSS for denne demoen for å sette pris på det arbeidet Gallagher har lagt ned i sin innsats; vil du se at alle sosiale medieikoner som vises over, er opprettet av rene CSS- og CSS3-egenskaper, ikke ett bilde eller en eneste linje med JavaScript eller jQuery brukes i opprettelsen og visningen av disse ikonene.

Hans nyere og tankevekkende innlegg med tittelen "Om HTML semantikk og front-end arkitektur" reiser temaet ikke bare HTML-semantikk, men komponenter i HTML og CSS, tilnærminger til navngivningsmønstre i klassen og HTTP-komprimering. Han fordyper også området innholdsuavhengige klassenavn, gjenbrukbare og kombinerbare komponenter, som er skalerbare for både HTML og CSS, og strukturerte klassenavn og navnemønstre. Han gir eksempler for å illustrere ideene sine.

SMACCS

Nettutvikler Jonathan Snook, har skrevet en bok om en designprosess han kaller SMACCS, som uttales som "smacks", og bedre kjent som Scalable and Modular Architecture for CSS : En fleksibel guide for å utvikle små og store nettsteder . Boken er tilgjengelig online og i flere e-boksformater å kjøpe; CAD-e-boken er tilgjengelig for $ 15 fra og med denne utskriften.

SMACCS er mer en retningslinje enn et faktisk rammeverk - det har ikke noe bibliotek med kode som kan lastes ned eller installeres; snarere er det en designprosess, slik at du kan passe en mer fleksibel utvikling til dine eksisterende nettsteder.

SMACCS-prosessen er organisert slik at du kan velge og velge hvilke deler du vil implementere. Seksjoner inkluderer kjernebegrepene for kategorisering av CSS-regler, basisregler, oppstillingsregler, modulregler, tilstandsregler, temaregler og endringsstatus.

SMACSS tar også opp temaer som dybde på anvendbarhet, velgerytelse, HTML5 og SMACSS, og prototyping. Disse og mange flere emner dekkes i boo, som inkluderer et vedlegg til formateringskode og tilleggsressurser.

OOCSS

Nicole Sullivan, en webutvikler og ytelsesingeniør hos Yahoo, har laget Object-Oriented CSS (OOCSS), som hun definerer som "en måte å skrive skalerbar, tilregnelig, vedlikeholdbar CSS", ikke et rammeverk, så mye som et "nytt språk. " I følge FAQ fra OOCSS wiki, består CSS-objekter av fire ting:

    1. HTML, som består av en eller flere noder til DOM,
    2. CSS-erklæringer om stilene for nodene som begynner med et klassens navn for innpakningsnoden,
    3. Komponenter som bakgrunnsbilder og sprites for display, og
    4. JavaScript-oppførsel, lyttere eller metoder som er assosiert med objektet.

      Hvis du er forvirret nå, ikke bekymre deg; som angitt i de vanlige spørsmålene, anses ikke hver CSS-klasse nødvendigvis som et objekt i seg selv, men kan bli en egenskap til en innpakningsklasse. Øvelsene gitt på oocss.org inkluderer:

      • Starter mal
      • Oppgave 1: Mal
      • Oppgave 2: Gitter
      • Oppgave 3: Modulmanipulasjon
      • Oppgave 4: Moduloppretting.

      Start med de to første øvelsene, som kan fullføres i Firebug, og så kan du laste ned den ferdige filen i begynnelsen av øvelse tre.

      Nicole ga også en presentasjon med tittelen "Our Best Practices Are Killing Us", som er tilgjengelig for visning på Slideshare. Hun fokuserer på å lage en bedre måte å skrive CSS på, og forklarer hvordan rotete CSS kan være et direkte resultat av vår verste beste praksis. Hun påpeker også behovet for å undersøke forutsetningene om beste praksis på nytt og holde øye med praktisk, skalerbarhet, tilgjengelighet, standarder og design. Presentasjonen peker på eksempler på CSS-duplisering på mange populære nettsteder som for eksempel Facebook, Salesforce, w3c og Alexa Top 1000-nettsteder.

      Tiden for å handle er nå, for ethvert nettsted å vokse og utvikle seg effektivt mange av de prøvde og sanne forutsetningene og basearkitekturen trenger å ta hensyn til fremtidige korrekturstrategier som vil sikre en skalerbar, standard, tilgjengelig, praktisk og fornuftig tilnærming til nettet design.

      © Copyright 2021 | pepebotifarra.com