Interesting CSS Practices - Interesting Ideas from The Top 6 Search Results

Google CSS Best Practices and you get plenty of useful but duplicated ideas.

But, among the non-duplicated are a few ideas that might need sharing:

Organize Stylesheets Using a Header to Footer Structure

Or said differently, if certain styles exist only at certain points in the page, sort your CSS in a hierarchical manner. This lets you and your team quickly sense where the related CSS is (though yes, you can CTRL-F to find the CSS style name)

Generic classes (body, a, p, h1, etc.)
#header
#nav-menu
#main-content
#aside
#footer

Create the HTML Structure First, CSS Second

HTML is about the structure for you, the browser, search engines, and screen readers. Build the structure first using modern semantic elements (e.g. <form>, <table>, <article>, and then add styling.

Text-transform to Style Text Properties into a “Standard” across your site

If your data has inconsistent capitalization, use text-transform to push the content where you need it.

Great for titles, headlines, names, which requires capitalization of each word.

text-transform: capitalize;```





```javascript
text-transform: lowercase;

for that art house modern look.

Design Mobile One Column First

It is easier to expand the content to fit more space than to figure out how to take that same content and make it one column.

Use @media (min-width: 768px) to go mobile-first. So in this example, one the browser is 768px or larger, it switches to the (persumed) desktop version)

Use (or don’t use) The SRP - Single Responsibility Principle

Borrowing from PROTOTYP here on Dev, pay attention if your styles take on multiple chores. Breaking out responsibility allows the style to extend and combine easily with other styles.

But! There is a good case for not following SRP.

// Do This:
/* Shared styles */
.button {
  padding: 1rem 2rem;
  font-weight: bold;
  color: #fff;
}

/* Style extensions */
.button--radialBorder {
  border-radius: 0.2rem;
}

.button--large {
  font-size: 2rem;
}

.button--primary{
  background-color: #eb4934;
}

.button--secondary {
  background-color: #888;
}


// Don’t Do This
.button {
  padding: 1rem 2rem;
  font-size: 2rem;
  border-radius: 0.2rem;
  background-color: #eb4934;
  color: #fff;
  font-weight: bold;
}

.button--secondary {
  border-radius: 0;
  font-size: 1rem;
  background-color: #888;
}

Use BEM Framework

BEM = Block, Element, Modifier is a pattern for writing your styles and giving them names.

In fact, the above CSS is written following BEM.

From MDN:

In BEM a block is a stand-alone entity such as a button, menu, or logo. An element is something like a list item or a title that is tied to the block it is in. A modifier is a flag on a block or element that changes the styling or behavior. You will be able to recognize code that uses BEM due to the extensive use of dashes and underscores in the CSS classes.

Keep Outline Highlights

Some fellow humans need to use the keyboard and some just like using the keyboard. The box outline lets us keyboard users know which element we are focused on.

// Bad Don’t Do This
:focus {
    outline: none;
}

Let the outline do its job:

References

30 CSS Best Practices
HTML Semantic Elements
8 SCSS Best Practices To Keep in Mind
PROTOTYP
BEM
Organize Your CSS - MDN
10 Best Practices for Quickly Improving Your CSS