search

lucia-garzon / idm221-lg852

Repository for my IDM-221 Web Design I class
https://idm221-lg852.vercel.app
0 stars 0 forks source link

CSS suggestions #1

Open philsinatra opened 9 months ago

philsinatra commented 9 months ago

Combine CSS rules with similar properties to reduce redundancy

Here's one example - the @font-face declarations. You can consolidate the font faces into one @font-face rule per font family instead of having multiple rules:

@font-face {
  font-family: "work_sans";
  src: url('../fonts/worksans-italic-variable.woff2') format('woff2'),
       url('../fonts/worksans-italic-variable.ttf') format('truetype');
  font-weight: 0 900;
  font-style: italic;
}

@font-face {
  font-family: "work_sans";
  src: url('../fonts/worksans-variable.woff2') format('woff2'),  
       url('../fonts/worksans-variable.ttf') format('truetype');
  font-weight: 0 900;
  font-style: normal; 
}

Note the font-family value is the same. The font-style and src values integrate both styles into a single font file name.

Simplify and standardize positioning values in the project blurbs, considering responsiveness

Combine similar styles for project blurbs into a single class to simplify and standardize positioning values. Consider using nth-child for specific adjustments to simplify the number of classes.

.blurb {
    z-index: 200;
    position: relative;
    left: 5px;
}

.blurb:nth-child(2) {
    bottom: 37px;
    z-index: 210;
}

.blurb:nth-child(3) {
    bottom: 196px;
}

.blurb:nth-child(4) {
    bottom: 399px;
    z-index: 210;
}

Minimize the use of !important in CSS to avoid potential conflict

.container {
-   width: 100% !important;
+   width: 100%;
}

Simplify element sizing and positioning

You should be able to code most (if not all) of this design without the need for any use of the position property. Try to eliminate as much custom positioning and layering as possible. The horizontal scroll is a result of several, hard coded left values. I would try rebuilding the CSS from the top down without using the position property, or any left, right, top, or bottom properties.

As you work through this, if you encounter a specific issue trying to position something, create an issue on GitHub and tag me (@philsinatra).

ID based selectors

Update all CSS selectors so they don't use IDs.

lucia-garzon commented 9 months ago

@philsinatra Thanks for the feedback, it was very helpful!! About id selectors, is there any reason I should remove them?