Share
CSS er et språk som brukes nesten hver utvikler på et tidspunkt. Selv om det er et språk som vi noen ganger tar for gitt, er det kraftig og har mange nyanser som kan hjelpe (eller skade) våre design. Her er tretti av de beste CSS-rutene som vil holde deg i å skrive solid CSS og unngå noen dyre feil.
Hvis du ikke er sikker på å implementere noen av disse tingene selv, kan du finne CSS-eksperter på Envato Studio å hjelpe deg. De kan fikse feil eller tilpasse nettstedet ditt for deg, og de er erfarne utviklere, slik at de følger beste praksis når du fullfører arbeidet.
CSS eksperter på Envato Studio Lesbarheten av CSS er utrolig viktig, selv om de fleste overser Hvorfor det er viktig. Stor lesbarhet av CSS gjør det mye enklere å vedlikeholde i fremtiden, da du vil kunne finne elementer raskere. Også, du vet aldri hvem som kanskje trenger å se på koden din senere.
.someDiv bakgrunn: rød; polstring: 2em; grense: 1 px solid svart;
.someDiv bakgrunn: rød; polstring: 2em; grense: 1 px solid svart;
Begge praksisene er helt akseptable, selv om du vanligvis finner at gruppen to forakter gruppe 1! Bare husk - velg den metoden som ser best ut til deg. Det er alt som betyr noe.
Under linjene med å holde koden din lesbar, sørger du for at CSS er konsistent. Du bør begynne å utvikle ditt eget "under-språk" av CSS som lar deg raskt nevne ting. Det er visse klasser jeg lager i nesten hvert tema, og jeg bruker samme navn hver gang. For eksempel bruker jeg ".caption-right" for å flyte bilder som inneholder en bildetekst til høyre.
Tenk på ting som om du vil bruke understreker eller bindestreker i ID-ene og klassenavnene dine, og i hvilke tilfeller bruker du dem. Når du begynner å lage dine egne standarder for CSS, blir du mye mer dyktig.
Noen designpurister scoff ved tanken på å bruke et CSS-rammeverk med hvert design, men jeg tror at hvis noen andre har tatt seg tid til å opprettholde et verktøy som øker produksjonen, hvorfor gjenoppfinne hjulet? Jeg vet at rammene ikke skal brukes i alle tilfeller, men mesteparten av tiden kan de hjelpe.
Mange designere har sine egne rammer som de har opprettet over tid, og det er også en god idé. Det bidrar til å holde konsistens i prosjektene.
Det er mindre et spørsmål om å gjenoppfinne hjulet, og mer et spørsmål om hvordan hjulet fungerer.
Hvis du bare har begynt med CSS, vil jeg personlig anbefale at du holder deg borte fra disse rammene i minst et år. Ellers vil du bare forvirre deg selv. Lær CSS ... og ta snarveier!
De fleste CSS-rammer har en tilbakestilling innebygd, men hvis du ikke skal bruke en da i det minste vurdere å bruke en tilbakestilling. Tilbakestiller i det vesentlige eliminere nettleserens uoverensstemmelser som høyder, skriftstørrelser, marginer, overskrifter, etc. Tilbakestillingen gjør at layoutet ditt ser konsistent ut i alle nettlesere.
MeyerWeb er en populær tilbakestilling, sammen med Yahoos utvikler tilbakestilling. Eller du kan alltid rulle din egen tilbakestilling, hvis det klyser din fancy.
Det er alltid fornuftig å legge stilarket ditt ut på en måte som gjør at du raskt kan finne deler av koden din. Jeg anbefaler et topp ned-format som takler stiler som de vises i kildekoden. Så, et eksempel stilark kan bestilles som dette:
/ ****** hovedinnhold ********* / stiler går her ... / ****** footer ********* / stiler gå her ...
Elementer i et stilark deler noen ganger egenskaper. I stedet for å skrive på forrige kode, hvorfor ikke bare kombinere dem? For eksempel kan h1, h2 og h3-elementene alle dele samme skrifttype og farge:
h1, h2, h3 font-familie: tahoma, farge: # 333
Vi kunne legge til unike egenskaper for hver av disse topptekstene hvis vi ønsket (dvs. h1 størrelse: 2.1em) senere i stilarket.
Mange designere lager deres CSS samtidig som de lager HTML. Det virker logisk å lage begge samtidig, men faktisk sparer du enda mer tid hvis du oppretter hel HTML mockup først. Begrunnelsen bak denne metoden er at du kjenner alle elementene i nettstedet ditt, men du vet ikke hva CSS du trenger med ditt design. Ved å lage HTML-oppsettet først kan du visualisere hele siden som en helhet, og lar deg tenke på ditt CSS på en mer holistisk, topp-ned måte.
Noen ganger er det fordelaktig å legge til flere klasser i et element. La oss si at du har en
Du kan legge til så mange klasser som du vil (rom skilt) til enhver erklæring.
Hvis du må returnere til HTML-en din for å endre presentasjonen (eller stylingen) til siden, gjør du det feil!
Doctype-deklarasjonen betyr mye om hvorvidt din markering og CSS vil validere. Faktisk kan hele utseendet på nettstedet ditt endres sterkt avhengig av DOCTYPE som du erklærer.
Lær mer om hvilken DOCTYPE du skal bruke på en liste fra hverandre.
Jeg bruker HTML5s doktype for alle mine prosjekter.
"Hva er fint med denne nye DOCTYPE, spesielt er at alle nåværende nettlesere (IE, FF, Opera, Safari) vil se på det og bytte innholdet til standardmodus - selv om de ikke implementerer HTML5. Dette betyr at du kan begynn å skrive websidene dine ved hjelp av HTML5 i dag, og få dem til å vare i veldig, veldig lang tid. "
- John Resig
Du kan krympe koden betydelig ved å bruke stenografi når du lager CSS. For elementer som polstring, margin, skrift og noen andre, kan du kombinere stiler i en linje. For eksempel kan en div ha disse stilene:
#crayon margin-left: 5px; margin-høyre: 7px; margin-topp: 8px;
Du kan kombinere disse stilene i en linje, slik som:
#crayon margin: 8px 7px 0px 5px; // henholdsvis topp, høyre, bunn og venstre verdier.
Hvis du trenger mer hjelp, er det en omfattende guide til CSS shorthand egenskaper.
På samme måte som et annet språk, er det en god ide å kommentere koden din i seksjoner. For å legge til en kommentar, legg ganske enkelt til / * bak kommentaren, og * / for å lukke den, slik som:
/ * Her er hvordan du kommenterer CSS * /
Blokkelementer er elementer som naturlig tømmer hver linje etter at de er erklært, spenner over hele bredden av ledig plass. Inline-elementer tar bare så mye plass som de trenger, og ikke tvinge en ny linje etter at de er brukt.
Her er lister over elementer som er enten inline eller blokkere:
span, en, sterk, em, img, br, input, abbr, akronym
Og blokkelementene:
div, h1 ... h6, p, ul, li, tabell, blockquote, pre, skjema
Selv om dette er mer en frivoløs tips, kan det komme til nytte for rask skanning.
# bomulls candy color: #fff; flyte: venstre; font-weight: høyde: 200px; margin: 0; polstring: 0; bredde: 150px;
CSS-kompressorer bidrar til å krympe CSS-filstørrelsen ved å fjerne linjeskift, hvite mellomrom og kombinere elementer. Denne kombinasjonen kan i stor grad redusere filstørrelsen, noe som øker hastigheten på leserlastingen. CSS Optimizer og CSS Compressor er to gode online verktøy som kan krympe CSS.
Det bør bemerkes at krymping av CSS kan gi gevinster i ytelse, men du mister noen av lesbarheten til CSS.
Du finner at det er visse stiler som du bruker om og om igjen. I stedet for å legge til den aktuelle stilen til hver ID, kan du opprette generiske klasser og legge dem til ID-ene eller andre CSS-klasser (ved hjelp av tips nr. 8).
For eksempel finner jeg meg selv ved hjelp av flyte: høyre og flyte: overlot en over i mine design. Så jeg legger ganske enkelt klassene .left og. Rett til stilarket mitt, og refererer det til elementene.
.venstre float: left .right float: right...
På denne måten trenger du ikke å hele tiden legge til "float: left" til alle elementene som må flyte.
Mange nybegynnere til CSS kan ikke finne ut hvorfor du ikke bare kan bruke flyte: senter for å oppnå den sentrale effekten på blokknivåelementer. Hvis det bare var så enkelt! Dessverre må du bruke
margin: 0 auto; // henholdsvis topp, bunn og venstre, høyre verdier.
å sentrere divs, avsnitt eller andre elementer i oppsettet ditt.
Når du starter, er det en fristelse å vikle en div med en ID eller klasse rundt et element og lage en stil for den.
Overskriftstekst
Noen ganger kan det virke lettere å bare opprette unike elementstiler som eksempelet ovenfor, men du begynner å rote stilarket ditt. Dette ville ha fungert bra:
Overskriftstekst
Deretter kan du enkelt legge til en stil til h1 i stedet for en forelder div.
Hvis du ikke har lastet ned Firebug ennå, stopp og gå gjør det. Alvor. Dette lille verktøyet er a må ha for enhver webutvikler. Blant de mange funksjonene som følger med Firefox-utvidelsen (feilsøkings JavaScript, inspiser HTML, finn feil), kan du også visuelt inspisere, modifisere og redigere CSS i sanntid. Du kan lære mer om hva Firebug gjør på den offisielle Firebug-nettsiden.
Unngå å bruke så lite nettleserespesifikke hack hvis det er mulig. Det er et enormt trykk for å sikre at designene ser konsekvent på alle nettlesere, men ved hjelp av hack gjør det bare designene dine vanskeligere å opprettholde i fremtiden. Plus, ved å bruke en tilbakestillingsfil (se # 4) kan du eliminere nesten alle gjengivelsesfeilene mellom nettleserne.
Absolutt posisjonering er et praktisk aspekt av CSS som lar deg definere hvor nøyaktig Et element bør plasseres på en side til det eksakte pikselet. Men på grunn av absolutt posisjonering er bort fra andre elementer på siden, kan layoutene bli ganske hårete hvis det er flere helt posisjonerte elementer som løper rundt oppsettet.
Text-transform er en svært nyttig CSS-egenskap som lar deg "standardisere" hvordan tekst er formatert på nettstedet ditt. For eksempel, si at du vil lage noen overskrifter som bare har små bokstaver. Bare legg til tekstomformingsegenskapen til topptekststilen slik:
tekst-transformer: små bokstaver;
Nå vil alle bokstavene i toppteksten være små bokstaver som standard. Tekst-transformer lar deg endre teksten (først bokstav aktivert, alle bokstaver aktivert, eller alle små bokstaver) med en enkel egenskap.
Ofte vil folk bruke et bilde for sin topptekst, og deretter bruker du display: ingen eller en negativ margin for å flyte h1 av siden. Matt Cutts, leder av Googles Webspam-team, har offisielt sagt at dette er en dårlig ide, da Google kanskje tror det er spam.
Som Mr. Cutts sier eksplisitt, unngå å skjule logoen din med CSS. Bare bruk alt-taggen. Mens mange hevder at du fortsatt kan bruke CSS til å skjule et h1-tag så lenge h1 er det samme som logo-teksten, foretrekker jeg å feile på den sikre siden.
Validering av CSS og XHTML gjør mer enn å gi en følelse av stolthet: Det hjelper deg med å raskt oppdage feil i koden din. Hvis du jobber med et design, og for en eller annen grunn ser det ikke ut akkurat, prøv å kjøre markup- og CSS-validatoren og se hvilke feil dukker opp. Vanligvis finner du at du har glemt å lukke en div et sted, eller et savnet semikolon i en CSS-eiendom.
Det har alltid vært en sterk debatt om det er bedre å bruke piksler (px) eller ems (em) når du definerer skriftstørrelser. Piksler er en mer statisk måte å definere skriftstørrelser, og ems er mer skalerbare med forskjellige nettleserstørrelser og mobile enheter. Med advent av mange forskjellige typer nettlesing (laptop, mobil, etc.) blir ems i stadig større grad standard for skriftstørrelsesmålinger, da de gir størst mulig fleksibilitet. Du kan lese mer om hvorfor du bør bruke ems for skriftstørrelser i denne gjennomtenkte forumtråden. About.com har også en flott artikkel om forskjellene mellom målstørrelsene.
Lister er en fin måte å presentere data på i et strukturert format som er enkelt å endre stilen. Takket være visningsegenskapen trenger du ikke å bruke listen som tekstattributt. Lister er også gode for å lage navigasjonsmenyer og ting av typen.
Mange nybegynnere bruker divs for å lage hvert element i listen fordi de ikke forstår hvordan de skal utnyttes riktig. Det er vel verdt innsatsen for å bruke pensel på læringslisteelementene for å strukturere data i fremtiden.
Du ser ofte navigasjonskoblinger som slik:
Hjem Om Tjenester Kontakt
Selv om dette teknisk sett vil fungere bra etter litt CSS, er det slurvet. Hvis du legger til en liste av lenker, bruk en uordnet liste, tullete gås!
Det er lett å legge ut ekstra selektorer til vårt CSS som clutters stilarket. Et vanlig eksempel på å legge til ekstra selektorer er med lister.
body #container .someclass ul li ...
I dette tilfellet, bare .someclass li ville ha jobbet helt fint.
.someclass li ...
Å legge til ekstra selektorer vil ikke bringe Armageddon eller noe av den typen, men de holder CSS fra å være så enkelt og rent som mulig.
Ulike nettlesere gjør elementer annerledes. IE gjør visse elementer annerledes enn Firefox. IE 6 gjør elementer forskjellig fra IE 7 og IE 8. Mens nettleserne begynner å følge nærmere W3C-standarder, er de fortsatt ikke perfekte (* hoste IE hoste *).
En av de viktigste forskjellene mellom versjoner av nettlesere er hvordan polstring og marginer gjengis. Hvis du ikke allerede bruker en tilbakestilling, vil du kanskje definere marginen og utfyllingen for alle elementene på siden, for å være på den sikre siden. Du kan gjøre dette raskt med en global tilbakestilling, slik som:
* margin: 0; padding: 0;
Nå alle elementene har en polstring og margin på 0, med mindre det er definert av en annen stil i stilarket.
Objektorientert programmering er separeringen av elementer i koden slik at de er lettere å opprettholde gjenbruk. Objektorientert CSS følger det samme prinsippet om å skille forskjellige aspekter av stilarket / -arkene i mer logiske seksjoner, noe som gjør CSS mer modulær og gjenbrukbar.
Her er en lysbildefremvisning av hvordan Objektorientert CSS fungerer:
Fra Nicole Sullivan.Hvis du er ny i CSS / XHTML spillet, kan OOCSS være litt av en utfordring i begynnelsen. Men prinsippene er gode å forstå for objektorientert programmering generelt.
Avhengig av designets kompleksitet og størrelsen på nettstedet, er det noen ganger lettere å lage mindre, flere stilark i stedet for et stort stilark. Bortsett fra at det er lettere for designeren å administrere, tillater flere stilark at du slipper ut CSS på enkelte sider som ikke trenger dem.
For eksempel kan jeg ha et valgprogram som ville ha et unikt sett med stiler. I stedet for å inkludere meningsmålingstastene til hovedformatarket, kunne jeg bare lage en poll.css og stilarket bare til sidene som viser avstemningen.
Hvis du legger merke til at designen din ser litt tøff ut, er det en god sjanse for at du har slått av en avsluttende
Accentsconagua