CinéVoraces | Front

Rules

function Home() {
  return(
    <div>
      ...Your stuff...
    </div>
  );
};

export default Home;
// Or
export { Home };

const jambon = () => {
      ...Your stuff...
};

export default jambon;
// Or
export { jambon };

declare module '*.x' {
  // Replace x with your extension
  const classes: { [key: string]: string };
  export default classes;
}

// /!\ Classic imports are forbidden, do not /!\
type newLayout = {
  children?: import('react').ReactNode
};

Use “type” for one shot typing, try to maximuse usage of “interface” for global typing in order to extends them for new.

Use exclusively BEM for your classes, nesting is forbidden except for specials cases like with <span> tags. See example below :

.head {
  // ... My CSS rules ...
}
.head__title {
  // ...
  & span {
  // ...
  }
}
.head__title__jambon {
  // ...
}

If you need to give multiple classes to one tag :

<div className={`${styles.jambon} ${styles.zob}`}>Je kiffe le jambon</div>

If you need to give a class that contain “-” (try to avoid using “-” as much as possible, in order to keep things simple) :

<div className={styles['jambon-beurre']}>Je kiffe le jambon</div>

To use global types you nedd to extend them like in example below :

.title {
  @extend .h1;
  color: #f0f;
}
// Add for multiple extends:
.title {
  @extend .h1, .section;
  color: #f0f;
}