I've been making use of data-* tags in HTML to isolate components within the global CSS scope it's been nice so far - hard to standardise across an industry, I can imagine, being relatively domain specific, but trying to standardise class usage hasn't gone any better. Personally, I think people got way too caught up abusing classes. There's also (a browser extension - basically a local codepen) which is probably my favourite sandbox for this type of thing. Brad Frost's Atomic Design ( /blog/post/atomic-web.) has been great for someone who doesn't want to Bootstrap/Foundation/Semantic/Whatever.Īfter learning (and still relearning) concepts from professionals, the most useful things to me have been reading other people's CSS (digging through source code was good for me) and investigating attributes I don't understand on MDN.įractal ( fractal.build) is a sweet project for creating your own pattern library. Rachel Andrew ( ) and Chris Coyier ( ) have a good decade worth of material around each in-and-out is also good for shaping your own opinion on a subject - especially when working alone, since these perspectives won't jump into your head on their own. Awesome lists on GitHub are a good start. ![]() If you go hunting for good representations of CSS, you can be surprised by (and learn a lot from) what's out there. I think good CSS is hard the way good anything is hard. Like comment: Like comment: 2 likes Comment button Reply Collapse Expand It doesn't take long to understand the concept, just takes more time getting use to double dashes and underscores.ĥ Reasons To Use BEM (a.k.a. I found it a bit silly at first but forced myself and my team to use it because we had to collaborate with an off-shore team that uses BEM. Do we have to spell out the word "button" or can you shorten it to "btn"? Does it still get the idea across? Thats up to you and your team.Īgain I highly recommend reading up on BEM. This can happen, however, this can be more the developers issue and not exactly on the naming convention itself. Notice the modifier style under the main block style.for the same reason aforementioned-specificity.Īs far as BEM classes getting a bit long. I also know that the second paragraph has a modifier signified by "-" (double dashes) meaning it inheriting styles but also changing them up ideally you would want your modifiers below the main styles for "specificity" reasons - this will cause them not to be overwritten.Everything with an "_" (underscore) are child elements that are dependent on the main.'.block_element - modifier' (hence the name)īased on the above image, I know at a glance: BEM is just a naming convention, so you can still have a "utility-first" approach or atomic design to your CSS. If you are working within a group or with vendors that are familiar with the syntax, even seeing the code for the first time, they wouldn't have to do much to parse what classes are for what. Learn about CSS specificity, Emma Wedekind has a great article addressing this:īEM is mostly about readability.If you ever find yourself wondering why a style is being overwritten, it maybe due to a class being to general and not specific enough. If working with Flexbox use Chris Coyiers guides as a resource:.If working with CSS Grid use Chris Coyiers guides as a resource:.Either way, these techniques are quite powerful on their own. However, I use them in conjuction with Bootstrap. In many cases you don't really need a framework if you learn how to utilize grid and flexbox. ![]() Learn layout techniques before frameworks Always keep a resource open,, , dev.to or Mozilla.Stay abreast to the basics before trying a framework.With that said, I would say: Learn the Basics first I find JS hard due to it not being the language I work with continously. Like any other language, if you are not working with it consistently, it won't stick.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |