使用 CSS 让元素不可见的方法很多，剪裁、定位到屏幕外、明度变化等都是可以的。

隐藏元素的最佳实践有如下方法

display:none;
如果希望元素不可见，同时不占据空间，辅助设备无法访问，但资源有加载，DOM 可访问，则可以直接使用 display:none 隐藏。
```
.container {
    display:none;
}
```
使用 display: none 可以让元素以及它所有的内容（包括所有子元素）都不会生成也不会保留其本该占有的位置，从而元素不会被展示。
visibility: hidden;

如果希望元素不可见，不能点击，辅助设备无法访问，但占据空间保留，则可以使用 visibility:hidden 隐藏。 css .container { visibility: hidden; } 如果希望元素不可见，同时不占据空间，辅助设备无法访问，但显隐的时候可以有 transition 淡入淡出效果，则可以使用 css .item { visibility: hidden; position: absolute; }

透明度opacity: 0;
如果单纯希望元素不可见，但位置保留，可以点击，则直接让透明度为 0。
```
.opacity {
    opacity: 0;
 }
```
如果希望元素不可见，而且不占据空间, 但可以点击，则可以使用透明度。
```
.opacity {
    opacity: 0;
    position: absolute;
 }
```
overflow:hidden; 如果希望隐藏元素超出所设置的宽和高部分，使用overflow:hidden;
把元素移出屏幕可视区

    .item {
        position:absolute;
        left:-9999px;
    }

或者

    .item {
       margin-left:-9999px; 
    }

设置元素宽高为 0

参考资料

CSS隐藏元素的N种实现方式

CSS元素隐藏的几种方法

参考资料