CSS Tutorial: Bí quyết code CSS gọn, đẹp và siêu dễ hiểu 🚀
ฝัง
- เผยแพร่เมื่อ 13 ต.ค. 2024
- Bật mí phương pháp thần thánh giúp bạn biến những đoạn code CSS khó nhằn thành những đoạn code ngắn cực kì dễ đọc và dễ hiểu 😍
Học css đơn giản, mình sẽ chia sẻ với các bạn trong video này:
✅ Hiện trạng code CSS thực tế như thế nào?
✅ Làm sao cải thiện code CSS cho tốt hơn?
✅ Cách sắp xếp code css sao cho dễ đọc
Hi vọng qua video này các bạn sẽ cải thiện được cách viết code css sao cho dễ đọc và hiệu quả hơn nha ❤️
🌐 Link tham khảo học CSS cơ bản:
CSS Tricks: css-tricks.com...
Chủ đề liên quan tới CSS: • CSS Specificity: Cách ...
#css_co_ban
#css_tutorial
#css_for_beginners
-----
💻 Easy Frontend 🎉
Nơi kiến thức lập trình web frontend (html/css/javascript/reactjs) được chia sẻ một cách đơn giản, dễ hiểu mà đặc biệt là vui 😊 Với những tài liệu (tutorial) được biên soạn một cách kĩ lưỡng để giúp các bạn developer mới có thể nắm bắt vấn đề một cách nhanh chóng và hiệu quả. Từ đó nâng dần khả năng coding của các bạn lên theo thời gian.
❤️ Ủng hộ mình làm videos thì đóng góp tại đây nhé:
Ủng hộ tôi: unghotoi.com/e...
MoMo/ZaloPay: 0901 309 729
Kết nối với mình:
🎉Fan page: / learn.easyfrontend
❓Group: / easyfrontend
💻Github: github.com/pau...
💼 LinkedIn: / haunguyenmn
quay lại video ngày xửa công nhận mindset a Hậu xịn thực sự, vẫn hóng khóa html css pro của a Hậu gần 1 năm 😭😭
hihi cảm ơn em nhiều, mà tình hình công việc dạo này bận quá, nên chắc hơi khó để làm đc em nhen hic
Trước h e cug hay làm vậy. Không ngờ nó là 1 phương pháp được khảo sát trên CSS trick luôn :v. Cảm ơn anh đã chia sẻ
hehe ngon lành 😍
video rất hữu ích ạ, 2,3 năm trước em học front end, thường không có những video thật sự chất lượng như này hầu hết chỉ dạy chức năng thẻ thuộc tính như nào, nhiều khi biết rõ thẻ nào, thuộc tính chức năng như nào nhưng không biết cụ thể cách để xây lên 1 page cụ thể như nào, em củng rất hứng thú với video về phần react hi vọng anh có thể làm thêm về phần redux-saga, thunk, router nữa ạ, những video chất lượng như này sẽ giúp quá trình học của các bạn trẻ sau này học tiến bộ hơn rất nhiều ạ, cảm ơn nhiều ạ
Yeahhh phần chia sẻ đầy tâm huyết của bạn Ngọc, cảm ơn bạn rất nhiều. Mình rất vui khi các videos của mình có ích cho mọi người nè, đó cũng là động lực để mình làm những videos tiếp theo hihi 😍
Có ai từ fb qua đây không ạ, thiệt a là 1 trong số ít người làm video có tâm ấy ạ, mong a ra nhiều video để giúp tụi e với ạ
hihi cảm ơn em nhiều nhé Danh, a cũng ráng chia sẻ theo cách đơn giản nhất mà may mắn được mọi người đón nhận nhiệt tình hehe Anh sẽ cố gắng tiếp tục ra videos đều đều cho mn tham khảo nè hehe 😉
Thanks!
Hay quá anh ơi 😍 cám ơn anh đã chia sẻ
yeah cảm ơn em nhé 😍 cái này có video số 2 nữa, nên em xem luôn em nhen 😉
@@EasyFrontend anh cho em xin link phần 2 đc ko ạ? ^^
à đây em nha :)
th-cam.com/video/x2fr87ornSo/w-d-xo.html
cảm ơn anh, hay quá anh ơi .
hihi ngon lành, nhớ duy trì để code css dễ đọc và dễ bảo trì em nha 😉
Để em đưa nó vô đầu để nữa code hehe. Cảm ơn a
Toản Quốc hêhhee ngon lành, e xài vài lần là nhớ à, chỉ cần nhớ 5 blocks, còn thứ tự trong từng block ko quan trọng lắm 😉
@@EasyFrontend dạ anh
Thế anh ơi text-color.hoặc border-color mình nhét phần nào anh?
hi Thảo ơi, phần text-color nó liên quan tới text, em cho vào nhóm typography nhen. Còn border thuộc về nhóm display và box-model nhé! 😉
@@EasyFrontend ❤️❤️❤️
Hay lắm A ạ.
hehe cảm ơn em nhiều nhé Tuấn 😉
có cách nào để khi xuống hàng thì nó ko format dính lên với nhau không ạ
em gỡ hết các extension trong vs code r mà nó vẫn bị format code dính lên trên thì làm sao vậy ạ
à vụ này anh cũng từng bị mà chưa tìm ra cách nào config cho nó hết bị em nha 😅
Anh cho em hỏi, em dùng material UI nó code css theo kiểu này, em thấy thích viết kiểu này hơn là viết css như thông thường, trong các dự án có nên viết như này không anh. Do lâu quá em không đụng html css, em đang làm về react native, nhưng có yêu cầu làm web luôn nên em thấy cách code của Material giống react native em dễ viết hơn, và em định dùng các Component của nó thay cho các thẻ của html luôn, em không biết dùng thế có ổn không nữa.
github.com/mui-org/material-ui/blob/master/docs/src/pages/getting-started/templates/sign-in/SignIn.js
const useStyles = makeStyles((theme) => ({
paper: {
marginTop: theme.spacing(8),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
},
form: {
width: '100%', // Fix IE 11 issue.
marginTop: theme.spacing(1),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
}));
hi Vương, thật ra hiện tại có khá nhiều cách khác nhau để styles cho react components.
www.sitepoint.com/react-components-styling-options/
Như cái link này chẳng hạn hehe
Thực tế thì tuỳ team thích theo kiểu nào mình làm kiểu đó.
Nhưng em từ RN qua, thì làm theo hướng của MUI là hợp lý em nha, vì nó tương tự luôn hhee, đỡ khổ 😅
@@EasyFrontend à dạ em cảm ơn anh, cách viết của MUI là kiểu JSS như link a đưa, cũng ổn không phải là tệ nhất 😅
Bạn có thể chia sẻ về cách tổ chức thư mục của 1 project (reactjs) thực tế được không? Cảm ơn bạn nhiều !
Nguyen Xuan Hai à được nhé Hải, mình sẽ đề cập vụ này trong series project reactjs thực tế nhen 😉
@@EasyFrontend A có làm về Angular k anh ơi
Hay a ơi, phải tập thói quen này để code đẹp hơn 😁
yeahhh đúng òi đó Luân, với sau này quay lại sửa cũng dễ nữa, lúc đó yêu code hơn, ko còn sợ quay lại code cũ của chính mình nữa 🤣
Dạy styled-components đi anh
hihi okie em nhé, a đã note lại, có time a sắp xếp làm video về nó nghen 😉
xưa cũng nghĩ như a, nhưng thấy nhìu ông youtube( nc ngoài lun) cũng code 1 lèo thành ra cứ tưởng code thế là ok :)))), k lẽ giờ ngồi sửa lại tất :)
hahaa chắc chịu òi đó =))) cái nào mới thì sửa lại nè, còn cái cũ định tới đâu refactor lại khúc đó nha hehee 😉
hay quá anh ơi
*a Hậu cho e hỏi trong project thực tế JS sẽ làm những việc gì vậy ạ? a có thể cho e xin keyword để e có thể tìm hiểu tại e chưa làm project thực tế nên cũng k rõ lắm ạ. Em cảm ơn a*
hi em, hiện mà một project reactjs thì em sẽ làm những phần như:
1. Làm giao diện: HTML/SCSS (chia component cho hợp lý nhé)
2. Làm phần logic của app (state, global state)
3. Integrate với API để lấy dữ liệu trên server.
Ngoài ra tuỳ dự án mà em sẽ phải setup project ngay từ đầu, rồi webpack rồi CI/CD, ... 🙂
Nên cơ bản là em phải có kiến thức HTML/CSS/JS vững và kiến thức nền tảng của lập trình để làm tốt công việc nha Tái 😉
@@EasyFrontend vâng a, E cảm ơn a. Hiện tại e cũng đang học reactjs hì hì
Cảm ơn vì những video hữu ích từ anh, rất mong anh ra clip nói về BEM ạ.
hihi cảm ơn em nhiều nhé Trọng ơi, noted em nhé, a đã đưa vào ds các videos sẽ làm nhen hehe 😉
A ra thêm về BEM đi ạ
vừa thấy là e bay vào xem liền
hehee cảm ơn em Trung 😉 Em có biết tới phương pháp này chưa Trung?
A ơi. hướng dẫn cách đặt tên theo bem đi ạ
à okie em nhé Triều, trước mắt em coi tham khảo trước trên trang chủ của BEM nhen 😉
getbem.com/introduction/
@@EasyFrontend cảm ơn a :D thường trong thực tế dùng sass hay css thuần vậy a
Triều Nguyễn Tuấn à thực tế thì a toàn dùng scss + bem nhé Triều hehe
Anh Hậu cho em hỏi là để làm Front end thì mình có cần học Gulp, Pug và Sass ko anh?
hi Thiện,
Về SCSS thì chắc chắn nên học em nhen.
Về Gulp và Pug thì biết thì tốt, ko thì cũng hk sao em nha. Sau này dự án nào cần thì em học thêm syntax của pug là được, tại giờ anh thấy cũng ít đụng tới nè :) (ít nhất là những dự án a đã làm qua)
a Hậu làm 1 bài về các cách tổ chức folder & file trong 1 dự án react thực tế đi a
hihi okie em nhé Tuấn 😉 a đã note lại rồi nhé hehe
giống mấy bạn khác, giác ngộ bao nhiêu lần rồi a ạ 😂 kịp thời format lại đống css như đống rơm của mình
mà khi làm react thì a thường làm css riêng cho component hay gom hết lại vào 1 file vậy ạ?
à khi làm react thì a sẽ styles riêng cho từng component nhé Nam 😉 Dĩ nhiên nó vẫn có những file styles chung, còn lại mỗi component thì nó có một file styles riêng nhen. Để sau này nó rinh component đó đi đâu cũng được nè hehee
@@EasyFrontend vâng. Em cảm ơn :D
đưa các bạn chung team đọc code thì khóc,chứ đưa cho sếp thì xác định...
🤣 hợp lý luôn Tân 👍
anh có ý định ra series về Vue không ạ
Nam à hiện thì chưa có plan em ơi, em đang làm bên VueJS hở? 🙂
@@EasyFrontend Dạ em đang tính dấn thân vào VueJS anh ạ
Nam à vậy em cứ tìm hiểu y nè, đợt nào rảnh a sẽ làm sau hehe
Hóng series thực chiến quá a ơi 😘
hâhha vẫn trong giai đoạn soạn tài liệu em ơi =))) nhiều quá chưa chuẩn bị xong nè hehee
Anh cho em hỏi, nếu như mình chuyển 1 file PSD-> HTML thì các hiệu ứng của button, ảnh , animation.. ko có thì mình tự làm theo ý mình hay sao nhỉ?
hi em, về cái này thường em sẽ làm việc với designer, họ sẽ mô tả cho em hoặc làm một demo cho em cái animation đó nha 😉Về button, thì nó sẽ có nhiều trạng thái, em chỉ cần làm theo đúng UI, styles cho từng trạng thái là okie hehe 🙂
coi video này của anh như được khai sáng :D
hehe ngon lành em hen, từ nay cho code css nó sáng sủa hơn hen 😉
giờ mới biết kenh của anh, nên hơi chậm, cảm ơn những videos của anh
hehe hk sao Hiệp ơi, take times mà học nè, hk cần vội nha 😉
nhạc intro của anh hay và chứa nhiều động lực ghê luôn!
hihi cảm ơn em nhiều Sơn ơi hehee, lần đầu tiên có người khen nhạc intro hehee
Cảm ơn a đã chia sẻ những kỹ thuật dù đơn giản nhưng đáng để xem sửa và thực hiên. 😃😃😃 Luôn ủng hộ a. Mong a ra nhiều video hơn.
Cường Nguyễn Quốc Yeahhh cảm ơn phản hồi từ e nhé Cường, nó là động lực giúp anh tiếp tục duy trì videos nè. 🥰
And ơi, nếu chia theo SCSS structure , các typography style của tất cả các elements mình để thành 1 file _typography.scss riêng có tiện hơn so với việc để chung với các style khác rồi ngăn cách như anh ko ạ?
Bình Nguyễn à về những cái common styles mình setup chung nha Bình, còn video này a chỉ muốn nhắc các bạn việc sắp xếp thuộc tính css thế nào cho hợp lý thôi nè 😉
Rất bổ ích luôn a ơi. Mong là a sẽ ra thêm các series về SCSS, SASS, LESS, re-use styles!
yeahhh cảm ơn em nhé Hoàng! 😉 Em có biết phương pháp này trước đó cho Hoàng?
@@EasyFrontend Dạ có a, hiện tại e đang dùng BEM với SCSS nhưng nhiều chỗ còn thừa lắm a, như là nested bem, viết mixin ntn cho chuẩn, etc.
Cảm ơn a, anh làm video nói về kĩ năng viết CV đi a.
Hưng Nguyễn Ngọc À cũng là một ý hay, a sẽ note lại và hướng dẫn các bạn hihi
xứng đáng được 1 lượt đăng ký từ e
Yeahhh cảm ơn em nhiều nhé ❤️
hóng tương lai k biết a có làm về angular k ợ?
à về Angular thì a hk có plan để làm nè 🙂
Thanks anh Hậu đúng cái mà em nên cải thiện. Mong anh hậu ra video ứng dụng một vài package hay của npm ạ.
Yeah cảm ơn em nhé Rio, a đã note lại, có thời gian a sẽ sắp xếp làm một vài lib a hay dùng nhen 😉
Hi anh, Cảm ơn anh. Là em đây :))))
Tran Hoang hehe cảm ơn em nha Hoàng 😉
@@EasyFrontend Bình thường theo thói quen, em code tất cả trong 1 anh ạ. Sai, quá sai
Tran Hoang Yeah giờ biết rồi, tổ chức lại cho tốt Hoàng nha hehee
giác ngộ part 3 😎😎😎 tks boss ạ :3
🤣series giác ngộ Frontend hở Thành =))))
Đúng phần em mong chờ. Cảm ơn anh rất nhiều.
Vid hay lắm a nhớ.
hehee cảm ơn em nhiều nhớ! 😍
Cảm ơn a, a dạy vừa hay lại vừa dễ hiểu. sau khi xem xong hết các clip series của a, e đã giác ngộ ra đc thêm nhiều thứ mới. Bấm hẳn 2 lần like cho a luôn :)))Jk, được của ló
hehee cảm ơn Giang nhiều nhaaaaaaa 😍 Anh rất vui khi nghe phản hồi từ mọi người về việc học được cái mới từ video của anh nè 😉
S người taz ko sinh ra một cái extension format cái điều này anh nhỉ 😆
Noras à có đó Noras ơiiii, hình như stylint-config-rational-order thì phải hehe, a chưa xài nhưng sáng nay có bạn giới thiệu cho anh hehee
@@EasyFrontend Hihi cảm ơn anh nhen >< ❤
Hôm sau a làm thêm cái video về nextjs đi ạ 🤗
hehee cái này anh ko có làm nhiều nên chắc sẽ né ra đó em 😉
Anh hướng dẫn build react với webpack đi a hoặc cách sử dụng babel eslint
Girls Form Asia To Europa yeah a có note lại cái này rồi nha, có dịp a sẽ moi lên làm cho mn tham khảo nè hehe
Video hay và bổ ích quá anh ơi
hihi cảm ơn em nhiều nhé! Em có biết tới phương pháp này chưa nhỉ? 😉
Dùng sort order theo abc cũng đc🙂
Yeah, cái này thì mình chưa apply thử nên ko rõ sẽ ra sao.
Nhưng mình nghĩ nó cũng hơi bất tiện một tí, phải nhớ thêm thứ tự bảng chữ cái, và mỗi lần sửa một group chức năng, cũng phải thêm vào nhiều blocks khác nhau, nên cũng hơi căng 🙂
dúng stylelint , "stylelint-config-sass-guidelines","stylelint-config-recess-order", prettier để sort, linter và format luôn
cảm ơn anh, giác ngộ, rất hữu ích :)
Quân Ngô hahaa cảm ơn em nhé Quân, rất vui vì video hữu ích với em nè 😉
Hay quá anh ơiii
yeahhh cảm ơn em nhiều Thuận ơiiii! 😍
em chào anh ạ. mong anh làm authentication và authorization trong reactjs. hihihi
hi Dũng, a đã note lại rồi nhé, có thời gian a sẽ sắp xếp làm nè hehee
Những video chất lượng
hehe cảm ơn Bẻo nhiều nè 😍
các ô nhanh thế :V
🤣sẵn tiện cho a hỏi em biết tới phương pháp này chưa Quang?
@@EasyFrontend dạ chưa ạ, em viết còn ghê hơn thế kia á :V phải áp dụng ngay mới đc. Cảm ơn a nha.
em cảm ơn anh ạ
Hay quá anh
Cmt đầu nè a hậu hehe
haha ngon lành, fan ruột luôn 😍
hay thank bạn
hihi cảm ơn Thắng nhé, Thắng có bố trí CSS theo kiểu này hk Thắng hen? 🙂
Great content
❤️
hay quá anh ơi
hay quá anh ơi