7 Useful Tricks to Becoming a CSS Ninja

There are many lists online about things you did not know that can be done with CSS, whether animation or a new command. This is not one of those. There are no fantastic tricks here that look great. What’s here is a list of helpful tips I use myself that helped me build more efficiently.

(and like every website, this list is also going to be dynamic.)

Width - Instead of using an exact width, like 1200px as the overall width of the content frame, you can use 90% width with a maximum width of 1200px. The result in the site will work exactly the same if we used 1200px width but now, in a narrow screen of 1333px or lower, our frame will keep 90% of the width.

Select text color - By default, when selecting text on a site, it has a simple light blue color. To create a more thought-through site, try to change this color to something else, like white text on a black background.

CSS:

::selection {
    color: white;   
    background: black; 
    }

Control of width changes - When building a complex site, sometimes there is an element that does not fit in all sizes, and no matter how much your plans in advance, there are sizes in which it breaks. For such extreme cases, you can choose the exact width from where the problem starts to where it ends and fix the problem for only that width.

CSS:

@media only screen and (max-width: 600px) and (min-width: 400px) {
    /* CSS goes here */
    }

Vertical alignment - Alignment is one of the recurring problems on sites. For example, you’re building three boxes. They do not want to start from the same place, the simple solution is to use flex, but flex may be problematic in older browsers, especially the use of flex within another flex, so I like to try to avoid unnecessary use, especially if it not difficult to do the same thing in another way, so in the case of boxes, you can do a vertical alignment. All the boxes will align from the same height.

CSS:

vertical-align: top;
    

Custom bullets - this one is more common. If you want to override the list’s bullets design, the first thing you have to hide the actual bullets by using:

ul li::before {
    content: " ";
    display: inline-block;
    }

then you have to add your own bullets using a pseudo-element, start by adding an empty element before, and add an inline-block to make in sit next to the text and not about it:

ul li::before { 
    content: " "; 
    display: inline-block; 
    }

then create your design, and you can fix the location of the bullets using margin and transform:

ul li::before {
    content: " ";  
    display: inline-block;  
    width: 6px;  
    height: 6px;  
    margin: 0 5px 0 -20px;  
    border: 2px solid gray;  
    background-color: white;  
    border-radius: 100%;
    }

Ellipsis - if you want better control over the length of text used in the site, but you don’t want to just cut a text in the middle, you can always use Ellipsis. Ellipsis does two things. The first thing is to put a maximum length on a specific text box. Second, it’s a hint to show there’s more text to this box without actually have to explicitly say that.

The simple Ellipsis works only on one line, just add the following CSS: 

.ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    }

But if you want a multiline text with ellipsis on the end, you need to add another class like this one

.ellipsis {
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    }

and top of that you have to give it a width or maximum width so the browser will know when to cut the text. i.e:

width: 200px;
    

And lastly, word break - if you ever had to put a link address inside a text box, you’ve noticed that sometimes a link can be very long. The text doesn’t know how to break the address nicely. The text overflows from the initial box that holds it. To prevent this, you can use word break. This option will try its best to cut your text when it gets close to the end of the line.

word-break: break-word;
    

If the text box is only used for a link address, you can even use “break all.” This will cut text at a character at the end of the line.

word-break: break-all;