58 replies

How do you structure and write your CSS?

🗣️discussion

1. Do you keep everything in a single file or do you split it up?
2. Do you still use SCSS or has CSS become good enough? Or maybe tailwind/other CSS tools?
3. When you have a hero section for example and you have to write vanilla CSS, how do you write it?

<section class="hero">
  <div class="container">
    <h1 class="title">...</h1>
  </div>
</section>

<section class="hero">
  <div class="container">
    <h1 class="title">...</h1>
  </div>
</section>

/* 1 */ section.hero .title
/* 2 */ section.hero .container .title
/* 3 */ .hero__title /* using BEM */
/* something else? */

/* 1 */ section.hero .title
/* 2 */ section.hero .container .title
/* 3 */ .hero__title /* using BEM */
/* something else? */

4. If you have a more specific section, like an about section in the homepage, do you call it

section.about

section.about

or something more layout-focused like

section.img-text-side-by-side

section.img-text-side-by-side

(bad name but an example)
5. Do you use utility classes? If so, what kind? Are those mostly one lines like

.flex

.flex

.grid

.grid

, or maybe they're more "complex" like

.img-wrapper

.img-wrapper

which maybe becomes

.img-wrapper {
  position: relative;
  :is(img,video) {
    ...
  }
}

.img-wrapper {
  position: relative;
  :is(img,video) {
    ...
  }
}

6. When using variables for colors, do you use more "primary/secondary..." or just "red/blue..."?
7. Maybe something else I missed?

How do you structure and write your CSS?

🗣️discussion

<section class="hero">
  <div class="container">
    <h1 class="title">...</h1>
  </div>
</section>

<section class="hero">
  <div class="container">
    <h1 class="title">...</h1>
  </div>
</section>

/* 1 */ section.hero .title
/* 2 */ section.hero .container .title
/* 3 */ .hero__title /* using BEM */
/* something else? */

/* 1 */ section.hero .title
/* 2 */ section.hero .container .title
/* 3 */ .hero__title /* using BEM */
/* something else? */

4. If you have a more specific section, like an about section in the homepage, do you call it

section.about

section.about

or something more layout-focused like

section.img-text-side-by-side

section.img-text-side-by-side

(bad name but an example)
5. Do you use utility classes? If so, what kind? Are those mostly one lines like

.flex

.flex

.grid

.grid

, or maybe they're more "complex" like

.img-wrapper

.img-wrapper

which maybe becomes

.img-wrapper {
  position: relative;
  :is(img,video) {
    ...
  }
}

.img-wrapper {
  position: relative;
  :is(img,video) {
    ...
  }
}

6. When using variables for colors, do you use more "primary/secondary..." or just "red/blue..."?
7. Maybe something else I missed?

How do you structure and write your CSS?

Similar Threads

How do you structure and write your CSS?

Similar Threads

Similar Threads

Similar Threads