Kevin Powell - CommunityKP-C
Kevin Powell - Community•2w ago•
36 replies
lko

How do you structure and write your CSS?

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>

/* 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 or something more layout-focused like 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 or .grid, or maybe they're more "complex" like .img-wrapper which maybe becomes
.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?
Was this page helpful?