Let's improved Optiscroll's CSS

Question

Let's improved Optiscroll's CSS

henryruhs opened this issue 10 years ago · 6 comments

henryruhs commented 10 years ago

Hey Wilson, I really like your plugin but the CSS far from perfect :-)

Let me show my workover, maby you find it useful:

Combined and ordered all definitions
Switched from PX to REM
Removed useless vtrack and htrack offset
Improved transition delay out
Moved the draggable area to vtrack and htrack

Suggestions:

Use shorthand translateZ(0) to enable CSS performance
Uncomment or remove the user-select block
Run autoprefixer over your CSS, many vendor prefixes are outdated
Add namespace to .htrack-on and .vtrack-on
Consider a naming convention like: https://github.com/redaxmedia/ncss

/**
 * @tableofcontents
 *
 * 1. scrollbar
 *    1.1 horizontal and vertical
 *    1.2 track
 */

/* @section 1. scrollbar */

.optiscroll {
    position: relative;
    overflow: hidden;
}

.optiscroll-content {
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
    position: absolute;
    top: 0;
}

/* @section 1.1 horizontal and vertical */

.optiscroll-h {
    height: 0.25rem;
    left: 0.5rem;
}

.optiscroll-v {
    top: 0.5rem;
    width: 0.25rem;
}

.optiscroll-h, .optiscroll-v {
    bottom: 0.5rem;
    opacity: 0;
    position: absolute;
    right: 0.5rem;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition: opacity 0.2s ease-out 0.8s;
}

/* hover */

.htrack-on:hover .optiscroll-h, .vtrack-on:hover .optiscroll-v {
    opacity: 1;
    transition: opacity 0.2s ease-out;
}

/* @section 1.2 track */

.optiscroll-htrack, .optiscroll-vtrack {
    background: #aaa;
    cursor: pointer;
    left: 0;
    position: absolute;
    top: 0;
}

.optiscroll-htrack {
    height: 100%;
}

.optiscroll-vtrack {
    width: 100%;
}

.optiscroll-htrack:active, .optiscroll-vtrack:active {
    background: #999;;
}

/* draggable area */

.optiscroll-htrack:before, .optiscroll-vtrack:before {
    content: '';
    position: absolute;
    top: -0.5rem;
    left: -0.5rem;
    bottom: -0.5rem;
    right: -0.5rem;
}

Keep on the good work!

Answer 1 · 2015-02-25T11:49:59.000Z

Yes, you are right. When I first wrote that style it was more an example than a proper boilerplate.
It needs some refactoring 😉

Answer 2 · 2015-09-04T11:45:08.000Z

Another idea for this project is use BEM, what you think @albertogasparin ?

Pull request #12

Answer 3 · 2015-09-06T10:55:22.000Z

Well, while I agree on the need of some CSS improvements (following @redaxmedia suggestions), I'm still not convinced on using one explicit methodology. On some projects I use BEM, on some others SMACSS or BLISS or "name one", so the plugin will never be compliant with all of them. And customizing each class name individually is overkill.
What can be easily done, however, is tweaking the classPrefix parameter to contain also the separator, so you can decide whenever you prefer a single dash, a double underscore or something else.
It will add an additional level of customization without increasing complexity.

Answer 4 · 2015-09-06T11:06:27.000Z

Something like this @albertogasparin https://github.com/kristoferjoseph/flexboxgrid/blob/7.0/sass/flexboxgrid.scss#L29-L31?

Answer 5 · 2015-09-06T11:17:36.000Z

Yes, that's what I was thinking of. I will add a $classPrefix variable in the SCSS file so people can customize both js and css.

Answer 6 · 2016-01-19T15:44:19.000Z

Version 2.0 is now out with CSS being mostly rewritten. I'm going to close this as most of the suggestions have been implemented. If further discussion is needed, please open a new issue.
Thanks