TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Things I wish I’d known about CSS

878 pointsby harshamv22almost 5 years ago

53 comments

k__almost 5 years ago
It always helped me to do an absolute basic concepts course on a new technology I learn.<p>Like, sure I can play around in Photoshop or Eclipse or CSS or JavaScript and find most things.<p>But a good 101 course is worth so much saved time.<p>Most of the stuff in that article was mentioned in a CSS box model course I did 10 years ago.<p>People were always baffled how I learned all this. Well, I read the docs!<p>They always assume every one learned like them, by trying stuff out all of the time, until they got something working. Then they iterate from project to project, until they sorted out the bad ideas and kept the good ones. With that approach, learning CSS would probably have taken me 10 times as long.<p>Sure this doesn&#x27;t teach you everything or makes you a pro in a week, but I always have the feeling people just cobble around for too long and should instead take at least a few days for a more structured learning approach.<p>What I didn&#x27;t learn about CSS in a basic course and what cost me multiple weeks to fix, was `pointer-events: none`. Keep this in mind when your clicks stop working after you pulled some new CSS ;)
评论 #23871963 未加载
评论 #23870476 未加载
评论 #23870767 未加载
评论 #23872126 未加载
评论 #23875375 未加载
评论 #23873798 未加载
评论 #23873955 未加载
评论 #23870588 未加载
评论 #23879128 未加载
评论 #23871609 未加载
评论 #23880694 未加载
评论 #23894579 未加载
cookiengineeralmost 5 years ago
Meanwhile, this is, oh so damn outdated. (I&#x27;m not kidding)<p>Most people don&#x27;t know that the flow model totally changed meanwhile, and something like &quot;display: inline-block&quot; actually means &quot;display: inline flow-root&quot;, everything that came after flexbox kind of had an influence to the meanwhile borderline insane display model as a result.<p>Everything related to inset, margin and padding has gotten an overhaul that is ready for ltr and rtl content where they switch x&#x2F;y flow based on &quot;direction: ltr (or) rtl&quot; whereas e.g. &quot;margin-inline&quot; and &quot;margin-block&quot; are the newer properties for the updated margin.<p>A lot of stuff has changed for the better, too.<p>CSS transforms are now specified in a cleaner way, with a predictable way to render them (e.g. translate rotate will not be different than rotate translate). So all CSS transforms have gotten their own properties like &quot;rotate: 90deg&quot; or &quot;scale: 1.23&quot;.<p>I learned a lot when I read through the actual CSS specifications, because I am implementing my own parser (for my Browser [1] project).<p>Also, did you know that @media, @supports and @viewport queries can be nested in any order? The media queries 4 [2] spec is kind of insane from an implementor&#x27;s view.<p>[1] <a href="https:&#x2F;&#x2F;github.com&#x2F;cookiengineer&#x2F;stealth" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;cookiengineer&#x2F;stealth</a> and <a href="https:&#x2F;&#x2F;github.com&#x2F;cookiengineer&#x2F;stealth&#x2F;blob&#x2F;X0&#x2F;FEATURES.md" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;cookiengineer&#x2F;stealth&#x2F;blob&#x2F;X0&#x2F;FEATURES.md</a><p>[2] <a href="https:&#x2F;&#x2F;www.w3.org&#x2F;TR&#x2F;mediaqueries-4&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.w3.org&#x2F;TR&#x2F;mediaqueries-4&#x2F;</a>
评论 #23874977 未加载
techbubblealmost 5 years ago
This was a great article and I learned a few new tricks.<p>I learned CSS over the years by gradually solving problems I encountered building apps. Compare this to people learning CSS now as evidenced by the #100DaysOfCode tag on Twitter. The learning technique is comprised primarily of using gradient-heavy, absolutely positioned HTML elements to create a photo-realistic, 3D rendering of objects.<p>The results are pretty amazing, but I have my doubts about whether these skills are easily translatable for building an interactive, responsive UI. Some examples:<p><a href="https:&#x2F;&#x2F;twitter.com&#x2F;bauervadim&#x2F;status&#x2F;1282264611912327169" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;bauervadim&#x2F;status&#x2F;1282264611912327169</a><p><a href="https:&#x2F;&#x2F;twitter.com&#x2F;mercyoncode&#x2F;status&#x2F;1282449080132804609" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;mercyoncode&#x2F;status&#x2F;1282449080132804609</a><p><a href="https:&#x2F;&#x2F;twitter.com&#x2F;ellie_html&#x2F;status&#x2F;1276177277315932161" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;ellie_html&#x2F;status&#x2F;1276177277315932161</a><p><a href="https:&#x2F;&#x2F;twitter.com&#x2F;thecoffeejesus&#x2F;status&#x2F;1282045825082781696" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;thecoffeejesus&#x2F;status&#x2F;128204582508278169...</a><p><a href="https:&#x2F;&#x2F;twitter.com&#x2F;alyd789&#x2F;status&#x2F;1271200537988431873" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;alyd789&#x2F;status&#x2F;1271200537988431873</a>
评论 #23869443 未加载
评论 #23869550 未加载
评论 #23869350 未加载
评论 #23870924 未加载
c-smilealmost 5 years ago
I believe that focal point of CSS understanding is that horrible <i>display</i> property. People just need to get that one as other stuff is relatively trivial.<p>display:xxx on some elements defines three things ( sorry, that is terrible architectural mistake authors of CSS have made initially )<p>1. display defines &quot;sibling requirement&quot; how that element wants to be replaced among its neighbors. `div {display:inline-box}` tells container to treat that div a single glyph placed inline among other glyphs.<p>2. In some cases it also defines &quot;layout manager&quot; of element&#x27;s content. E.g. display:table and display:inline-table tells the renderer that content shall be treated as table having tbody , rows, cells, etc. Same thing for display:flexbox, grid, etc.<p>3. In some cases it defines other things like display:none; display:list-item; Note: there is still no display:inline-list-item ...<p>Ideally we should have these instead:<p>1. display: inline | block; - and just these two.<p>2. flow: auto | text | table | vertical | horizontal | grid...; - defines layout manager of element&#x27;s content.<p>3. visibility: visible | hidden | <i>none</i>; - Note: visibility:none instead of display: none;
评论 #23873951 未加载
评论 #23874219 未加载
评论 #23882168 未加载
jb1991almost 5 years ago
Yikes. I&#x27;ve been earning 6 figures as of about two years ago doing mostly HTML and CSS UI design for a bank. And I still did not know about many of these! I guess they are things I wish <i>I&#x27;d</i> known about CSS! Better late than never I guess.
评论 #23869084 未加载
评论 #23869129 未加载
评论 #23869393 未加载
评论 #23880627 未加载
评论 #23877128 未加载
leephillipsalmost 5 years ago
I don’t thnk the author’s recommendation to include<p><pre><code> img { display: block; } </code></pre> in your reset is generally a good idea. It will break some common uses of images, for example to hold bits of math inline with the text when you are not using mathjax. If you want a displayed image, you should wrap it in a &lt;figure&gt; tag, which will give you a block element.
评论 #23872571 未加载
评论 #23872376 未加载
paozacalmost 5 years ago
Useful article. Getting started with CSS must be harder these days than it was 15-20 years ago. Not only for mobile-friendliness, but also because of the coexistence of flexbox&#x2F;grid&#x2F;traditional layouts. I&#x27;m wondering if the standard will ever been simplified, instead of being added more and more features.
评论 #23869042 未加载
评论 #23870784 未加载
评论 #23868923 未加载
评论 #23869139 未加载
评论 #23869011 未加载
评论 #23870672 未加载
评论 #23879615 未加载
评论 #23868979 未加载
wruzaalmost 5 years ago
Guys we need to talk. Are you capsbold serious? These are things that you learn in a first week of doing web development tutorials. I read this thread and it makes me think that I&#x27;m delusional because of a heat wave. Margins collapse? :focus exists? Me not getting a joke? I don&#x27;t understand.
评论 #23869366 未加载
评论 #23872325 未加载
评论 #23871442 未加载
评论 #23874694 未加载
评论 #23875859 未加载
评论 #23880661 未加载
c-smilealmost 5 years ago
There are couple of things that author still don&#x27;t get.<p>display:inline means that element does not establish a box. Such element is rather a collection of individual content boxes (e.g. glyphs). These boxes can be placed on different lines (text wrapping) and so on. As no element box as no margins and paddings applied to such elements.<p>img element (and input and other replaced(^) elements for that matter) is not a display:inline but rather display:inline-block. Even you will define them as display:inline they will be treated as display:inline-block and so e.g. margins will apply to them.<p>(^) representation of replaced elements (img,input,textarea,iframe,etc.) is outside the scope of CSS - they are always treated as solid boxes.
jitendracalmost 5 years ago
That is really useful.<p>I have been writing small html front-ends since 2008-09. HTML5,CSS3 made many things easier like gradients, Round borders, and many things that now developer do takes as granted. I clearly remember, how boring and frustrating it was to slice borders and corners from photoshop psd.<p>CSS3 and HTML5 made many good changes, but new css feature like grid, Flex-box all are still confusing. I have to look at the references every time I start new frontend work.
评论 #23870314 未加载
评论 #23869789 未加载
chrisweeklyalmost 5 years ago
If you&#x27;re looking for world-class CSS knowledge, start with <a href="https:&#x2F;&#x2F;every-layout.dev;" rel="nofollow">https:&#x2F;&#x2F;every-layout.dev;</a> if you build UI for a living and haven&#x27;t encountered axiomatic css and layout primitives, they&#x27;re likely to change your world.
评论 #23869401 未加载
评论 #23869230 未加载
评论 #23875629 未加载
andi999almost 5 years ago
Anybody knows a good book on CSS for ppl with a solid programming background? Every couple of years I try something and fail. Somehow the tutorial rave about the cascading on and on, and when it comes how to strategically design a good SAP working on different devices the stuff gets mute quickly.
评论 #23868948 未加载
评论 #23869138 未加载
评论 #23869239 未加载
评论 #23869422 未加载
gorgoileralmost 5 years ago
It feels like HTML and CSS could be useful for print layout, but I’ve rarely seen a high quality PDF renderer.<p>I know Atom’s markdown preview uses headless chrome under the hood. These are hugely heavyweight tools but the output is very high quality.<p>Are there any other recommended tools for going an HTML route, for typesetting? I’d much rather design pages that way than use InDesign, PDF scripting, or TeX.
评论 #23870539 未加载
评论 #23869455 未加载
评论 #23869863 未加载
评论 #23869551 未加载
评论 #23870677 未加载
评论 #23870818 未加载
评论 #23870146 未加载
continuationalalmost 5 years ago
&gt; Using pixels (px) is tempting because they’re simple to understand: declare font-size: 24px and the text will be 24px. But that won’t provide a great user experience, particularly for users who resize content at the browser level or zoom into content.<p>Pixels (px) in CSS are relative as well, and scale with zoom. What is the benefit of em&#x2F;rem?
评论 #23868828 未加载
评论 #23870142 未加载
评论 #23871497 未加载
评论 #23870732 未加载
ChrisMarshallNYalmost 5 years ago
That’s useful.<p>Some time ago, I wrote up a series about CSS. It’s still quite relevant (but CSS has come quite a ways, since then).<p>The thing I’ve found that is often misunderstood, is specificity. It’s a fairly non-trivial concept: <a href="https:&#x2F;&#x2F;littlegreenviper.com&#x2F;miscellany&#x2F;stylist&#x2F;introduction-to-specificity&#x2F;" rel="nofollow">https:&#x2F;&#x2F;littlegreenviper.com&#x2F;miscellany&#x2F;stylist&#x2F;introduction...</a>
yakshaving_jgtalmost 5 years ago
Cached URL since the server is apparently over capacity: <a href="https:&#x2F;&#x2F;webcache.googleusercontent.com&#x2F;search?q=cache:jcSTVFGdcZAJ:https:&#x2F;&#x2F;cssfordesigners.com&#x2F;articles&#x2F;things-i-wish-id-known-about-css+&amp;cd=1&amp;hl=en&amp;ct=clnk&amp;gl=ua" rel="nofollow">https:&#x2F;&#x2F;webcache.googleusercontent.com&#x2F;search?q=cache:jcSTVF...</a>
评论 #23868795 未加载
评论 #23868666 未加载
jraphalmost 5 years ago
An element that has:<p><pre><code> display: inline-block </code></pre> is inline outside, block inside.<p>That is, the element is inline for the containing block, but its children feel like they are in a block.<p>An inline-block element can be vertically aligned with respect to the baseline: it acts a bit like a character in a paragraph. That&#x27;s why you can vertically center things using vertical-align:center on an inline-block element.<p>At least, this is my intuition of inline-block, this comment is far from being normative.
评论 #23875861 未加载
dzinkalmost 5 years ago
20 years ago knowing CSS’s inheritance and tree traversal structure was critical to finish sites that worked flawlessly across all browsers. There was a lot of beauty in it, so much so that borrowed some ideas from CSS models for the architecture of the custom template system behind the CMS that powered CNN and a number of other large media sites with many sub-properties.
aliswealmost 5 years ago
A little secret opinion of mine is that I think the global usage of rem instead of px is a fad. The only real argument I&#x27;ve heard is that the mobile devices have their own definition of it, and will thus optimize in their own way, but then again I see that benefit as being nearly non-existant and definitely not demonstrated.
评论 #23869794 未加载
评论 #23869887 未加载
评论 #23870053 未加载
评论 #23873415 未加载
评论 #23871995 未加载
评论 #23869830 未加载
评论 #23869758 未加载
acqqalmost 5 years ago
Apart from the course promoted (which sounds really good!), does anybody know a really good book that already presents this kind of material about CSS use in a similar &quot;logical&quot; way and is not being written the style &quot;margin defines the margin&quot; (how insightful)?<p>I&#x27;m also searching for the material that is specifically oriented on:<p>- depending on the features existing in all browsers since the last 3-4 years, also mentioning how to make the features &quot;usable&quot; with the older vendor prefixes, but not depending on the JavaScript &quot;fixes&quot; for older browsers, and then showing the examples with minimal number of lines.<p>- demonstrating all the functionality that can be achieved with CSS only, no JavaScript<p>- addressing the real-life problems encountered during the design of the modern looking pages, and the goal to use all the power of the commonly available CSS features.
swyxalmost 5 years ago
for people who want to go deeper on stuff like the box model and specificity and selectors, i highly highly recommend Una Kravets and Adam Argyle&#x27;s The CSS podcast <a href="https:&#x2F;&#x2F;pod.link&#x2F;thecsspodcast" rel="nofollow">https:&#x2F;&#x2F;pod.link&#x2F;thecsspodcast</a> - they are the two CSS devrels from google and they really break it down in depth while explaining things in an accessible way. no vested relationship, just a fan.
xanatharalmost 5 years ago
Ends up to a page saying &quot;The page you requested does not exist&quot;.<p>...which kinda reflects &quot;things I wish about CSS&quot;, so 10&#x2F;10.
评论 #23869216 未加载
评论 #23868953 未加载
superasnalmost 5 years ago
This is content marketing done right. I really don&#x27;t mind that this article is there to promote the book when it actually offers some value to the reader (I actually learned a new thing, nth-child and nth-of-type)
geeweealmost 5 years ago
This is actually really nice. I&#x27;ve worked with CSS for a long while with the &quot;Stackoverflow it until it works&quot; philosophy, so some of these things (e.g. margin collapses) I had no idea about.
Phillips126almost 5 years ago
Good stuff here, I certainly learned a few new tricks.<p>I&#x27;ve been doing web development since around 2005 and to me, CSS and HTML has become far easier to use (although that could also be from experience). I took a web development course in college and found it interesting, later joining a small marketing company as an intern. My internship was unique, the company would travel to local businesses and sell them on advertising. They&#x27;d record a small ~2 minute commercial showcasing their business and then I&#x27;d build an application that compiled all of this data into a &quot;local tourism&quot; application. The real kicker - we didn&#x27;t host the content, we burned it onto CDs and distributed the discs (think AOL). The company didn&#x27;t profit well, but it was small and able to survive on what income it did make. I&#x27;m actually surprised to see it still around today - however, it seems they&#x27;ve moved on to actual hosted web development and graphic design work now. During this time we mostly used a combination of Tables and Photoshop &quot;slices&quot; to do layout (yuck!).<p>Today I use CSS&#x2F;HTML&#x2F;JavaScript daily building internal applications (and a few external). There is certainly more things to worry about such as building applications that are responsive now that mobile devices are so prevalent, however my arsenal has improved dramatically over the years with the addition of Flex and Grid (and many others). I actually enjoy the challenge of creating something beautiful and functional.
amanzialmost 5 years ago
This is great! I&#x27;ve been hacking away at CSS for years and learned heaps from this. Also, reminded me to look up the differences between `rem` and `em`, which I&#x27;ve been meaning to do for ages!<p><a href="https:&#x2F;&#x2F;j.eremy.net&#x2F;confused-about-rem-and-em&#x2F;" rel="nofollow">https:&#x2F;&#x2F;j.eremy.net&#x2F;confused-about-rem-and-em&#x2F;</a>
mawekialmost 5 years ago
I think a better understanding between inline and block is, that inline-elements do not generate a block. The idea of a block breaks down for inline elements, especially when they go over multiple lines. It&#x27;s not just a horizontal expansion.<p>So understand what creating a block means. Inline-elements don&#x27;t.
评论 #23868735 未加载
pansa2almost 5 years ago
&gt; <i>If your CSS reset doesn’t include this already, I’d suggest adding the following rule: ...</i><p>If I&#x27;m trying to build a site design from scratch (rather than using Bootstrap or similar), is a CSS Reset a good place to start? Is there one in particular that&#x27;s recommended?
评论 #23870049 未加载
评论 #23870150 未加载
seanalltogetheralmost 5 years ago
I wish the author had gone a bit further into em vs rem. I&#x27;m reading other articles on the topic but they&#x27;re simply technical explanations and I&#x27;m still not clear on what features of the page are best designed using em or rem.
评论 #23869945 未加载
评论 #23869744 未加载
评论 #23868974 未加载
jb3689almost 5 years ago
CSS is such a weird abstraction. Who thinks in blocks and inline blocks? Who thinks in paddings and margins? Floats, etc? I know these are more flexible, but I&#x27;ve always found grid-based frameworks to be far more intuitive
评论 #23871545 未加载
评论 #23871817 未加载
评论 #23871482 未加载
评论 #23871196 未加载
blue1almost 5 years ago
IIRC, <i>vertical</i> margins collapse, horizontal margins do not
评论 #23869984 未加载
thrownaway954almost 5 years ago
here is the greatest thing i learned about css just last week:<p>.container { display: flex; align-items: flex-start; }<p>OMG!!! where have you been my whole life you little flex darling :)<p>you have no idea how much trouble and pain it is to align elements that are table cells.<p><a href="https:&#x2F;&#x2F;css-tricks.com&#x2F;almanac&#x2F;properties&#x2F;a&#x2F;align-items&#x2F;" rel="nofollow">https:&#x2F;&#x2F;css-tricks.com&#x2F;almanac&#x2F;properties&#x2F;a&#x2F;align-items&#x2F;</a>
ex3ndralmost 5 years ago
A lot of issues are simply solved by switching to flex.
christophilusalmost 5 years ago
Margin collapse was new to me, and I’ve been doing this web thing a very long time. Over all, that’s a great article. Nice and readable, too.
divanalmost 5 years ago
- One of the biggest traps for smart engineers is optimizing a thing that shouldn&#x27;t exist.<p>(c) Elon Musk, speaking about CSS (maybe)
minikomialmost 5 years ago
nth-child is really useful, and it&#x27;s worth playing around to get a feel for how multipliers and offsets work:<p><a href="https:&#x2F;&#x2F;css-tricks.com&#x2F;examples&#x2F;nth-child-tester&#x2F;" rel="nofollow">https:&#x2F;&#x2F;css-tricks.com&#x2F;examples&#x2F;nth-child-tester&#x2F;</a><p>eg. try 3n+1, 3n+2. 3n+3 and then different multipliers
Brajeshwaralmost 5 years ago
Wow! This is cool.<p>You got me at, &quot;This was back in 1999, when we’d write things like &lt;font size=&quot;4&quot; color=&quot;#000000&quot;&gt; and DHTML was a thing.&quot;<p>’twas the time when understanding the CSS Box-model was the graduation opportunity to be part of the CSS-Pros.
larrikalmost 5 years ago
&gt; Notice how it’s the odd-numbered rows with a background? Given our selector (p:nth-child(even)), we might expect the even-numbered rows to be highlighted instead.<p>OR it counts rows from zero instead of 1, rather than all this about siblings...
评论 #23876604 未加载
评论 #23871083 未加载
jyriandalmost 5 years ago
It’s amazing how software engineers can get things done without actually knowing the tools they are using. CSS is one of these tools that i never bothered to learn properly but instead hack it until it works as expected.
bobbyzalmost 5 years ago
CSS was designed to make sense in a context that is no longer relatable, same with Git. This will never, ever happen if you&#x27;d designed your system to mimic nature (unless global warming fundamentally changes it).
JacobSeatedalmost 5 years ago
Very good. I skimmed through it, since I am busy with some work.<p>But, I still code most things by hand. I only use WYSIWYG when I really have to. Most often I find it faster and easier to create things with plain CSS.
Kiroalmost 5 years ago
&gt; But that won’t provide a great user experience, particularly for users who resize content at the browser level or zoom into content.<p>What browsers zoom dynamically nowadays? When is this actually an issue?
评论 #23870156 未加载
steve_adams_86almost 5 years ago
I’ve always thought of ch as a unit intended for monospaced fonts or languages with monospaced characters. Does anyone know of any other practical uses?
评论 #23868980 未加载
评论 #23872696 未加载
bouncycastlealmost 5 years ago
These would be great interview questions!<p>&quot;So, you&#x27;ve been doing CSS since 1999. Please tell me how the width&#x2F;height of a box is calculated?&quot;
评论 #23870291 未加载
baxtralmost 5 years ago
Side note: that’s a great marketing headline!
have_faithalmost 5 years ago
&gt; block elements expand horizontally to take up a whole line (like a heading).<p>Unless of course you set an input to display: block....
评论 #23872262 未加载
christiansakaialmost 5 years ago
Very nice. I know most of these but then occasionally forget, this website is a good reminder.
gklefnbkonalmost 5 years ago
People really didn&#x27;t know this? To be clear, I&#x27;m not criticizing anyone for not knowing this stuff, as nobody can be expected to know everything (and everyone was a beginner at one time). I&#x27;m just surprised that within this community, where a lot of us are employed to build websites, that the basics of CSS are still a mystery to so many of us. And I don&#x27;t think that&#x27;s the fault of any individual. But clearly our industry has a problem.<p>Granted, if you spend most of your time on the backend, and only dabble in CSS a little bit, or you&#x27;re new to web development, it&#x27;s completely understandable to be fuzzy on the specifics of CSS. But that doesn&#x27;t explain all the comments from designers and front end people. So what&#x27;s going on?<p>One possibility is that CSS is too difficult. Maybe? It certainly has it&#x27;s flaws. And it was harder to use in the past. But I don&#x27;t think there&#x27;s a huge learning curve to understanding the difference between padding and margin, or between block and inline elements, is there? Don&#x27;t we do that sort of thing in Word documents regularly?<p>Another possibility, then, is that the mental model of a document doesn&#x27;t match the designer&#x27;s expectations. But I don&#x27;t think this alone explains why so many of us struggle with CSS. It&#x27;s true that many of us are trying to make applications on a platform meant for documents. It&#x27;s also true that magazine-style page layouts aren&#x27;t a natural fit for a Word-like model of document editing. But the features described in this article don&#x27;t seem related to that discrepancy - I can&#x27;t see how ignorance about nth child or rem units relates to the mental model of documents.<p>Here&#x27;s what I think is happening: We spend too much time building new tools and not enough time learning the tools we have. I&#x27;ve seen this with javascript as well. There were some recent posts here about vanilla javascript, and comments from React developers were surprised by some of the things JS could do on it&#x27;s own. Now React has it&#x27;s place of course, just like how CSS frameworks have their place. But I see a lot of people using these things as a boilerplate, instead of using them where appropriate. And thus, we don&#x27;t take the time to learn how to do stuff with just HTML, CSS, and JS.<p>And granted, I don&#x27;t think everyone needs to know that, just like how not everyone needs to know assembly. But if not enough people understand what&#x27;s going underneath the hood, then the default response to any limitation is &quot;abstract more&quot; and everything grows more and more bloated.<p>I&#x27;m not sure how we solve this. I suspect the time pressures of our industries incentivize building things quickly, which leads to this problem. Another possibility is that the browsers take too long to adopt new standards, which leads people to seek out workarounds.<p>Has anyone here thought about this? Any ideas on what we should do? I think the linked article is a good start. The explanations of CSS properties is very clear, and I like the examples.
评论 #23872587 未加载
HungryHaroldalmost 5 years ago
Nice article. A few of those tripped me up in the past also
z3t4almost 5 years ago
Specificity and cascade.
staycoolboyalmost 5 years ago
I love reading these articles because it is a win-win:<p>1. If I already know the tidbit, I give myself a pat on the back<p>2. If I don&#x27;t know the tidbit, yay, I learned something.<p>Someday I&#x27;ll be 100% in the #1. What got me in this article &quot;ch&quot; size.<p>Fact: the heigh&#x2F;width calculation has changed over the years. It is likely this article captures the final method, let&#x27;s hope so.
fk6aaa545calmost 5 years ago
My #1 thing about CSS - it&#x27;s OK to use tables (&quot;display: table&quot; to be exact).
daiyanzealmost 5 years ago
Hi, all! I&#x27;m author on pitayan.com. It&#x27;s about front end development.<p>Link: <a href="https:&#x2F;&#x2F;pitayan.com" rel="nofollow">https:&#x2F;&#x2F;pitayan.com</a>