How to Optimize/Simplify CSS

Asked

Viewed 196 times

5

I created a photo album using a list and customizing with CSS, but when I see the CSS became huge, I don’t think I know how to make my code more functional, someone can give me tips?

@charset "utf-8";

ul#album-fotos {
    width: 700px;
    margin: 0 auto;
    padding: 50px;
    overflow: hidden;
    list-style: none;
}

ul#album-fotos li {
    float: left;
    width: 200px;
    height: 200px;
    margin: 10px;
    border: 5px solid #dddddd;
    background-color: white;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease-in;
}

ul#album-fotos li:hover {
    transform: scale(1.5);
}

/*foto 01*/
ul#album-fotos li#foto01 {
    background: url('../imagens/galeria-01.jpg') no-repeat;
    background-position: 50% 50%;
    background-size: 400px 400px;
    background-color: #ffffff;
}
ul#album-fotos li#foto01:hover {
    background-position: 0px 0px;
    background-size: 200px 200px;
}
/*foto 02*/
ul#album-fotos li#foto02 {
    background: url('../imagens/galeria-02.jpg') no-repeat;
    background-position: 50% 50%;
    background-size: 400px 400px;
    background-color: #ffffff;
}
ul#album-fotos li#foto02:hover {
    background-position: 0px 0px;
    background-size: 200px 200px;
}
/*foto 03*/
ul#album-fotos li#foto03 {
    background: url('../imagens/galeria-03.jpg') no-repeat;
    background-position: 50% 50%;
    background-size: 400px 400px;
    background-color: #ffffff;
}
ul#album-fotos li#foto03:hover {
    background-position: 0px 0px;
    background-size: 200px 200px;
}
/*foto 04*/
ul#album-fotos li#foto04 {
    background: url('../imagens/galeria-04.jpg') no-repeat;
    background-position: 50% 50%;
    background-size: 400px 400px;
    background-color: #ffffff;
}
ul#album-fotos li#foto04:hover {
    background-position: 0px 0px;
    background-size: 200px 200px;
}
/*foto 05*/
ul#album-fotos li#foto05 {
    background: url('../imagens/galeria-05.jpg') no-repeat;
    background-position: 50% 50%;
    background-size: 400px 400px;
    background-color: #ffffff;
}
ul#album-fotos li#foto05:hover {
    background-position: 0px 0px;
    background-size: 200px 200px;
}
/*foto 06*/
ul#album-fotos li#foto06 {
    background: url('../imagens/galeria-06.jpg') no-repeat;
    background-position: 50% 50%;
    background-size: 400px 400px;
    background-color: #ffffff;
}
ul#album-fotos li#foto06:hover {
    background-position: 0px 0px;
    background-size: 200px 200px;
}

ul#album-fotos li span {
    opacity: 0;
    color: white;
    background-color: rgba(0, 0, 0, 0.3);
    font-size: 11pt;
    line-height: 370px;
    padding: 5px; 

}
ul#album-fotos li:hover span {
    opacity: 1;
}
css

  • Not even that big, rsrs, but there are ways to organize this better yes, creating variables for properties that you will use several times with the same value, or in the future you make bigger sites, a tip is to separate the CSS of each page into different files instead of leaving everything in the same CSS file

  • 2

    https://codepen.io/valdeir2000/pen/qgoovQ?editors=1101

  • @Valdeirpsr liked the approach to the class name! It bothers you if I include in my reply, had not attacked me in this option :D

  • 1

    @hugocsl May include.

2 answers

6


There are some ways for you to better organize it so yes, you can create variables for values that repeat a lot, and group classes that have the same properties.

As for example you repeat the same properties for all images and only change the background, so one of the ways to organize it would be like this. Note that in the :root i created a variable with the --size 200px this may be easier if you want to change this size on all images at once, and I have grouped the classes that had the same attributes.

About the selector you used for the images, a more simplified way of doing it is like the @Valdeirpsr mentioned in the comments that it would reference the element by the attribute id.

That way you can take all the elements that I have id starting with the word "photo" and turn into a single selector!

Soon all these selectors would be simplified to a single selector

ul#album-fotos li#foto01,
ul#album-fotos li#foto02,
ul#album-fotos li#foto03,
ul#album-fotos li#foto04,
ul#album-fotos li#foto05,
ul#album-fotos li#foto06,

It’s the same as just that!

[id^="foto"]

OBS: In the model below I did this treatment only in :hover to help you understand. Here are more details on how to select by attribute in CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/Seletor_de_atributos

Vc tb declared his background in an "extensive" way separate each of the properties, but with a shorthand vc puts everything in one line. And equal values need not be repeated, for example background-position: 50% 50%; might just be background-position: 50%; (but if you want for a matter of cross-browser can keep the 2 values, this is practically irrelevant)

background-position: 50% 50%;
background-size: 400px 400px;
background-color: #ffffff;

It would be the same as that in shorthand

background: 50%/400px #ffffff;

Follows a proposal for reformation.

@charset "utf-8";

:root {
    --tamanho: 200px;
    --tamanhox: 400px;
}
/* imagens */

ul#album-fotos li#foto01,
ul#album-fotos li#foto02,
ul#album-fotos li#foto03,
ul#album-fotos li#foto04,
ul#album-fotos li#foto05,
ul#album-fotos li#foto06, {
    background: 50%/var(--tamanhox) #ffffff;
}

/* aqui eu fiz uma seleção por atributo para pegar todos os IDs */
[id^="foto"]:hover {
    background: 0px/var(--tamanho);
}

ul#album-fotos {
    width: 700px;
    margin: 0 auto;
    padding: 50px;
    overflow: hidden;
    list-style: none;
}

ul#album-fotos li {
    float: left;
    width: var(--tamanho);
    height: var(--tamanho);
    margin: 10px;
    border: 5px solid #dddddd;
    background-color: white;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease-in;
}

ul#album-fotos li:hover {
    transform: scale(1.5);
}

/*foto 01*/
ul#album-fotos li#foto01 {
    background: url('../imagens/galeria-01.jpg') no-repeat;
}
/*foto 02*/
ul#album-fotos li#foto02 {
    background: url('../imagens/galeria-02.jpg') no-repeat;
}
/*foto 03*/
ul#album-fotos li#foto03 {
    background: url('../imagens/galeria-03.jpg') no-repeat;
}
/*foto 04*/
ul#album-fotos li#foto04 {
    background: url('../imagens/galeria-04.jpg') no-repeat;
}
/*foto 05*/
ul#album-fotos li#foto05 {
    background: url('../imagens/galeria-05.jpg') no-repeat;
}
/*foto 06*/
ul#album-fotos li#foto06 {
    background: url('../imagens/galeria-06.jpg') no-repeat;
}

ul#album-fotos li span {
    opacity: 0;
    color: white;
    background-color: rgba(0, 0, 0, 0.3);
    font-size: 11pt;
    line-height: 370px;
    padding: 5px; 

}
ul#album-fotos li:hover span {
    opacity: 1;
}

  • Let’s say you have another element on the page with the id #fotosGaleria, or #fotoPrincipal, or #fotosMenu... the rule [id^="foto"]:hover will chip everything :D... had to specify pointing to the li’s within #album-photos... would stay #album-fotos [id^="foto"]:hover... but I still think it’s better #album-fotos li:hover... by logic, these id’s #foto01, #foto02 etc. are only serving even to differentiate the background images of each one.

  • In fact, you wouldn’t even need id’s, just use Nth-Child... The exaggerated use of id’s is unique to those who are starting to write :) codes, in this case AP

  • @Sam really are many details, and each case an option can work better, the idea was to pass more general concepts. Nth-Child tmj can give problem if it.include another element between a.photo and another etc., the truth my eh that putting class in id would no longer be a good practice, at least in my point of view... []

  • They helped me so much, thanks so much!

  • @Filipepetter, I’m glad he helped you. Always keep in mind the concepts we address in the answers here, they are key to working well and in a practical way with CSS. Success! Abs

5

In addition to grouping common properties, you can eliminate unnecessary things such as:

ul#album-fotos li#foto05 { ... }

If a id is unique on a page, you can go straight to id #foto05, without having to write the huge path to it, already saving a lot of code and making it easier to read, thus getting:

#foto05{ ... }

This way, grouping all elements with common properties in the same rule, would look like this:

#foto01, #foto02, #foto03,
#foto04, #foto05, #foto06 {
   background-position: 50% 50%;
   background-size: 400px 400px;
   background-color: #fff;
   background-repeat: no-repeat;
}

The part of :hover, also doesn’t make sense:

ul#album-fotos li#foto01:hover { ... }
ul#album-fotos li#foto02:hover { ... }
etc..

Well, if all the li inside #album-fotos suffer the same effect on :hover, it makes no sense to separate using different id’s. A single rule would suffice:

#album-fotos li:hover{ ... }

This also works for other rules in your CSS, so overall:

#album-fotos {
    width: 700px;
    margin: 0 auto;
    padding: 50px;
    overflow: hidden;
    list-style: none;
}

#album-fotos li {
    float: left;
    width: 200px;
    height: 200px;
    margin: 10px;
    border: 5px solid #dddddd;
    background-color: white;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease-in;
}

#album-fotos li:hover {
   background-position: 0 0;
   background-size: 200px 200px;
   transform: scale(1.5);
}

#foto01, #foto02, #foto03,
#foto04, #foto05, #foto06 {
   background-position: 50% 50%;
   background-size: 400px 400px;
   background-color: #fff;
   background-repeat: no-repeat;
}

#foto01 {
   background-image: url('../imagens/galeria-01.jpg');
}

#foto02 {
   background-image: url('../imagens/galeria-02.jpg');
}

#foto03 {
   background-image: url('../imagens/galeria-03.jpg');
}

#foto04 {
   background-image: url('../imagens/galeria-04.jpg');
}

#foto05 {
   background-image: url('../imagens/galeria-05.jpg');
}

#foto06 {
   background-image: url('../imagens/galeria-06.jpg');
}

#album-fotos li span {
   opacity: 0;
   color: white;
   background-color: rgba(0, 0, 0, 0.3);
   font-size: 11pt;
   line-height: 370px;
   padding: 5px; 
}

#album-fotos li:hover span {
   opacity: 1;
}

If all the <li> in #album-fotos are those that have id’s of 01 to 06, nor would need it:

#foto01, #foto02, #foto03,
#foto04, #foto05, #foto06 {
   background-position: 50% 50%;
   background-size: 400px 400px;
   background-color: #fff;
   background-repeat: no-repeat;
}

Simply include the above properties within the style below:

#album-fotos li {
   float: left;
   width: 200px;
   height: 200px;
   margin: 10px;
   border: 5px solid #dddddd;
   background-color: white;
   box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
   transition: all 0.3s ease-in;
   background-position: 50% 50%;
   background-size: 400px 400px;
   background-repeat: no-repeat;
}

Staying so now:

#album-fotos {
    width: 700px;
    margin: 0 auto;
    padding: 50px;
    overflow: hidden;
    list-style: none;
}

#album-fotos li {
   float: left;
   width: 200px;
   height: 200px;
   margin: 10px;
   border: 5px solid #dddddd;
   background-color: white;
   box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
   transition: all 0.3s ease-in;
   background-position: 50% 50%;
   background-size: 400px 400px;
   background-repeat: no-repeat;
}

#album-fotos li:hover {
   background-position: 0 0;
   background-size: 200px 200px;
   transform: scale(1.5);
}

#foto01 {
   background-image: url('../imagens/galeria-01.jpg');
}

#foto02 {
   background-image: url('../imagens/galeria-02.jpg');
}

#foto03 {
   background-image: url('../imagens/galeria-03.jpg');
}

#foto04 {
   background-image: url('../imagens/galeria-04.jpg');
}

#foto05 {
   background-image: url('../imagens/galeria-05.jpg');
}

#foto06 {
   background-image: url('../imagens/galeria-06.jpg');
}

#album-fotos li span {
   opacity: 0;
   color: white;
   background-color: rgba(0, 0, 0, 0.3);
   font-size: 11pt;
   line-height: 370px;
   padding: 5px; 
}

#album-fotos li:hover span {
   opacity: 1;
}

Let’s see it working:

#album-fotos {
    width: 700px;
    margin: 0 auto;
    padding: 50px;
    overflow: hidden;
    list-style: none;
}

#album-fotos li {
   float: left;
   width: 200px;
   height: 200px;
   margin: 10px;
   border: 5px solid #dddddd;
   background-color: white;
   box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
   transition: all 0.3s ease-in;
   background-position: 50% 50%;
   background-size: 400px 400px;
   background-repeat: no-repeat;
}

#album-fotos li:hover {
   background-position: 0 0;
   background-size: 200px 200px;
   transform: scale(1.5);
}

#foto01 {
   background-image: url('https://http2.mlstatic.com/S_889901-MLB20440401736_102015-O.jpg');
}

#foto02 {
   background-image: url('https://vignette.wikia.nocookie.net/monica/images/0/0a/Festa_turma_da_monica_painel_decorativo_anjinho_piffer.jpg/revision/latest?cb=20130930232726&path-prefix=pt-br');
}

#foto03 {
   background-image: url('https://static1.squarespace.com/static/57a4a607f5e231c1eb1226ce/57aa06ef37c581879046603f/5b29055d758d460f539bbe74/1529415060473/JAr0-BQG_400x400.jpg');
}

#foto04 {
   background-image: url('https://static1.squarespace.com/static/52557d46e4b0f3efcbd81dc8/t/5a395602085229099e52ea13/1527183612488/Final_HCD_Logo12072016_800X800.jpg');
}

#foto05 {
   background-image: url('https://d2sg07zx6lm3f.cloudfront.net/s3fs-public/styles/square_cropped/public/instagram/46667487_739600606423067_5494384775873874429_n.jpg%3F_nc_ht%3Dscontent.cdninstagram.com?CccicumQOzt7CnJq0uLz0qlQ4mwzPe5D&itok=dOHlNMfU');
}

#foto06 {
   background-image: url('https://static1.squarespace.com/static/5009914ee4b0779c48ca1d4a/578d75726a49637d20b62305/578d7572725e257ad6877c3e/1468889029160/About+%283%29.jpg');
}

#album-fotos li span {
   opacity: 0;
   color: white;
   background-color: rgba(0, 0, 0, 0.3);
   font-size: 11pt;
   line-height: 370px;
   padding: 5px; 
}

#album-fotos li:hover span {
   opacity: 1;
}
<ul id="album-fotos">
   <li id="foto01">
      <span>foto 1</span>
   </li>
   <li id="foto02">
      <span>foto 2</span>
   </li>
   <li id="foto03">
      <span>foto 3</span>
   </li>
   <li id="foto04">
      <span>foto 4</span>
   </li>
   <li id="foto05">
      <span>foto 5</span>
   </li>
   <li id="foto06">
      <span>foto 6</span>
   </li>
</ul>

  • Excellent explanation, thank you!

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.