DEV Community

Discussion on: Tell me about the worst CSS you've ever had to deal with

Collapse
arximughal profile image
Muhammad Arslan Aslam

One of the worst CSS I usually have to deal with every once in a while looks something like this:

html { background-color: #e0e0e0; }
body { color: rgba(0, 0, 0, 0.87); font-size: 0.875rem; background-color: #f0f0f0; -webkit-font-smoothing: antialiased; }
*:focus { outline: 0 !important; }
a { color: inherit; text-decoration: none; cursor: pointer; outline: 0; }
a:hover, a:focus { color: inherit; text-decoration: none; }
button { color: inherit; }
pre { color: inherit; background-color: #f8f8f8; border-color: rgba(120, 130, 140, 0.13); }
blockquote { border-color: rgba(120, 130, 140, 0.13); }
small { font-size: 90%; }
sup { position: relative; top: -1em; font-size: 75%; }
.pull-center { position: absolute; left: 50%; }
.close { font-size: 1.3rem; }
.img-responsive { width: 100%; height: auto; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.pull-left { float: left; }
.pull-right { float: right; }
.center-block { margin: 0 auto; }
.avatar-profile{ width:100% !important}
.heading-settings{ border-bottom:2px solid #ccc; overflow:hidden; clear:both}
.edit-button a{ margin-top: 20px; margin-right:20px;}
.heading-settings h3{ margin:0;}

One of my colleagues thinks it's best to write "COMPRESSED" CSS from start instead of compressing it later on.