If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Senior Member
    Join Date
    Jan 2021
    Santa Barbara, CA, USA
    Member #
    1 times

    Anyone know of a CSS cleaner?

    I have some functioning CSS that I would like cleaned up (redundancies dealt with, things put in the correct order, that kind of thing). Anyone know of such a thing?

    Specifically what I want is:
    lets say you had the following:
    a {
    color: red;
    b {
    margin: 5px;
    color: red;

    I want it to produce the following:
    a, b {
    color: red;
    b {
    margin: 5px;

    Also with the selectors in logical order.

    Any ideas? I figure I'll just build the darn thing if I can't find something to use.


    -- edit --

    Here's the CSS I'm trying to clean up. I've got everything in logical, then alphabetical, order (so far). Let me know if you have any suggestions.

    a.nav-button:hover {	background-color: #222;
    	cursor: pointer;
    	transition: ease-out .125s;
    a.nav-button, a.nav-button-selected {
    	background-color: black;
    	color: white;
    	float: left;
    	font-size: 12px;
    	margin-left: 1px;
    	padding: 5px 15px;
    	text-align: center;
    	text-decoration: none;
    	transition: background-color ease-out .125s;
    	width: 120px;
    a.nav-button-selected, header {
    	background-color: white;
    	cursor: default;
    a.nav-button-selected, header, input[type=submit]{
    	color: black;
    a.nav-button, a.nav-button-selected, header {
    	letter-spacing: 5px;
    a.nav-button, a.nav-button-selected, content, copyright, nav {
    	display: block;
    body, p {
    	margin: 0;
    content {
    	padding: 13px;
    content, input, p, textarea {
    	font-family: 'Montserrat', sans-serif;
    	font-size: 16px;
    copyright {
    	color: grey;
    	font: 10px Arial;
    	padding: 16px;
    display {
    	height: 100%;
    	width: 100%;
    h1 {
    	font-size: 32px;
    	font-weight: bold;
    	line-height: 100%;
    	margin: 11px 0;
    header {
    	font-family: 'Roboto Condensed', sans-serif;
    	font-size: 128px;
    	line-height: 140px;
    	padding-left: 23px;
    	padding-top: 4px;
    header, nav {
    	user-select: none;
    input, textarea {
    	margin-top: 4px;
    	padding: 5px;
    input[type=submit] {
    	background-color: lightgrey;
    	border: 1px solid lightgrey;
    	border-bottom: 1px solid darkgrey;
    	border-radius: 5px;
    	border-right: 1px solid darkgrey;
    input[type=submit]:active {
    	background-color: darkgrey;
    	border: 1px solid darkgrey;
    	border-bottom: 1px solid lightgrey;
    	border-right: 1px solid lightgrey;
    	padding: 6px 4px 4px 6px;
    nav {
    	background: linear-gradient(to right, red, black);
    	font: 16px Arial;
    p {
    	line-height: 1.25em;
    	text-indent: 64px;
    .clear-fix::after {
    	clear: both;
    	content: "";
    	display: table;
    Last edited by Cinder; Feb 25th, 2021 at 01:46 PM. Reason: fixed the css a little


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
All times are GMT -6. The time now is 10:05 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: