The way that I like to write scss gives way to very specific selectors (code sample is under). Is this a bad thing? Are there any performance or reusability issues that I should consider?
#wrapper {
width: 100%; }
#wrapper #sidebar {
width: 0;
background: #130705;
height: 100%;
position: fixed;
right: 0;
z-index: 2000;
-webkit-transition: width 0.15s ease-in-out;
-moz-transition: width 0.15s ease-in-out;
transition: width 0.15s ease-in-out; }
#wrapper #sidebar.sidebar {
width: 200px; }
#wrapper #marquee {
position: relative;
width: 100%;
height: 900px;
overflow: hidden; }
#wrapper #marquee header {
height: 70px;
width: 100%;
margin-top: 90px;
position: absolute;
z-index: 1000; }
#wrapper #marquee header #header_wrapper {
width: 100%;
height: 100%;
-webkit-transition: padding 0.15s ease-in-out, background-color 0.15s ease-in-out;
-moz-transition: padding 0.15s ease-in-out, background-color 0.15s ease-in-out;
transition: padding 0.15s ease-in-out, background-color 0.15s ease-in-out; }
#wrapper #marquee header #logo {
text-decoration: none;
color: white;
cursor: pointer;
float: left;
width: 66px;
height: 68px;
background: #fafafa;
margin-left: 18%;
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.4);
background: url("../images/logo.svg");
background-size: 100%; }
#wrapper #marquee header #logo span {
text-align: center;
font-size: 48px;
font-family: "Open Sans";
font-weight: bold;
color: #9cd5d0;
line-height: 68px;
display: block;
margin: 0 auto; }
#wrapper #marquee header .sidebar_toggle {
background: RGBA(0, 0, 0, 0.5);
padding: 10px;
cursor: pointer;
margin-right: 18%;
float: right;
width: 42px;
margin-top: 10px;
-webkit-transition: background-color 0.25s ease-in;
-moz-transition: background-color 0.25s ease-in;
transition: background-color 0.25s ease-in; }
#wrapper #marquee header .sidebar_toggle ul {
padding: 0;
list-style: none; }
#wrapper #marquee header .sidebar_toggle ul li {
padding: 0;
height: 2px;
background: white; }
#wrapper #marquee header .sidebar_toggle ul li:not(:first-child) {
margin-top: 11px; }
#wrapper #marquee header .sidebar_toggle:hover {
background: RGBA(0, 0, 0, 0.8); }
#wrapper #marquee header.sidebar #header_wrapper {
white-space: nowrap;
float: right; }
#wrapper #marquee header.activated {
position: fixed;
margin: 0;
top: 0px;
border-bottom: 5px solid #bee4e1; }
#wrapper #marquee header.activated #header_wrapper {
background: RGBA(110, 218, 209, 0.97); }
#wrapper #marquee header.activated .sidebar_toggle {
background: #f2f2f2; }
#wrapper #marquee header.activated .sidebar_toggle li {
background: black; }
#wrapper #marquee header.activated .sidebar_toggle:hover {
background: RGBA(0, 0, 0, 0.4) !important; }
#wrapper #marquee #marquee_progress {
width: 200px;
margin: 0 auto; }
#wrapper #marquee #marquee_progress #bar {
width: 0px;
background: white;
border-radius: 50px;
border: 1px solid grey;
height: 5px; }
#wrapper .marquee_content {
width: 100%;
overflow: hidden;
height: 900px;
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), margin-left 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
-moz-transition: -moz-transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), margin-left 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), margin-left 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); }
#wrapper .marquee_content .slide {
width: 100%;
background-size: cover;
overflow: hidden;
background-repeat: no-repeat;
float: left;
display: inline-block; }
#wrapper .marquee_content .slide .content {
width: 960px;
height: 800px;
margin: 0 auto;
background-repeat: no-repeat;
margin-top: 250px; }
#wrapper .marquee_content .slide1, #wrapper .marquee_content .slide2, #wrapper .marquee_content .slide3, #wrapper .marquee_content .slide4, #wrapper .marquee_content .slide5 {
background-image: url("../images/desk.jpg"); }
#wrapper .marquee_content .slide1 h2, #wrapper .marquee_content .slide2 h2, #wrapper .marquee_content .slide3 h2, #wrapper .marquee_content .slide4 h2, #wrapper .marquee_content .slide5 h2 {
font-family: "Playfair Display";
color: white;
font-size: 48px;
line-height: 120%;
text-align: center;
background: RGBA(0, 0, 0, 0.4);
padding: 3px;
float: left; }
#wrapper .marquee_content .slide2 {
background-image: url("../images/nyc_2.png"); }
#wrapper .marquee_content .slide3 {
background-image: url("../images/old_image.jpg"); }
#wrapper .marquee_content .slide4 {
background-image: url("../images/mountains.jpg"); }
#wrapper .marquee_content .slide5 {
background-image: url("../images/desk.jpg"); }
#wrapper #changemarquee {
width: 100%;
position: absolute;
bottom: 30px; }
#wrapper #changemarquee .inner {
width: 25px;
height: 43px;
background-size: 100%;
background-image: url("../images/mouse.png");
margin: 0 auto;
display: block;
cursor: pointer; }
#wrapper #changemarquee #buttons ul {
list-style: none;
padding: 0;
margin: 0 auto;
text-align: center;
margin-top: 10px; }
#wrapper #changemarquee #buttons li {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: grey;
cursor: pointer;
opacity: .7;
margin-right: 3px;
border: 1px solid grey; }
#wrapper #changemarquee #buttons li.mainbutton {
background: white;
opacity: 1; }
#wrapper #about #bio {
overflow: auto;
width: 1020px;
margin-left: auto;
margin-right: auto; }
#wrapper #about #bio p {
float: left;
width: 740px;
font-family: "Open Sans";
color: #797a7f;
margin-top: 50px;
line-height: 120%; }
#wrapper #about #bio figure {
float: right;
width: 162px;
height: 162px;
background-image: url("../images/haych_info_logo.png"); }
#wrapper #about #services {
overflow: auto;
width: 960px;
margin: 150px auto 0 auto; }
#wrapper #about #services figure {
float: left;
background-image: url("../images/icons.png");
background-repeat: no-repeat;
width: 250px;
height: 350px;
background-size: 100%; }
#wrapper #about #services p {
float: right;
width: 500px; }
#wrapper #about #services p span {
border-width: 2px;
border-color: #333745;
border-style: solid;
width: 136px;
height: 31px;
border-radius: 34px;
display: block;
text-align: center;
line-height: 31px;
font-size: 10px;
color: black;
margin: 35px 0;
cursor: pointer;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out; }
#wrapper #about #services p span:hover {
background: #75867e;
background: #777f9a; }
#wrapper article#testimonials {
margin-top: 150px; }
#wrapper article#testimonials * {
margin-bottom: 50px; }
#wrapper article#testimonials h1, #wrapper article#testimonials h2, #wrapper article#testimonials h3 {
width: 100%;
text-align: center; }
#wrapper article#testimonials #testimonial_slider {
overflow: hidden;
whitespace: no-wrap;
width: 600px;
margin: 0 auto; }
#wrapper article#testimonials #testimonial_slider .test_inner {
width: 5000px;
-webkit-transition: translate, 0.5s, ease-in-out, margin-left, 0.5s, ease-in-out;
-moz-transition: translate, 0.5s, ease-in-out, margin-left, 0.5s, ease-in-out;
transition: translate, 0.5s, ease-in-out, margin-left, 0.5s, ease-in-out; }
#wrapper article#testimonials #testimonial_slider .test_inner h1 {
width: 600px;
font-size: 42px;
font-family: "Playfair Display";
color: #333745;
line-height: 1.143;
margin-left: auto;
margin-right: auto;
display: inline-block; }
#wrapper article#testimonials #testimonial_slider .test_inner h1 span {
font-size: 20px;
font-family: "Open Sans";
color: #d6d6d6; }
#wrapper article#testimonials h2 {
text-decoration: underline; }
#wrapper article#testimonials h2, #wrapper article#testimonials h3 {
font-size: 20px;
font-family: "Open Sans";
color: #d6d6d6;
line-height: 1.2; }
#wrapper article#testimonials ul {
list-style: none;
width: 100%;
text-align: center; }
#wrapper article#testimonials ul li {
display: inline-block;
border-width: 2px;
border-color: #333745;
border-style: solid;
border-radius: 50%;
background: white;
width: 15px;
height: 15px;
margin-left: 15px;
cursor: pointer; }
#wrapper article#testimonials ul li.mainbutton {
background-color: #333745; }
#wrapper article#testimonials ul li:nth-child(1) {
margin-left: 0; }
#wrapper article#blog_highlights .posts {
margin: 0 auto;
background-color: white;
width: 960px;
height: 600px;
list-style: none;
padding: 0;
overflow-y: scroll;
overflow-x: hidden; }
#wrapper article#blog_highlights .posts li {
list-style: none; }
#wrapper article#blog_highlights .posts li.post_single {
margin-bottom: 35px; }
#wrapper article#blog_highlights .posts li.post_single ul {
padding: 0;
padding-top: 1px;
margin: 0;
width: 100%;
height: 150px;
padding-left: 250px;
position: relative; }
#wrapper article#blog_highlights .posts li.post_single ul img {
float: left;
width: 250px;
height: 100%;
background: #46b13b;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
left: 0; }
#wrapper article#blog_highlights .posts li.post_single ul li {
float: left;
margin-left: 20px; }
#wrapper article#blog_highlights .posts li.post_single ul li h2, #wrapper article#blog_highlights .posts li.post_single ul li h3 {
font-family: "Open Sans"; }
#wrapper article#blog_highlights .posts li.post_single ul li * a {
text-decoration: none;
color: black; }
#wrapper article#blog_highlights .posts li.post_single ul li * a:visited {
color: black; }
#wrapper article#blog_highlights .posts li.post_single ul li h3 {
font-weight: 100;
margin-top: 20px;
font-size: 16px; }
#wrapper article#blog_highlights .posts li.post_single ul li h2 {
font-weight: 400;
margin-top: 25px; }
#wrapper article {
margin-top: 150px; }
Aucun commentaire:
Enregistrer un commentaire