Posted on
No Peter Griffin operating blinds gifs allowed ;)
For further actions, you may consider blocking this person and/or reporting abuse
Ishan Bagchi -
Lovepreet Singh -
Paul Guilbert -
Ives van Hoorne -
Once suspended, 5t3ph will not be able to comment or publish posts until their suspension is removed.
Once unsuspended, 5t3ph will be able to comment and publish posts again.
Once unpublished, all posts by 5t3ph will become hidden and only accessible to themselves.
If 5t3ph is not suspended, they can still re-publish their posts from their dashboard.
Once unpublished, this post will become invisible to the public and only accessible to Stephanie Eckles.
They can still re-publish the post if they are not suspended.
Thanks for keeping DEV Community safe. Here is what you can do to flag 5t3ph:
Unflagging 5t3ph will restore default visibility to their posts.
Top comments (63)
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!
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 :)
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:
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
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!
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.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
Well put! But improving every day thanks to browsers becoming more comparable 🙌🏻
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!
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 🙂
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.
I'm struggling between PHP (Laravel) and Node. I don't really care about frontend but I want to be a backend pro, and it's hard, since I don't have a job, so I have to consider how many Laravel/Node apps are out there, and also what rate of these companies follow the latest tech, are Laravel guys or Node guys are more likely to upgrade to the next best thing? I know there are two kind of developers: one that feeds the family, and one who's looking for exciting new territories. Would hate to end up at a company where all new ideas are turned down, because "our's the only good way to do stuff and it is nearly perfect, so let's just make it work and lay back until the next bug report arrives".
I think the problem I have with CSS is just trying to remember all of the little details, properties, and implementation part of the elements and the components. I do love the design side of it and figuring out what colors to use. I feel like i spend alot of time on it if I were to make a project without a CSS cheat sheet or reference and I would eventually find myself in a rabbit hole of wondering what to use. I recently been trying to look into like the CSS framework Materialize and find ways to work smarter. I am always trying to find easy to digest resources for it and find what works for me. This mostly comes from my self taught experience so far. I am always afraid of spending more time on it then I need to.
I am trying to find better resources for it and always understand it when I have downtime.
this reminds me of a video of a conference about my frustration of CSS at times. Write Less CSS