CSSHell

content is your Content?

2023-03-11T14:15:00Z

I saw a developer using the content property for adding extra text to a label, because why not, he said. Sadly, this raises several issues.

Bad example

.label::after {
  content: "My label";
}

What is the problem and how to fix it

Accessibility: CSS content is not accessible to screen readers, which makes it difficult for users with visual impairments to access the content. Also, you can not select it because it doesn't behave as a text.
SEO: Search engines may not be able to read CSS content, which means that the content will not be indexed or displayed in search results.
Maintenance: If you need to update or change the content, you will have to go through the CSS file instead of the HTML file, which can be time-consuming and error-prone.
Structure: CSS content does not follow the semantic structure of HTML, which makes it difficult to maintain a consistent document structure and can lead to accessibility issues.
Styling: CSS content is limited in terms of styling options compared to HTML text. This can limit the design options for the webpage. If the user disables the stylesheet, the text won't be visible.
Separation of concerns: CSS content blurs the separation of concerns between HTML and CSS, which can make it more difficult to maintain and update the code.

If you need to display any kind of text, always do it in the HTML code. ::before and ::after pseudo-elements are best used for decorative purposes. However, in print view, it is a good idea for using it to display URLs. If you happen to print an article or documentation, it can come in handy to make the link visible behind the keyword. Go on, check out the print preview of this post!

Good example

@media print {
  a[href]::after {
    content: " (" attr(href) ")";
  }
}

Resources

One size should fit all?

2022-06-18T15:15:00Z

In modern web development, there is less and less reason to use fix sizing for an element, especially when it's a content wrapper.

Bad example

.wrapper {
  height: 800px;
  width: 1024px;
}

What is the problem and how to fix it

There are cases when you need to set the size of an element, but even if you want an image to be 600px wide, that will overflow from the content on mobile.
Specifying fixed sizes to elements can break the responsiveness. You shouldn't set a size for a div unless it's necessary, because you can't cover every possible screen size in your media queries. For example, if the .wrapper has a longer content than 800px, everything will overflow.
Try using max-width. That way, you can ensure that your element won't take up the whole area, or sticking out on smaller screens (max-width better used on block elements).
height is rarely needed in this case. Let the size of the content decide the height, don't force it!

Good example

.wrapper {
  max-width: 1024px;
}

We don't float down here anymore

2022-02-07T14:50:00Z

I just realised I can't tell when was the last time I used the float property. There are so many other ways to align items without any fuss!

Not that bad example

.sidebar {
  float: right;
}

First of all, float is not deprecated. Float was misused. Its original purpose was to align images with texts, nothing more. Then, as layouts and designs started to evolve, we used to align site parts as well, but it was always a pain because elements with the float property were actually floating above our content, so we had to clear them, but clearfix was actually a hack, and hard to apply.

Now in 2022, there are several ways to align elements on our webpage and apps. Let's check out what are those:

Margin

I'm pretty certain that you used margin: 0 auto; before to center block elements horizontally. This works with margin-left: auto; and margin-right: auto; too! The downside is that your element needs to have a fixed size, which is less than 100%. Using fixed sizes is not a good practice, I will explain this in another article later!

Flexbox

Aligning elements with Flexbox is really flexible. You can not only align them horizontally but vertically too! You can play with the direction, rearrange the item order, etc. Of course, this requires wrapping your desired items into an element with display: flex; which can cause a bit long HTML code, but it is worth it.

Grid

CSS grid is more complex than Flexbox, and it's used on bigger parts of your website such as the main layout.

Conclusion

Using float nowadays is a bit obsolete. I don't say stop using it, but the above-mentioned methods are much easier to use, and a lot more modern. As I said in the beginning, float was made to align images, so keep that in mind when you want to align your sidebar to the right!

Resources

Convenient CSS naming conventions

2021-06-05T14:45:00Z

I often run into the problem where I see the same class name being reused on different parts and context of the website, but when 1 out of the 3 properties don't match with the design, developers just use inline styling to override the desired rule.

Bad example

.primary-text {
  color: #000;
  font-family: "Open Sans";
  line-height: 1.2;
}

 <h1 class="primary-text">Primary title</h1>
 <h2 class="primary-text" style="color: #333">Subtitle</h2>
 <!-- Changing the font color inline because I want a different color for the subtitle-->

What is the problem and how to fix it

Using inline styling leads to hard maintenance and code readability. The best way is to separate the view, styling and JavaScript from each other.
Class names should reflect what are they styling, like, in my example, you can tell from the CSS that the .heading-main is styling the main heading.
If you work on a website with more people and don't have a naming convention, it has a risk of creating a class with the same name, and that can cause conflicts on the design, most likely if you are working with reuseable components (the most common class name I often see is .title).
There are several methodologies for naming. The most popular one is BEM, but you can choose by your liking or just come up with a new one which suits the project. The most important is to follow the naming convention all the time.

Good example

 .heading-main {
   color: #000;
   font-family: "Open Sans";
   line-height: 1.2;
 }

 .heading-subtitle {
   color: #333;
   font-family: "Open Sans";
   line-height: 1.2;
 }

More advanced good example

 :root {
   --heading-font-family: "Open Sans";
   --heading-line-height: 1.2;
 }

 .heading-main {
   color: #000;
   font-family: var(--heading-font-family);
   line-height: var(--heading-line-height);
 }

 .heading-subtitle {
   color: #333;
   font-family: var(--heading-font-family);
   line-height: var(--heading-line-height);
 }

Resources

Let's talk about units

2021-05-08T16:00:00Z

There is a life beyond pixels and percentages. Using px units is fine in certain cases, the real mistake is using absolute instead of relative units.

Bad example

p {
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 8px;
}

What is the problem and how to fix it

Using relative units ensures that the website scales proportionally according to your choice of font, and according to the users' choice of screen size and zoom level.
The formula to calculate the rem value is desired-size / root-font-size, in short 8 / 16 = 0.5, this means that 1rem equals the font size of the html element (which for most browsers has a default value of 16px).
If you don't want to grab a calculator every time you need a new unit, use Sass and create mixin. CSS Tricks has a pretty good article about how you can achive this.

Good example

p {
  font-size: 1rem;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

Resources

font-variation-misfortune

2021-05-03T20:44:00Z

Variable fonts are awesome, but unnecessary usage of font-variation-settings will eventually break your styles.

Bad example

.bold {
  font-variation-settings: 'wght' 700;
}

.italic {
  font-variation-settings: 'ital' 1;
}

<span class="italic bold">italic bold?</span>

What do you think, will it be both italic and bold? Hint: it won't.

What is the problem and how to fix it

font-variation-settings do not add up, so, when several rules overlap, they override one another.
Common workaround for that is using CSS variables, but you really don't want to get in that mess just to define font-weight in a fancy way, don't you?
Redefining font-weight, font-stretch or font-style in this manner does nothing at all, variable fonts can handle these properties without axes modifications.

Latter is even mentioned in spec:

When possible, authors should generally use […] this property for special cases where its use is the only way of accessing a particular infrequently used font variation. For example, it is preferable to use font-weight: 700 rather than font-variation-settings: 'wght' 700.

Good example

Just use font properties:

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

Resources

Overspecified specificity

2021-04-25T11:59:00Z

Specificity determines, which CSS rule is applied by the browsers. Developers often write overly specific selectors just to be 10000% sure their rules will rule.

Bad example

div#my-popup div span.my-radiocheckbox-label-text {
  color: #666;
}

#some-id .label {
  color: #111 !important;
}

What is the problem and how to fix it

Overspecifing rules will lead to hard maintainability and code readability, while there is no real benefit.
If we want to reuse our code, avoid using IDs for styling: as the name indicates, these are unique identifiers, they cannot be repeated within a page. If you need help with naming selectors and avoid styling conflicts, try using BEM or other similar naming methodologies.

CSS stands for Cascading Style Sheets, which means, if you apply different color for a text several times in your CSS with the same specificity, the selector which is further down in the source will apply. For example, in the code below, the font color is going to be black:

.label-color {
  color: red;
}

.label-color {
  color: black;
}

How to calculate specificity

If the element has inline styling, that automatically wins (1,0,0,0 points)
For each ID value, apply 0,1,0,0 points
For each class value, pseudo-class or attribute selector, apply 0,0,1,0 points
For each element reference, apply 0,0,0,1 point

You can generally read the values as if they were just a number like 1,0,0,0 is "1000", and so clearly wins over a specificity of 0,1,0,0 or "100". The commas are there to remind us that this isn't really a "base 10" system, in that you could technically have a specificity value of like 0,1,13,4 – and that "13" doesn't spill over as a base 10 system would.

The !important value appended to a CSS property value is an automatic win, it overrides even inline styles from the markup. The only way an !important value can be overridden is with another !important rule declared later in the CSS and with equal or great specificity value otherwise. You could think of it as adding 1,0,0,0,0 to the specificity value.

CSS Specificity is one of the most difficult concepts to grasp in Cascading Style Sheets. I strongly recommend reading all the resources I mention above because once you master this knowledge, it's going to be easy to apply it like setting !important to every line 😉

Good example

.my-class-checkbox-label {
  color: #666;
}

Resources

font-family everywhere!

2021-04-18T18:44:00Z

Specifying the primary font for almost every selector is not a good approach, yet I often run into this issue.

Bad example

.my-class-1 {
  font-family: Roboto;
}

.my-class-2 {
  font-family: Roboto;
}

p {
  font-family: Roboto;
}

.my-class-3 {
  font-family: Roboto;
}

footer {
  font-family: Roboto;
}

What is the problem and how to fix it

Duplicating the font-family import only leads to hard maintainability. If, for some reason you want to change your website's font, you have to do it in every line, or, in all files.
If you add the font name by hand, there is a high chance you mistype it once and the browser will load a totally different font (once I saw Ariel instead of Arial...).
Quotation is not necessary, but it's a good approach to use it, mostly when the font name contains whitespaces.
Always add a fallback option. If Roboto isn't available, then the user-agent-defined sans serif font will be used. Note, these are not font names, so don't use quotation marks!
If you want to use a different kind of font for your headings, links, whatever, the best approach it to store the name as a CSS variable.

Good example

body {
  font-family: "Roboto", sans-serif;
}

Another good example

:root {
  --heading-font-family: "Georgia", "Times New Roman", "Times", serif;
}

.title {
  font-family: var(--heading-font-family);
}

Resources

Prefix mess

2021-04-15T14:50:00Z

Browser vendors sometimes add prefixes to experimental or nonstandard CSS properties and JavaScript APIs, so developers can experiment with new ideas while — in theory — preventing their experiments from being relied upon and then breaking web developers' code during the standardization process.

Bad example

.my-class {
  -webkit-transition: left 400ms ease-out;
  /* older webkit */
  -webkit-transition: left 400ms ease-out;
  -moz-transition: left 400ms ease-out;
  -ms-transition: left 400ms ease-out;
  -o-transition: left 400ms ease-out;
  transition: left 400ms ease-out;
}

What is the problem and how to fix it

Adding unnecessary prefixes makes your code harder to read and maintain. The file size can also increase for no reason.
If not sure which property requires a prefix, and which one not, use caniuse.com. With this tool you can check the overall support for every property, when they plan to leave the prefix (if it has any), and so on.
If you don't want to mess with prefixes (understandable), you can use Autoprefixer in your build process, and this part can be covered automatically.
Browser vendors are working to stop using vendor prefixes for experimental features. Web developers have been using them on production Web sites, despite their experimental nature. This has made it more difficult for browser vendors to ensure compatibility and to work on new features; it's also been harmful to smaller browsers who wind up forced to add other browsers' prefixes in order to load popular web sites (Source: MDN).

Good example

.my-class {
  transition: left 400ms ease-out;
}

Resources

Vendor prefix

Link & the forgotten accessibility

2021-04-11T20:10:00Z

One of the most common mistakes: setting a color for a link, but not adding :hover, :focus and :active states.

Bad example

a {
  color: #ca0000;
  text-decoration: none;
}

/* And that is the end of link styling */

What is the problem and how to fix it

Without the missing states, our link won't be accessible, users might get confused while navigating through our website with a mouse or a keyboard, because they won't be able to identify what is clickable and what is not
By default, browsers set text-decoration: underline; to links, but removing this property can also lead to confusion
Try using a color which fits with your design but still makes it obvious if a text can be clicked. In this blog, the red color is consistent for clickable items

Try navigating on this page by pressing the Tab key and see what happens!

Good example

a {
  color: #ff0000;
}

a:hover,
a:visited,
a:focus {
  color: #a60000;
  text-decoration: none;
}

a:active {
  color: #000000;
  background-color: #a60000;
}

Resources

z-index hell

2021-04-11T20:00:00Z

z-index is something that can measure one's frustration. The amount of digits represent the fact that the developer tried to position the div above the content, but failed miserably.

Bad example

.my-class {
  z-index: 122828282882;
}

What is the problem and how to fix it

z-index can only be used with absolute, fixed, relative or sticky positions. In my example, this line is missing.
z-index has a maximum value which is 2147483648, the maximum positive value for a 32-bit signed binary integer in computing (the example has +2 digits).
If you don't change anything on your content's z-axis value, adding 2 or 3 has the same effect as 100 or 10000. Adding huge numbers can lead to hard maintainability.
You might not even need z-index at all, just push your DOM element a bit further towards your </body> tag, it will be rendered later than the elements in the same layer preceding it, so it can cover them.

Good example

.my-class {
  position: absolute;
  z-index: 2;
}