CSS-moduulit ja globaalit tyylit
Järjestäkää tyylinne paikallisen näkyvyysalueen tarjoavien CSS-moduulien avulla ja hallitkaa globaaleja tyylejä tehokkaasti.
CSS-moduulit ja globaalit tyylit on ilmainen Next.js 15 -täyden pinon verkkosovellukset-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Next.js 15 -täyden pinon verkkosovellukset-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Next.js 15 -täyden pinon verkkosovellukset-kurssilla on yhteensä 4 oppituntia.
Next.js-sovelluksen tyylittely
Tervetuloa tutustumaan Next.js:n tyylittelyyn! Visuaalisesti miellyttävien ja helppokäyttöisten käyttöliittymien luominen on tärkeää kaikissa verkkosovelluksissa.
Next.js tarjoaa tehokkaita ja joustavia tapoja tyylien hallintaan yksinkertaisista yleisistä tyylitiedostoista komponenttikohtaisiin ratkaisuihin. Tässä oppitunnissa tutustumme kahteen perustavanlaatuiseen menetelmään: CSS Modules -moduuleihin ja Global Styles -tyyleihin.
Globaalin CSS:n ongelma
Perinteisessä verkkokehityksessä kaikki CSS-tyylit ovat usein globaaleja. Tämä voi aiheuttaa ongelmia:
- Nimien ristiriidat: Sovelluksen kaksi eri osaa voivat käyttää samaa luokan nimeä, mikä johtaa tahattomiin tyylien ylikirjoituksiin.
- Ylläpidon vaikeus: Tyylin muuttaminen yhdessä paikassa voi vahingossa rikkoa asettelun tai ulkoasun jossain muualla.
- Eristyksen puute: Tyylejä ei ole sidottu suoraan komponentteihin, joihin ne vaikuttavat, joten niiden ymmärtäminen ja hallinta on vaikeampaa.
CSS Modules -moduulit luotiin ratkaisemaan nämä ongelmat!
Mitä CSS Modules -moduulit ovat?
CSS Modules -moduulit ovat tapa rajata CSS-tyylit paikallisesti luomalla luokille automaattisesti yksilölliset nimet. Yhden CSS Module -tiedoston tyylit vaikuttavat tällöin vain komponenttiin, joka tuo tiedoston käyttöönsä.
Keskeiset hyödyt:
- Ei ristiriitoja: Yksilölliset luokkien nimet estävät tahattomat ylikirjoitukset.
- Komponenttien eristys: Tyylit kapseloidaan komponenttiensa sisään.
- Helpompi ylläpito: Voit muuttaa tyylejä huoletta ilman sivuvaikutusten pelkoa.
CSS Module -tiedoston luominen
Voit luoda CSS Modulen Next.js:ssä nimeämällä CSS-tiedoston niin, että sen päätteenä on .module.css. Jos esimerkiksi tyylittelet painiketta, voit luoda tiedoston Button.module.css.
Tältä yksinkertainen CSS Module voi näyttää:
// app/ui/Button.module.css
.primaryButton {
background-color: #0070f3;
color: white;
padding: 10px 20px;
border-radius: 5px;
border: none;
cursor: pointer;
}
.primaryButton:hover {
background-color: #0056b3;
}CSS Modulen käyttäminen Reactissa
Kun käytössäsi on .module.css-tiedosto, voit tuoda sen mihin tahansa React-komponenttiin. Next.js käsittelee tyylit ja tarjoaa ne JavaScript-oliona.
CSS Module -moduulissa määritetyistä luokkien nimistä tulee tuodun olion ominaisuuksia. Esimerkiksi .primaryButton muuttuu muotoon styles.primaryButton.
Suorita tämä esimerkki nähdäksesi, miten komponentti tuo CSS Modulen käyttöön ja hyödyntää sitä. Next.js ottaa varsinaiset tyylit käyttöön koontiprosessin aikana.
// app/ui/PrimaryButton.js
import styles from './Button.module.css'; // Imports the CSS Module
export default function PrimaryButton({ text }) {
return (
// 'styles.primaryButton' uses the class from Button.module.css
<button className={styles.primaryButton}>
{text}
</button>
);
}
// How this component would be used in app/page.js:
// import PrimaryButton from './ui/PrimaryButton';
//
// export default function HomePage() {
// return (
// <div>
// <h1>My App</h1>
// <PrimaryButton text="Click Me" />
// </div>
// );
// }Globaalit tyylit Next.js:ssä
CSS Modules -moduulit sopivat erinomaisesti komponenttitason tyylittelyyn, mutta joidenkin tyylien on koskettava koko sovellusta. Näitä kutsutaan globaaleiksi tyyleiksi.
Globaaleja tyylejä käytetään esimerkiksi seuraaviin:
- CSS-nollaukset, kuten selaimen oletusasetusten yhdenmukaistamiseen.
- Perustason typografia, kuten
body-elementin oletusfontti ja rivikorkeus. - Koko sivun rakenteeseen vaikuttavat asettelutyylit.
- Aidosti globaalit apuluokat, kuten
.hidden.
Globaalien tyylien toteuttaminen
Next.js 15:ssä App Routeria käytettäessä globaalit tyylit tuodaan yleensä juuritason app/layout.js-tiedostoon. Näin ne ovat käytettävissä kaikilla sovelluksen sivuilla ja komponenteissa.
Luo ensin globaali CSS-tiedosto, jonka nimi on yleensä globals.css ja joka sijaitsee app-hakemistossa:
// app/globals.css
html, body {
padding: 0;
margin: 0;
font-family: system-ui, sans-serif;
background-color: #f8f8fa;
color: #333;
}
h1 {
color: #1a1a1a;
font-size: 2em;
margin-bottom: 0.5em;
}Tuot sen jälkeen tiedostoon app/layout.js, jotta nämä tyylit otetaan käyttöön koko sovelluksessa:
// app/layout.js
import './globals.css'; // Import global styles
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children} {/* All pages will be rendered within this layout */}
</body>
</html>
);
}
// A page (app/page.js) would then automatically inherit these styles:
// export default function HomePage() {
// return (
// <main>
// <h1>Hello, Global Styles!</h1>
// <p>This text uses the font and color defined in globals.css.</p>
// </main>
// );
// }CSS Modules ja globaalit tyylit: parhaat käytännöt
Hyvin järjestetyn Next.js-sovelluksen kannalta on tärkeää tietää, milloin kumpaakin tyylittelytapaa kannattaa käyttää:
- Käytä CSS Modules -moduuleja seuraaviin: komponenttikohtaiset tyylit. Jos tyyli kuuluu yhdelle komponentille, kuten painikkeelle, kortille tai navigointikohteelle, sen tulisi todennäköisesti olla CSS Module -tiedostossa.
- Käytä globaaleja tyylejä seuraaviin: koko sovelluksen oletusasetukset, nollaukset, perustason typografia ja pääasettelun rakenteet. Niitä käytetään tyyleihin, jotka vaikuttavat aidosti sovelluksen jokaiseen osaan tai määrittävät yhteisen perustason.
Molempien tapojen yhdistäminen mahdollistaa tehokkaan ja helposti ylläpidettävän tyylittelyn.
Tyylien yhdistäminen ja tarkkuus
Joskus sinun on käytettävä useita tyylejä tai ehdollisia tyylejä. Voit yhdistää CSS Module -luokkia tavallisiin globaaleihin luokkiin tai jopa sisäisiin tyyleihin:
import styles from './MyComponent.module.css';
function MyComponent({ isActive }) {
const activeClass = isActive ? 'global-active-class' : '';
return (
<div className={`${styles.container} ${activeClass}`} >
...
</div>
);
}Muista, että CSS:n tarkkuussäännöt ovat edelleen voimassa. Tarkemmat valitsimet, kuten tunnisteet ja sisäiset tyylit, ohittavat vähemmän tarkat valitsimet, kuten luokkien nimet.
Tyylien pikakertaus
Mitkä seuraavista Next.js:n tyylittelyä koskevista väitteistä ovat TOSIA?
Kertaus: onnistunut tyylittely
Olette hallinneet Next.js 15:n tyylittelyn perusteet!
- CSS Modules tarjoavat paikallisen näkyvyysalueen ja ratkaisevat globaalin CSS:n ongelman käyttämällä yksilöllisiä luokanimiä komponenttikohtaisiin tyyleihin.
- Global Styles -tyylejä käytetään koko sovelluksen oletusarvoihin, nollauksiin ja perusasetteluihin. Ne tuodaan yleensä tiedostossa
app/layout.js.
Yhdistämällä nämä kaksi tehokasta menetelmää voitte rakentaa helposti ylläpidettäviä, skaalautuvia ja visuaalisesti yhdenmukaisia Next.js-sovelluksia. Jatkakaa harjoittelua, jotta käyttöliittymänne pääsevät loistamaan!
Opi TypeScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 12
- Oppitunnit
- 48
Usein kysytyt kysymykset
Onko oppitunti ”CSS-moduulit ja globaalit tyylit” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Next.js 15 -täyden pinon verkkosovellukset-oppimispolun 3 oppituntia, myös oppitunnin “CSS-moduulit ja globaalit tyylit”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Next.js 15 -täyden pinon verkkosovellukset-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”CSS-moduulit ja globaalit tyylit”?
Järjestäkää tyylinne paikallisen näkyvyysalueen tarjoavien CSS-moduulien avulla ja hallitkaa globaaleja tyylejä tehokkaasti. Harjoittelet Next.js 15 -täyden pinon verkkosovellukset-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Next.js 15 -täyden pinon verkkosovellukset-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Next.js 15 -täyden pinon verkkosovellukset-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”CSS-moduulit ja globaalit tyylit”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Next.js 15 -täyden pinon verkkosovellukset-oppitunnilla?
Kyllä. Jokainen Next.js 15 -täyden pinon verkkosovellukset-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- CSS-moduulit ja globaalit tyylit
- Tailwind CSS:n käyttöönotto
- Komponenttikirjastot ja teemoitus
- Responsiivinen suunnittelu ja tumma tila