1
\$\begingroup\$

I recently created one of my first hover effects using HTML and SASS. Since it is my first hover effect, I'm almost positive that is it horribly inefficient. I'm sure there's a way to do this effect using half the number of lines of code, but I can't figure out any ways to do it. The hover effect in question is for the "envelop" logo at the top left.

Here's a codepen of my page so far.

HTML

<header>
    <div class="logocontainer">
        <a href="#">                
            <h1 class="logoeffect-left">(</h1>
            <h1 class="logo">envelop</h1>
            <h1 class="logoeffect-right">)</h1>
        </a>
    </div>

</header>

<div class="wrapper">

<!-- remove the following line -->
    <p>finish navbar, mobile version formatting is still fucked up....</p>
</div>

<footer></footer>

CSS (SASS)

$green: #4ede96;
$logoAnimationTime: 0.2s;

@mixin mLogoEffect_pre
{
    color: white;
    font-size: 48px;                
    display: inline-block;
    transition: $logoAnimationTime 0 ease;
    opacity: 0;
}


header
{
    height: 100px;
    width: 100%;
    background: $green;
    position: fixed;
    top: 0;
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) 
    {
        height: 200px;
    }


    .logocontainer 
    {
        @media only screen and (min-device-width : 320px) and (max-device-width : 480px)
        {
            margin-left: 35%;
            display: block;
        }
        padding-top: 15px;
        display: inline-block;

        > a
        {
            text-decoration: none;


            .logo
            {
                margin-top: 0;
                font-family: 'Merriweather', serif;
                font-size: 48px;
                padding: 0 50px;            
                color: white;
                display: inline-block;

            }

            .logoeffect-left
            {
                @include mLogoEffect_pre;
                margin-left: 70px;
                margin-right: -80px;
                margin-top: 0;
                margin-bottom: 0;
            }

            .logoeffect-right
            {
                @include mLogoEffect_pre;               
                margin-left: -80px;
                margin-top: 0;
                margin-bottom: 0;
            }

            &:hover
            {
                .logoeffect-left
                {
                    transition: $logoAnimationTime 0 ease;
                    margin-right: -50px;
                    margin-left: 40px;
                    opacity: 1;
                    @media only screen and (min-device-width : 320px) and (max-device-width : 480px)
                    {
                        //dont change anything (hide animation)
                        @include mLogoEffect_pre;
                        margin-left: 70px;
                        margin-right: -80px;
                        margin-top: 0;
                        margin-bottom: 0;
                    }
                }
                .logoeffect-right
                {
                    transition: $logoAnimationTime 0 ease;
                    margin-left: -50px;
                    opacity: 1;
                    @media only screen and (min-device-width : 320px) and (max-device-width : 480px)
                    {
                        //dont change anything (hide animation)
                        @include mLogoEffect_pre;               
                        margin-left: -80px;
                        margin-top: 0;
                        margin-bottom: 0;
                    }
                }
            }
        }


    }

}
\$\endgroup\$

1 Answer 1

Reset to default
1
\$\begingroup\$

HTML

The headline elements (h1-h6) are meant to be used only for headlines. You have 3 of them, 2 of which only contain punctuation. That's a misuse of the element. If you need markup that's purely for styling purposes, use a span.

<h1><span class="logoeffect-left">(</span>
    <span class="logo">envelop</span>
    <span class="logoeffect-right">)</span>
</h1>

CSS

There's almost no reason to use min-device-width over min-width. Ever. There's also no good reason to specify a minimum bound on your "handheld" media query. The following media query is just as effective, but significantly smaller:

@media only screen and (max-width : 480px) {
    // stuff
}

In a vast majority of cases, going mobile first with your media queries, rather than desktop first is going to get you smaller CSS.

// stuff all devices share
@media only screen and (min-width: 480px) {
    // stuff handheld devices don't need
}

You've got a significant amount of code duplication in your CSS because you're failing to take advantage of the cascade. For instance, you're including your mLogoEffect_pre mixin 4 times, when you only need it once:

.logoeffect-left, .logoeffect-right {
    @include mLogoEffect_pre;
}

Your entire hover section has way more code than it needs because you're setting/unsetting/resetting properties. It can be simply expressed like this:

&:hover
{
    .logoeffect-left
    {
        margin-right: -50px;
        margin-left: 40px;
        opacity: 1;
    }
    .logoeffect-right
    {
        margin-left: -50px;
        opacity: 1;
    }
}

I really must caution against splitting up your media queries like that. It really increases the size of your compiled CSS.

@media (min-width: 480px) {
    .one-selector { }
}

@media (min-width: 480px) {
    .another-selector { }
}

@media (min-width: 480px) {
    .yet-another-selector { }
}

Seems a little silly, don't you think? Media query bubbling is a fine feature of Sass, but it should be used conservatively. Much better:

@media (min-width: 480px) {
    .one-selector { }
    .another-selector { }
    .yet-another-selector { }
}

Learn to love shorthand:

.foo {
    margin-left: 70px;
    margin-right: -80px;
    margin-top: 0;
    margin-bottom: 0;
}

Compared to:

.foo {
    margin: 0 -80px 0 70px;
}

On your .logocontainer, you have margin-left: 35%; for handhelds. Why not just use text-align: right instead? This will allow you to avoid wrapping that occurs on very narrow devices.

http://codepen.io/cimmanon/pen/JbHAC

\$\endgroup\$
0

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.