And you also have to think about performance: you don’t want to load in every single line of CSS on the first page when most of it is used on other pages. You also wonder if old styles are still being used. When your codebase grows, you might start to wonder in which files you should put certain styles and how it should be scoped. BEM also provides a better structure for your CSS code and scalable CSS.ĬSS preprocessors in combination with BEM definitely improve the development experience a lot, but that doesn’t mean it’s perfect. BEM (Block Element Modifiers), is a naming styling that tries to solve the naming problem and structure that CSS often run into. That’s why, as your project grows larger, you need a proper structure. CSS is easy to learn but very hard to maintain. Going with classical CSS, using a preprocessor like SASS has been my way of styling applications for years. In this post, we are going to focus on three of my favorites: SASS, CSS-in-JS, and Tailwind. I’ve worked with different approaches like CSS modules, Styled-Components, frameworks like Bootstrap, or just vanilla CSS. This time, let’s take a look at some options for styling the application. In the last episodes, I took a look at JavaScript vs TypeScript, React vs Vue vs Angular vs Svelte, and Create React App vs Next.js. In Stack Choices, I take a closer look at some technologies that can help us to build these types of applications and try to make a good decision on what to use. The rise of serverless technologies allows developers to build and run applications without thinking about servers and this also allows front-end developers to create full-stack applications and build SaaS web apps. I’ll probably use it in the future, especially for personal projects or smaller design prototypes that don’t live within a larger Rails app.Photo by Victoriano Izquierdo on UnsplashĪs a developer, there are many choices to make when building your next application. In the future, I may just bite the bullet and get more comfortable using the SASS cli, but I’m glad I’ve had the chance to discover Prepros. I’m not currently using other preprocessors like CoffeeScript, Haml, or Markdown, but I like having the knowledge that if I chose to bring them in, Prepros could handle it! As an added bonus, the Prepros UI is easy on the eyes. The SCSS compiler is up-to-date, reliable, and does some nifty auto-prefixing to boot. It was easy to set up, and it sends OSX notifications when it’s finished compiling. Next, I downloaded Prepros, and there I found my winner. After awhile, it started giving me cryptic compiler errors (no line numbers, just a big red error.) All I could figure out, by randomly removing chunks of my code, was that my SCSS file had grown too big for the Koala to chew through. Koala was a little more difficult to configure at first, but overall it worked great-for a few days. When I turned to my colleague Mike for help, he suggested Koala and helped me get it installed. When I checked their github page, I realized the app hasn’t been updated in about 2 years. Compiler errors revealed that Scout is running an older version of SASS. However, I soon hit a snag when trying to pull in a couple of my favorite mixins and my grid framework of choice, Susy 2. The UI was straightforward, It had a helpful quick start video, and I was up and running within minutes. I just wanted something to compile my SASS. For my purposes, this ruled out tools like Hammer and CodeKit. My goal was to find something that would be quick to install and easy to use. Rather than using the SASS CLI, I decided to see if any of the GUI applications listed on the SASS website would be helpful. I wanted to leverage my familiar tools, and I wanted to get up and running fast. In the case of our recent website redesign, I found myself in a very different type of application, writing templates for our new Craft CMS install. We install the SASS gem in the application, and we’re good to go. Generally when I’m working on a project here at Atomic, I’m operating within the context of a larger application, maintained by the developers on my team, that runs Ruby on Rails or a similar tech stack. For design implementation, one critical power tool that I wouldn’t want to be left without is the CSS preprocessor SASS.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |