Tribute Rework: Mobile

Hello everyone,

I’m reworking my tribute page with some updated design knowledge and more complex layouts.

My project so far is located at https://shadewebb.github.io/Tribute_Mac_Miller/
You can also view this pen to see the direct code without web dev tools, but obviously the view is completely broken without images. https://codepen.io/shadewebb/pen/JVMvyV

The layout currently has no breakpoints and is only designed for mobile. I recommend using browser dev tools to view the site at around 400px width. The view isn’t that important, as my questions pertain to the code itself so far.

Questions so far:

  • Do I break my CSS file into multiple files for each page?
  • I’m repeating a lot of code, especially for designing the life page shapes and cards. Am I using BEM correctly? Should it be this bloated? Should I ignore BEM and just re-use classes so the code is not so complex?
  • My code in general is messy. Any tips on how to clean this up and organize it?

I honestly thought the whole thing was just the one header and background image until I saw the clickable arrow at the bottom. I was expecting to scroll the page to see more content, not have to click on the button.

The “Life” page is cut off on the left hand side when my browser window is wide. If it were me, I would just align the entries to the center, which would be a good start at making it responsive for desktop browsers or tablets in landscape mode.

@chuckadams

Context is important when reading and responding to posts with specific questions.

My apologies, I really misinterpreted things.

As for BEM, I’m personally not a fan of it, since I think it creates overly-specific narrowly-defined classes. CSS, in my opinion, should start as generic as possible, then refined by either adding more classes or using more specific selectors. I think you’ll find your CSS to be a lot cleaner, less bloated, and more elegant if you factor out the repetition into reusable classes, then use multiple classes on elements.

For example, you have this:
<li class="item-card-1__list-item">Signed with Rostrum Records</li>

Thing is, it’s already a child of an item-card-1 element, and it’s obviously a list item, so why not a CSS selector of .item-card-1 li instead? Basically, if you’re repeating the element name in the class name, you may just be looking for a CSS selector instead.

1 Like

Thank you for the response, and I think I will step away from BEM for this project. I’ve looked into other ways to organize CSS and I think I’m going to go with an object-oriented style where “blocks” and “elements” are together but without the ridiculous BEM naming scheme.

I feel like I should be splitting my CSS file. I can make as many files as I want to organize my project, and re-join them into one CSS file at the end for improved site performance correct?

I have found one issue with this so far. I’m refactoring my code and have found some selector issues when using nested elements instead of class names.

Example:
I want all of my <h1> elements to start with 0 margin and then adjust margins afterwards as needed per page. The title page has an off-set title, but most other pages have a centered title.

.container h1 {
    margin: 0;
}

Now I want to modify my landing title to have an offset:

.landing-title {
    margin-right: 23px;
}

Inspecting this element in Chrome shows that the margin-right attribute never applies to the element, as it is being overrode by the h1 selector of margin: 0;.

I’m pretty sure I can fix this by using an id instead of a class, but then I’m going to spend the rest of the day referencing CSS Specificity to get more and more specific on different elements to override nested selectors with higher specificity.

Seems like a nightmare, so I’m going to continue using classes on my elements where a nested selector would be necessary. I am still refactoring my code to make re-usable CSS rules rather than duplicating rules for every element on every page.

Given the issues with selector specificity, that’s probably a wise plan. You can still always use multiple classes on an element, and classes defined later in the CSS will override previous ones.

As for breaking CSS out into files per page, that’s possibly overkill for this one project, but it’s not a bad idea in general if you find you have styles only ever applying to one page. You still have to avoid naming collisions if you’re compacting it all into one css file though. CSS modules are a handy thing for avoiding that, but as best I know, they’re only available for use in javascript via module loaders like webpack, not static HTML pages.