Let’s not beat around the bush: writing great CSS code can be painful. When I was building apps, CSS was the part I never enjoyed. But you can’t escape it, right? I mean, we are so focused on the user experience and the design nowadays that we just can’t skip that part. When beginning a project, all is working fine. You have a few CSS selectors : But when your app gets bigger and bigger, it starts to look awful. You’re confused about your CSS selectors. You find yourself writing things like I have a purpose today: to make you better at writing CSS. I want you to take a look at your older projects and think : oh boy, how could I ever write something like this? Ok, you might think, you have a point. But what about CSS frameworks? That’s what they stand for, isn’t it? That’s how we write good CSS code. Sure. But there are some downsides:
And after all, you landed on this article and there’s a reason for that, right? So without further ado, let’s learn how to get better at CSS. Note: this is not an article about how to design beautiful apps. It’s about learning how to write maintainable CSS code and how to organize it. SCSSI’ll be using SCSS in my examples. SCSS is a CSS pre-processor. Basically, it is a superset of CSS: it adds some cool features like variables, nesting, imports, and mixins. I’ll talk about what features we are going to use right away. VariablesYou can have variables with SCSS. The main benefit: reusability. Let’s assume that you have a palette of colors for your app. Your primary color is blue. So you put blue everywhere: the And all of a sudden, you don’t like blue. You prefer green.
// Declare a variable $primary-color: #0099ff; // References a variable h1 { color: $primary-color; } NestingYou can also nest your code with SCSS. So this snippet h1 { font-size: 5rem; color: blue; } h1 span { color: green; } can become this: h1 { font-size: 5rem; color: blue; span { color: green; } } Much more readable, isn’t it? You spend less time writing complex selectors with nesting. Partials and importsWhen it comes to maintainability and readability, it’s impossible to keep all your code in one big file. It can fit your needs when experimenting or building a small app, but at a professional level…don’t even try. Luckily for us, SCSS allows us to do so. You can create partial files by naming the file with a leading underscore: As for importing, well use the // _animations.scss @keyframes appear { 0% { opacity: 0; } 100% { opacity: 1; } } // header.scss @import "animations"; h1 { animation: appear 0.5s ease-out; } Ah! you might think. You made a mistake here! It’s Nope. SCSS is smart enough to know you’re talking about a partial file when you name them that way. And that’s all we need to know about variables, nesting, partials, and import. SCSS has some more features like mixins, inheritance, and other directives ( If you want to know more about it, check their docs. They’re well-written and easy to understand. Organizing CSS Code: The BEM MethodologyI can’t remember how many times I used to give catch-all terms to my CSS classes. You know: We often don’t know how to name things. And yet it’s important. What if you were building an app and you decided for some reasons to set it aside for some months? Or worse, what if someone takes back the project? If your CSS code hasn’t been properly named, it will be hard to know what you’re talking about at a glance. BEM helps us solving this problem. BEM is a naming convention and stands for Block Element Modifier. This methodology can make our code structured, more modular, and reusable. Now let’s explain what is a block, an element, and a modifier. BlocksThink of the block as a component. Remember when you played Legos as a kid? Well, let’s go back in time. How would you build a simple house? You’d need a window, a roof, a door, some walls, and that’s it. Well those are our blocks. They are meaningful on their own. Naming: the block name : ElementsNow how would you build a window with your legos? Well maybe some of them look like frames, and when you assemble four of them, you get a beautiful window. Those are our elements. They are the parts of a block, and they are needed in order to build our block. But out of their block, they are useless. Naming: block name + ModifiersNow that you’ve built your window, you may want to have a green one or a small one. Those are things called modifiers. They are flags on blocks or elements and they are used to change behaviors, apparences, and so on. Naming: block name OR element name + Some notes
An exampleHere is an exercice for you. Go around to your favorite or most used websites and try to think of what would be the blocks, elements, and modifiers. For example, this is what I imagine on the Google store: It’s your turn. Be curious and think about what people could have done better. As always, you have to search by yourself, experiment, and create to get better at what you want. Putting it all togetherYou’ll find below some examples showing the power of BEM. Organizing CSS files: the 7–1 patternStill with me? Great! Now let’s see how to organize CSS files. This part will really help you be more productive, and will allow you to instantly find where you have to modify your CSS code. And to do so, we’ll learn about the 7–1 pattern. Doesn’t look like anything to me, you might think. Trust me, it’s fairly simple. You have to follow 2 rules:
The 7 folders:
The main fileThis is where you’ll import all your partials. @import abstracts/variables; @import abstracts/functions; @import base/reset; @import base/typography; @import base/utilities; @import components/button; @import components/form; @import components/user-navigation; @import layout/header; @import layout/footer; ... Yes. It seems overwhelming. But I knew you would think that. This architecture is adapted to larger projects, but not to small ones. So here is a version adapted to smaller projects. First, you won’t need the Then, you have two choices:
sass/ _animations.scss _base.scss _buttons.scss _header.scss ... _variables.scss main.scss It’s up to you. You convinced me! But how do I use it ? I mean, browsers don’t support Good catch! This is our final step, and we’re going to learn how to compile SCSS to CSS right away. From SCSS to CSSFor this, you’ll need Node.js and NPM (or Yarn). We’ll use a package called Its CLI (Command Line Interface) is fairly easy to use: node-sass <input> <output> [options] There are multiple options out there, but we’ll use only two:
If you’re a curious person (which I hope you are, a developer should be curious!), go here for the full docs. Now we know what tools we’ll use. The rest is even simpler. Just follow these steps:
touch index.html mkdir -p sass/{abstracts,base,components,layout} css cd sass && touch main.scss
{ ... "scripts": { "watch": "node-sass sass/main.scss css/style.css -w", "build": "node-sass sass/main.scss css/style.css --output-style compressed" }, ... }
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8"> <meta name=”viewport” content=”width=device-width, initial-scale=1.0"> <meta http-equiv=”X-UA-Compatible” content=”ie=edge”> <link rel=”stylesheet” href=”css/style.css”> <title>My app</title> </head> <body> <h1 class=”heading”>My app</h1> </body> </html> And that’s it, you’re ready to go! Run BonusesAdding live reloadYou may want to add live reload to be even more productive instead of manually reloading your local Once again, follow these simple steps:
{ ... "scripts": { "start": "npm-run-all --parallel liveserver watch", "liveserver": "live-server", "watch": "node-sass sass/main.scss css/style.css -w", }, ... } Now when you run Adding autoprefixerWe set development tools, great! Now, Let’s talk about build tools and especially one : Autoprefixer. Indeed, when you build a website, you may use new features that are not fully supported in all browers. Therefore, vendor prefixes are the solution to add support for these features. This is an example of what it looks like :
You guessed it, it’s tedious to write. That’s why we need autoprefixer to make our CSS code compliant with browsers without adding an extra layer of complexity. So what we’ll do code-wise to build our CSS is :
This will be the last steps, so bear with me, you’re nearly done ?
{ ... "scripts": { "start": "npm-run-all --parallel liveserver watch", "liveserver": "live-server", "watch": "node-sass sass/main.scss css/style.css -w", "compile": "node-sass sass/main.scss css/style.css", "prefix": "postcss css/style.css --use autoprefixer -o css/style.css", "compress": "node-sass css/style.css css/style.css --output-style compressed", "build": "npm-run-all compile prefix compress" ... } Now when you run But you know what’s even more awesome? I set up a repo for you just in case you want to quickly get started ? Aaaaaand, that’s all for today! Now you’re ready to write maintainable, modular, and reusable CSS code. I hope you liked this article. If so, feel free to give me feedback in the comments. Bye bye until next time! The post How to get better at writing CSS appeared first on Design your way. from https://www.designyourway.net/blog/css-html/how-to-get-better-at-writing-css/
0 Comments
Leave a Reply. |
AuthorPleasure to introduce myself I am Jamie 27 years old living in Searcy, AR. I am web developer and have developed over 50 sites for clients. Now a days I am focused on designing as I feel I am lacking it. Archives
April 2019
Categories |