Cookie Consent by Free Privacy Policy Generator 📌 3 Keys too keeping CSS tidy


✅ 3 Keys too keeping CSS tidy


💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

Hello everyone! I think most of us would agree that CSS is not a very difficult language; but, on the other hand, a huge, messy page of CSS is very daunting. Tidy CSS is essential. Built into native CSS are three tools that can REALLY help keep CSS tidy if you just use them to good advantage. Today, we will take a look at these three tools.

CSS Variables

Just like in any programming language, CSS has variables which can hold a value. These variables can be really useful in many scenarios. For instance, if you are reusing a certain color again and again on a webpage, you can put it in a variable, and pass your variable into properties, as their value. If you do this with all your colors, you can change the whole color scheme of a page with comparative ease. Variables can hold any value you would give to a CSS property. Box shadows, line widths, opacities, you name it. This is really good for keeping you code readable, and easy to edit.

Now, let's take a look at the syntax for CSS variables:

Start out with a root selector like this:

:root{
}

All you variables will go in here. Now let's write our first variables:

:root{
    --button-color: red;
    --button-color-hover: rgb(200,100,100);
}

Now let's try out using our variables:

You see, our button worked quite nicely. Remmember, css varables don't just work for colors, they work for any value you would give a property.

The Ampersand Structure

This one is great for keeping your code from being cluttered. The ampersand structure is used for CSS pseudo selectors. In essence, you nest an elements pseudo selectors within the element's main selector, like this:

:root{
  --button-background: red;
  --button-background-hover: rgb(255,100,100);
}
button{
  background: var(--button-background);
  &:hover{
    background: var(--button-background-hover);
  }
}

If we were to run this code, we would have the same result, but our code is tidier.

CSS Nesting

Now, building on the concept of selectors inside of selectors, that we introduced with the ampersand structure, let's talk about CSS nesting. In CSS you can nest the selectors for child elements inside the selector for their parent. Like this:

HTML

<div class="input-holder">
  <input class="input">
</div>

CSS

.input-holder{
  display: flex;
  align-items: center;
  justify-content: center;
  .input{
    font-family: sans serif;
  }
}

Notice that I gave both my div and input elements classes, and I selected them using their classes. This is because, CSS nesting won't work if you try to select and element by their tag.

You can nest as many layers of parents and children as you like, with CSS nesting, and even use the ampersand structure within it. You could nest all your selectors if you wanted to, (though I wouldn't recommend it).

The Art of Using these Tools - Variables

I find a good rule of thumb with CSS variables is: "If you use the value more than twice in similar scenarios, create a variable." Now, admittedly, this may be extreme on my part, but I would recommend erring on the side of having too many variables, rather than not enough.

As far as naming your variables, make sure you name them a name that tells you what they hold, and make sure your names are structured consistently. For instance

:root{
    --button-color: red;
    --hover-color-button: white;
}

Would be an example of bad name choosing, whereas:

:root{
    --button-color: red;
    --button-color-hover: white;
}

Would be a correct matching of the structure of your names. This is important because, you will want to accurately remember the names of your variables (some IDEs will help you with this).

The Art of Using these Tools - Ampersand Structure

Ampersand structure is straightforward. When you are using CSS pseudo selectors, use the ampersand structure. To my knowledge, there is no advantage to not using them, whereas using them will keep you code much more navigable.

The Art of Using these Tools - Nesting

Now, this will take a little practice. The goal is to make your code as easy to navigate as possible. I would recommend, try to determine what main sections your page is split into, and nest all those sections' child selectors within the parent. For example:

Image of paint app page
With this page, you would want to nest everything inside the header, everything inside the top nav-bar, everything inside the canvas/tools toggle bar, and everything in the first tool pad, second tool pad, and third tool pad. Like this:

Marked up image of paint app page
Don't neglect to nest! It's worth it.

Conclusion:

To sum up, I hope these tools will be of good use to you in you future styling endeavors. if you have any questions contact me with my email below:

const email = [email protected]
...

✅ 3 Keys too keeping CSS tidy


📈 60.83 Punkte

✅ Tidy Up 6.0.1 - Find duplicate files and tidy up your hard drive.


📈 41.89 Punkte

✅ Introduction of CSS, What is CSS, Why we use CSS and How CSS describe the HTML elements


📈 33.34 Punkte

✅ The state of data quality: Too much, too wild and too skewed


📈 27.71 Punkte

✅ A BRIEF REVIEW OF CSS CASCADING, CSS SELECTORS and CSS SPECIFICITY.


📈 25.01 Punkte

✅ Stylify CSS: Automagic CSS bundles splitting into CSS layers in Astro.build


📈 25.01 Punkte

✅ CSS Grid: Moving From CSS Frameworks To CSS Grid (2018 and beyond)


📈 25.01 Punkte

✅ Choosing the Right CSS Approach: Tailwind CSS vs Bootstrap vs Vanilla CSS


📈 25.01 Punkte

✅ Keeping the keys to the kingdom secure


📈 22.31 Punkte

✅ 'Here's the File Clearview AI Has Been Keeping On Me, and Probably On You Too'


📈 22.28 Punkte

✅ Here's the File Clearview AI Has Been Keeping on Me, and Probably on You Too


📈 22.28 Punkte

✅ CSS Resize/Zoom-In effect on Image While Keeping Dimensions


📈 21.38 Punkte

✅ Keeping It Simple With CSS That Scales


📈 21.38 Punkte

✅ CVE-2015-5523 | Apple iOS up to 8.4.1 tidy memory corruption (HT205212 / BID-75037)


📈 20.94 Punkte

✅ Buchbesprechung: Tidy First?​


📈 20.94 Punkte

✅ KDE Plasma 5.16 Beta: Your Three Week Notification of a More Tidy and Composed Desktop


📈 20.94 Punkte

✅ Download der Woche: AD Tidy


📈 20.94 Punkte

✅ PHP 5.2.3 Tidy Extension tidy_parse_string memory corruption


📈 20.94 Punkte

✅ Buchbesprechung: Tidy First?​


📈 20.94 Punkte

✅ Keep your desk tidy with help from Aukey's XXL Gaming Mouse Pad at $8 off


📈 20.94 Punkte

✅ Spring into action and tidy up your digital life like a pro


📈 20.94 Punkte

✅ Keep your desk tidy and your phone charged with the KeySmart TaskPad — now 25% off


📈 20.94 Punkte

✅ Time Series Regression and Cross-Validation: A Tidy Approach


📈 20.94 Punkte

✅ Exploring Clang Tooling – Using Build Tools with clang-tidy


📈 20.94 Punkte

✅ CVE-2021-33391 | HTACG HTML Tidy 5.7.28 gdoc.c CleanNode -g use after free (ID 946)


📈 20.94 Punkte

✅ Google Chrome to tidy up tabs with Tab Groups Collapse feature


📈 20.94 Punkte

✅ Cloud Sprawl: How to Tidy It Up


📈 20.94 Punkte

✅ tidy 5.7.0 clean.c prvTidyTidyMetaCharset currentNode Denial of Service


📈 20.94 Punkte

✅ Folder Tidy 2.9


📈 20.94 Punkte

✅ Tips to keep your home workspace neat and tidy


📈 20.94 Punkte

✅ Reading Notes: Tidy First


📈 20.94 Punkte

✅ tidy 5.5.31 attrs.c IsURLCodePoint ISALNUM Denial of Service


📈 20.94 Punkte

✅ Folder Tidy 2.9 - $5.00


📈 20.94 Punkte

✅ Let iRobot's Roomba 675 smart robot vacuum tidy up at a $50 discount


📈 20.94 Punkte











matomo

Datei nicht gefunden!