DEV Community

Discussion on: What should production CSS look like? Share your layout-to-web workflow

Collapse
 
turnerj profile image
James Turner • Edited

So a no-print class is designed for controlling whether an element will be printed if someone prints the page. Quite simply, the CSS rule looks like:

.no-print {
    display: none !important;
}

That would be in a print.css file or media query with the media being print.

For me, that is probably one of the only cases where I use !important because that declaration is otherwise not always going to apply.

When you go !important, you need to be absolutely sure that it is the final and ultimate transformation you want to do for matching elements. In print, I need the elements to be gone.

Similarly, you can have only-print classes which do the reverse though it gets harder because for some you might want display: block !important; and others display: flex !important;.

All of this being said, a class like this really is saying what it does rather than what it is, which you may look at as breaking semantic rules for class names.