No Peter Griffin operating blinds gifs allowed ;)
Stephanie Eckles
Posted on
What is a problem you constantly have with CSS, or something you keep wanting to learn how to do?
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (60)
I mostly have a hard time evolving with new paradigms. I just have a hard time wrapping my head around whether I should use the new stuff, the old stuff, etc.
For about 7 years I was working on projects with government contracts soooo thanks to having to support older IE I pushed off learning grid (for example) until the last few months :) I also spent that time essentially evolving with Bootstrap aka offloading the decision ;) What I love about modern CSS and advanced tooling is that you can accomplish a lot with a little. That said, even when you are familiar with both "old" and "new" there are always about 7 ways to accomplish the same thing, which is probably why CSS has some negative vibes. I love that part, it fuels my creativity :)
Haha, alrighty:
Also be sure you understand the box model and the cascade. After that - practice! Get a Codepen account and even if it's just small works for your own benefit, your learnings can go with you anywhere! I also have a series (latest posts on my profile) called: "Modern CSS Solutions for Old CSS Problems" and I have a looot of posts planned for that :) Thanks for the encouragement, and best of luck to you!
Making icons center next to text. I use emojis because it's easy. For example, if I wanted to make a button that said
upload image 🖼and use a custom icon, the icon is never vertically centered. Oh look, even the emoji isn't centered.Both grid and flexbox can be defined as an "inline" variant which is great for both buttons or text within a paragraph. I would recommend flexbox as the slight advantage since its default alignment is along the x-axis (horizontal).
Here's a possible solution for both button-looking links and inline links - you could swap the link to a span and update the class names:
In my role (frontend overseeing a design system impacting a large enterprise), I hear similar thinking a lot, but I'm passionate about frontend and helping others be successful! There are so many amazing resources to continue learning CSS, and it may mean taking a step back and approaching it with a beginner's mind. I have a series for beginners but two episodes evolve a blog layout and also a "card" layout. I specifically chose those because the blog shows how to begin managing general typography and content, and the card layout showcases properties for successful containers. A third episode covers expanding those to be responsive. I don't want this thread to become self promo, but DM me if you would like those links. The goal isn't necessarily to make it the prettiest but to make it functional, semantic, scalable, and accessible - principles you can appreciate from backend development, too :)
Problems I am facing in current projects are
Naming convention for that I am following BEM.
Being specific with units usability i.e for font size,letter spacing,line height,width, height etc..
Any thoughts on this?
Do you mean incorporating sizing into the BEM naming classes? It depends if you're going full-in on a completely utility library similar to Tailwind or if you're supplying a few classes for properties that enhance components in predictable ways, like elevation and spacing from Material.
Most sizing is a number that is either an arbitrary scale that says nothing obvious about the result, or is implied as a multiplier (like x * 8px for an 8px baseline grid) or involves some type of metaphor, the popular one being "t-shirt sizing" (xs, sm, md, lg, xl). And then there may be breakpoint modifiers thrown in depending on what the sizing is in relation to. They all have their place, but ultimately being sure to document and being consistent will help. You may want to do some comparison of existing frameworks and design systems. Viewing sizing in context of a mature component system may help identify what will work for your project. Good luck!
No that's not what I meant.
It's regqrding the units use px,vh,vw,rem,em etc.
For font size I can use px, rem, em but don't know why to choose particular unit.
Gotcha! Then the article I linked will provide some additional info on spacing for typography and other scenarios: Guide to CSS Units for Relative Spacing
Thanks
I want to get better at creating pure CSS art that I see other devs make that blows my mind. I don't even know where to start with that though. I do check out their code on Codepen, but it gets a bit overwhelming at the sheer length of CSS I see.
Start small - it's ok if it's full of spans that just have background color applied :) You can work up your skills! Check out @ellie_html on twitter, she's doing CSS art for most of her #100DaysOfCode and she started with almost no CSS knowledge. A little every day will take you far!
I have just a couple like this pumpkin using CSS gradients - it took me a long time, then I made a snowglobe to work on it some more. Learning Sass and depending on what you're making an HTML preprocessor like Pug that can make it easier to generate duplicative HTML might be useful. But I have a lot to learn in that area too! Good luck!
Thanks Stephanie!
I should mention I did attempt a CSS version of the Doctor's TARDIS. I'll definitely check out your work and start small next time!
distracted-jang-cfb752.netlify.app/
Nice work!!! It even vanishes, I love it!
I never really know how to start if I have zero CSS in a project. How do I start structuring my CSS so my apps start looking a little more usable?
Typography and enhancing spacing between elements can take you a long way. You may also wish to include a reset such as Normalize. Then, choose a limited palette (to start) and experiment with adding color to improve hierarchy or help designate relationships between elements. Read up on accessible contrast as well. Here's an excellent Twitter thread from the creator of Tailwind CSS on little design tips to begin to improve your interface: twitter.com/i/events/8806882336418...
I relate to this so much. I have to plan it out and just do it and just make the functionality and look good to.
I dont know if I should learn BEM or take the leap with something like tailwind
I've really enjoyed using Tailwind in a few projects and once you get your
tailwind.configall set up, I've found that it dramatically increases the speed and efficiency of my styling and formatting.Even using a utility library you will find yourself with a need to compose reusable components. Learning how to name "components" of code is never a bad skill to pick up :) It helps in translating to a JS framework, or PHP files like for a WordPress theme, or communicating with coworkers and designers.
interesting, makes sense!
Naming classes :p
Putting jokes aside that is one of the hardest problems when it comes to programming, so no reason it should not be a problem on CSS.
No matter the tooling or setup you use, you still lose some time thinking about the naming convention to use.
box-shadow
Not even once.
haha! if you're a Chrome user, in the Inspector tools they provide a handy additional panel you can trigger to fine tune your results :) developers.google.com/web/tools/ch...
Very helpful! Thanks 🙂
I used to really love front-end dev, but it has totally stopped interesting me. When I have to write JS I try to find excuses to use a language that compiles into JS that I feel more fluent in, and I feel like CSS just never clicked. I can position things and make a basic page structure, but I can't "think in CSS." I have to study a lot of other designs and sometimes pay one of our designers with a bottle of whiskey to take care of some IE bugs with me haha
The good news is, IE bugs will soon be just a distant nightmare since they are now running Chromium :)
I applaud you for asking for help though! And we need all developers to make the thing work, it's ok to not be as skilled with CSS!
It can do amazing complicated things rather simply, but sometimes simple things are complicated and inconsistent to implement
cool stuff! Me too. :D Give me a million rows table to build a database without repetitions, but never ask me to make a frontpage for my app!
Well put! But improving every day thanks to browsers becoming more comparable 🙌🏻
I love & enjoy CSS but still can't wrap my head around grid & animations
Have you tried out Grid Garden for a fun way to practice grid syntax?
I was confused about animations until I realized keyframe animations and animated effects using
transformandtransitionwere not one and the same. Most of the time I can accomplish what I need to much more simply with the latter. I have a recent post on animated captions that also uses grid :)thanks for the tip Stephanie, I'm currently fiddling with grid garden, as for the animations, I found a good free 2-hour course on scrimba.
Hello!
I have a problem with Installing ReactJS using webpack and babel.
I followed steps in ReactJS turorial but in step9 I can't handle it.
I would appreciate it if you would teach me about it.
Hope your reply.
Thank you.
Text scaling is kinda hard.
Are you referring to responsive (fluid) text scaling? Here's one approach: css-tricks.com/snippets/css/fluid-...
Or are you referring to setting up a typographic scale? This tool does an excellent job showing the "popular" scales and you can even select a Google font to preview with: type-scale.com/ (I would suggest using
remunit for base typography scales, you can learn why in this post)Thanks for those links...definitely will go through them.